Tracking links using Google Analytics in SharePoint 2010 with Mavention Google Analytics Links Tracking

On many public-facing websites Google Analytics Links Tracking is used to give insights into how the website is used. While tracking links on SharePoint 2010 public-facing websites is straight-forward it gets more challenging if you would like to track links in content. Find out how to track links in content using Google Analytics with Mavention Google Analytics Links Tracking.

It’s for analytics

Many customers who use the Microsoft SharePoint 2010 platform for their public-facing website, use Google Analytics for tracking analytics data. One of the things that Google Analytics allows you to track are links. Using custom events you can track which links your visitors use, what can provide you with some additional insight in how your website is used.

To track a click on a link using Google Analytics all you have to do is to add an onclick event to your hyperlink:

<a href="#" onClick="_gaq.push(['_trackEvent', 'Downloads', 'Document', 'My Document.docx']);">Download My Document</a>

Note: You can find more information about event tracking in the Event Tracking Guide

As you can see this approach is straight-forward. Adding an onclick event to a hyperlink isn’t much of a challenge in SharePoint 2010 unless you want to do it in the Rich Text Editor.

SharePoint 2010 Publishing HTML Field Type has a built-in cross-site scripting protection. By using a list of allowed tags and attributes, SharePoint ensures that the HTML entered in a Publishing HTML field is safe. The consequence of this approach is, that you cannot use any attributes or tags that are not known to SharePoint or not allowed, such as HTML5 tags, data- attributes or inline JavaScript event handlers. While the HTML might seem untouched at first, as soon as you save your page you will see that your custom HTML markup has been removed.

HTML markup after adding the onclick attribute before saving the page: the onclick attribute is still in the link

HTML markup after adding the onclick attribtue after saving the page: the onclick attribute has been removed

One workaround to this challenge would be not to use the Publishing HTML Field Type and have the HTML stored as text in SharePoint. And while this might seem a good idea at first, it has some trade-offs among which losing support for Alternate Access Mappings.

Although the Publishing HTML Field Type does not allow us to use unsafe markup, there is a way to work around it.

Tracking links in content using Google Analytics with Mavention Google Analytics Links Tracking

Mavention Google Analytics Links Tracking is a SharePoint 2010 Sandboxed Solution that allows you to add Google Analytics event tracking information to your links. Since using the onclick attribute within Publishing HTML fields is not allowed, Mavention Google Analytics Links Tracking stores the Google Analytics tracking information as a CSS class which on every page load is transformed into an onclick attribute.

What’s in the box

Mavention Google Analytics Links Tracking Site Collection Features

After installing the Mavention Google Analytics Links Tracking solution the following three Site Collection-scoped Features are installed:

  1. Mavention Google Analytics Links Tracking – this is the core Feature that installs all scripts required for functioning of the solution and installs the UI for managing Google Analytics event tracking information on hyperlinks.
  2. Mavention Google Analytics Links Tracking jQuery registration – this Feature registers jQuery upon which Mavention Google Analytics Links Tracking scripts depend. You don’t have to activate this Feature if you’re using jQuery yourself.
  3. Mavention Google Analytics Links Tracking registration script – this Feature registers the tracking script responsible for transforming the CSS class with analytics information into an onclick attribute. This Feature should be activated unless you have referenced the tracking script (located at: ~SiteCollection/Style Library/Mavention/GALinksTracking/Mavention.GALinksTracking.js) yourself to for example limit the number of requests on your site.

How it works

If you edit a Publishing Page and focus on a hyperlink you should see the new Google Analytics Event Tracking group on the Ribbon in the Links Tools contextual group.

Google Analytics Event Tracking group in the Ribbon

After you enter the tracking data and zoom in on the markup of the hyperlink, you should notice the newly added CSS class prefixed with gat-.

Hyperlink HTML markup with a CSS class prefixed with gat-

This CSS class contains all the information that is required to build up the Google Analytics Event Tracking code.

After you publish the page you can once again confirm that the CSS class hasn’t been removed. And if you have hooked up everything correctly, next to the gat- CSS class you should see the onclick attribute added to the hyperlink markup.

Hyperlink HTML markup with a CSS class prefixed with gat- and the onclick attribute containing Google Analytics Event Tracking code dynamically added to a hyperlink after publishing the page

If you have Google Analytics registered with your page, the next time someone clicks on that links, an analytics event will be registered and you will be able to track the information from your analytics dashboard.

Summary

Using Google Analytics you can track clicks on hyperlinks within your site. Unfortunately the Google Analytics Event Tracking tracking code is registered using the inline onclick attribute which is not allowed in Publishing HTML fields. Using the Mavention Google Analytics Links Tracking solution you can store the Google Analytics Event Tracking information with your link without any extra effort.

Download: Mavention Google Analytics Links Tracking (39,1KB, Sandboxed WSP)

Others found also helpful: