How to use jQuery to track Google Analytics events on SharePoint

There have been a lot of articles written about Google/Universal Analytics and how to track events. But I recently needed to track some links on a SharePoint page, and realised it wasn’t going to be as easy as usual, due to the way the SharePoint link web parts are set up.

What are events?

An event can be any interaction a user has with a web page. A click, a download, filling out a form, playing a video and so on. Using the Universal Analytics Event Tracking allows you to track specific events on a page or site. It provides a greater level of detail about the interactions your users are having with your site.

I’ve used event tracking on various intranets and websites, and, for me, it’s essential for finding out exactly how often links are used – particularly within hotly-contested spaces like the home page and navigation menus. It helps me to make clear decisions about which links to keep and which to remove, and provides me with the evidence I need to justify my decisions to people who think the world revolves around their content.

Tracking events using jQuery and CSS classes

So, back to my recent use case: I needed to track the links located within a Promoted Links web part. Due to the way that the SharePoint Promoted Links web part works, I couldn’t add the event tracking code directly to the hyperlink, via the source code, like I have done in the past.

Adding it to the web address field would cause it to break, and adding to the description field would do nothing.

Adding a link on SharePoint

 

Therefore, I needed to use jQuery to add the code to the links. I can’t pretend to know much about jQuery at all, but I have some helpful colleagues and friends (Tom) who I can bug when I can’t work something out.

With a little bit of Googling, I found this jQuery Event Tracker code generator created by Alex Moore.

Unfortunately, it’s set up for the old Google Analytics, rather than the newer Universal Analytics, but it was a good enough start for me.

I followed the steps to generate my code:

  • Step 1: I left as is.
  • Step 2: I chose to ‘target links when they are clicked’.
  • Step 3: I selected to target links which are contained within a class. I checked the SharePoint page, to work out which div class the Promoted Link hyperlinks were sitting within.
  • Step 4: I selected to fire a custom event.
  • Event Configuration: I named my category ‘promoLinks’, and the event action ‘click’. I chose to make the event label the anchor text – this is easier to read than the href contents.
  • I then skipped the Link Conditions and Miscellaneous sections.

Generating google analytics event code

After filling out all the fields, the generator spat out this code:

Google analytics event tracking codeThe highlighted bits are sections that I needed to change.

The yellow section had to be updated to make it work with Universal Analytics. The _gaq.push(["_trackEvent" reference only works with Google Analytics. Universal Analytics tracking code now must begin with ga('send', 'event', – resulting in an event tracker looking like this:

ga('send', 'event', 'promoLinks', 'click', text);

The purple sections are essentially putting a pause on the link when it’s first clicked, to give the event time to fire. I got rid of as it was causing my links to break (not sure why), and as far as I can tell, removing the pause hasn’t affected the functioning of the event tracking.

Once I tidied up the code and removed the notes, I was left with this:

Then I inserted a Script Editor web part to the page and added the code to it.

Now, every time a hyperlink (a), within the .ms-tileview-tile-content class, is clicked, an event is recorded in Google Analytics.

Leave a Reply

5 Comments

    • Theresa McGinley

      Hi Diego, your plugin looks good. I’ll give it a try and see how I go.

  1. Ben

    Thanks so much for this. Alex Moore code was doing my head it. Didn’t realise it was using an old version of analytics.

    In order to get your code working, I changed:

    $(“.ms-tileview-tile-content a”).each(function() {

    to:

    $(“a.ms-tileview-tile-content”).each(function() {

    • Theresa McGinley

      Glad to hear it was useful, Ben. Cheers.

  2. Brandon Katz

    Hi there,

    Have you considered a third party analytics solution for your SharePoint portal? A solution like CardioLog Analytics drills down deep to provide much deeper insights than those available in SharePoint or Google analytics.It’s available as an On-Prem or SaaS deployment. The solution is specifically built for SharePoint, so it’s tailored to provide analytics specifically on SharePoint’s architecture. If you’re looking for more information regarding your portal visitors, navigation paths, search behaviors, and content performance check out http://www.intlock.com

    Hope this helps!

Next ArticleHow to trick a Calculated column into referring to a Multiple Lines of Text column