Event Tracking in Google Analytics with SharePoint Online

Last Updated on Jul 14, 2023

Google Analytics enables you to optimize your advertising ROI and track your sites and applications. It helps you get a better understanding of your business’ stakeholders. Google analytics brings with it open-source tools to analyze data for your applications.

Setup Google Analytics Tracking

First and foremost you would need to set up a Google Analytics account before you move into SharePoint development.

  • Sign into your Google Analytics account
  • Enter a valid email address and password. Click Next.
  • Click on the Admin tab on the left bar.
  • If you already have an account, select an account or click on Create Account to create a new one.
  • In case of a new account, provide Account Name, Website Name, Website URL and other required information, and click on Get Tracking ID. If you already have an account, select an account from the menu and under Property tab, go to Tracking Info > Tracking Code.
  • Note the Google Site Tag (gtag.js) tracking code for future use.
  • Copy and paste below code snippet after the<head> tag=”” of=”” your=”” site’s=”” html=”” master=”” page<=”” li=””></head>>

Tracking Code Snippet

<!-- Global site tag (gtag.js) - Google Analytics -->
 
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID">//<![CDATA[//]]>
 
</script>
 
<script>//<![CDATA[
 
window.dataLayer = window.dataLayer || [];
 
function gtag(){dataLayer.push(arguments);}
 
gtag('js', new Date());
 
gtag('config', 'GA_TRACKING_ID');
 
//]]>
 
</script>

<!– Global site tag (gtag.js) – Google Analytics –> <script async=”async” src=”https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID”>//<![CDATA[//]]> </script> <script>//<![CDATA[ window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag(‘js’, new Date()); gtag(‘config’, ‘GA_TRACKING_ID’); //]]> </script>

Where, GA_TRACKING_ID = Google Analytics tracking id

  • Visit your site to verify that tracking code is working as expected and that you are being actively tracked.

Event in Google Analytics

In terms of Google Analytics, an event can be described as the interaction of users with the content of a web page that is being tracked in GA. Content includes an image, a form, a button, a video, a gadget, an external link and much more.

Some of the examples of events/activities that can be tracked in GA include:

  • Downloading of a file
  • Clicking on a button
  • Visit on a dynamically generated page
  • Clicking on an image
  • Mouse movement
  • Playing a video
  • JavaScript load
  • Filling a form

Track Google Analytics Custom Events with SharePoint

It has now become a necessity to understand and analyze the interaction of users with the published content. Having Google Analytics as a tool to monitor your intranet is the way to go.

It provides an in-depth analysis of every bit of movement happening in your site along with concise real-time reports, widely used for public facing sites. Though it tracks company SharePoint intranets too.

You can use the gtag.js event command on the page where the tracking code has been set up.

gtag Event Command

gtag('event', <action>, {
 
'event_category':
 
<category>,
 
'event_label': <label>,
 
'value': <value>
 
});

gtag(‘event’, <action>, { ‘event_category’: <category>, ‘event_label’: <label>, ‘value’: <value> });

  • – string specifying the type of event appearing as event action in GA reports
  • – name that you provide as a way to collaborate similar objects tracked as event category in GA event reports
  • – additional information for events appearing as event label
  • – non-negative integer to a tracked page element appearing as event value

Event Tracking Command Example

gtag('event', '<user display name>', {
 
'event_category': 'Download',
 
'event_label': '<Document Name>'
 
});

gtag(‘event’, ‘<user display name>’, { ‘event_category’: ‘Download’, ‘event_label’: ‘<Document Name>’ });

The above command fires Google Analytics event command having action ‘’, category ‘Download’ and label set as ‘’.

Send Non-Interaction Events

Non-interaction = Boolean parameter passed to the event command that sends Event hit. It enables you to define bounce rate for pages including event tracking code.

In order to send a non-interaction event, pass the non_interaction parameter as true

Non-interaction parameter

gtag('event', 'video_auto_play_start', {
 
'event_label': 'Promotional video',
 
'event_category': 'video_auto_play',
 
'non_interaction': true
 
});

gtag(‘event’, ‘video_auto_play_start’, { ‘event_label’: ‘Promotional video’, ‘event_category’: ‘video_auto_play’, ‘non_interaction’: true });

Track File Downloads on Your Page Using Google Analytics

An enhancement to Google Analytics is its ability to catch events fired from the site page.

Google Analytics makes use of client-side scripting to record user events or interactions such as File Downloads or External Links click. It helps to track events on all pages of the site irrespective of programming language.

By default, Google Analytics with SharePoint Development will not track how many times users have downloaded files and which users download which files (because the files fail to request much-needed tracking pixel).

Supposedly, you need to track file downloads, may it be a .pdf, .doc, .ppt, .pptx, .mp3, .xls, .zip – many more. The ideal approach is to track file downloads as events.

Track File Downloads as Custom Events

If the users have the facility to download a lot of files on your page, SharePoint developers can just automate the process for download tracking rather than adding the code each time a button/link is clicked for download.

The below code provides a similar functionality. Place the code inside the ready function of the .js file on your page. You can customize the code based on your needs.

Track File Downloads

var filetypes =
/\.(zip|exe|dmg|pdf|doc.*|xls.*|ppt.*|mp3|txt|rar|wma|mov|avi|wmv|flv|wav|jpg)$/i;
 
var baseHref = '';
 
if ($('base').attr('href') != undefined) {
 
baseHref = $('base').attr('href');
 
}
 
$('.search-listing').on('click', 'a[title="Download"]', function (event) {
 
var el = $(this);
 
var track = true;
 
var gaMaterialName = $(this).closest('li').find('em').attr('title');
 
var href = (typeof (el.attr('href')) != 'undefined') ? el.attr('href') : "";
 
if (!href.match(/^javascript:/i)) {
 
var elEv = []; elEv.value = 0, elEv.non_i = false;
 
if (href.match(filetypes)) {
 
var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
 
elEv.category = 'Download';
 
elEv.action = _spPageContextInfo.userDisplayName;
 
elEv.label = gaMaterialName + " - " + href.substr(href.lastIndexOf('/') + 1);
 
elEv.loc = baseHref + href;
 
}
 
else
 
track = false;
 
if (track) {
 
gtag('event', elEv.action, {
 
'event_category': elEv.category,
 
'event_label': elEv.label,
 
'value': elEv.value,
 
'non_interaction': elEv.non_i
 
});
 
}
 
}
 
});

var filetypes = /\.(zip|exe|dmg|pdf|doc.*|xls.*|ppt.*|mp3|txt|rar|wma|mov|avi|wmv|flv|wav|jpg)$/i; var baseHref = ”; if ($(‘base’).attr(‘href’) != undefined) { baseHref = $(‘base’).attr(‘href’); } $(‘.search-listing’).on(‘click’, ‘a[title=”Download”]’, function (event) { var el = $(this); var track = true; var gaMaterialName = $(this).closest(‘li’).find(’em’).attr(‘title’); var href = (typeof (el.attr(‘href’)) != ‘undefined’) ? el.attr(‘href’) : “”; if (!href.match(/^javascript:/i)) { var elEv = []; elEv.value = 0, elEv.non_i = false; if (href.match(filetypes)) { var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined; elEv.category = ‘Download’; elEv.action = _spPageContextInfo.userDisplayName; elEv.label = gaMaterialName + ” – ” + href.substr(href.lastIndexOf(‘/’) + 1); elEv.loc = baseHref + href; } else track = false; if (track) { gtag(‘event’, elEv.action, { ‘event_category’: elEv.category, ‘event_label’: elEv.label, ‘value’: elEv.value, ‘non_interaction’: elEv.non_i }); } } });

The above script automates the process of file downloads and registers downloads as events inside Google Analytics. It works for the provided extensions: .zip, .exe, .dmg, .pdf, doc.*, xls.*, ppt.*, .mp3 and many more.

The event command specifies

  1. Event Action > Display name of the user downloading the file
  2. Event Category > Download
  3. Event Label > Name of the document – Filename with extension
  4. Event Value  > 0
  5. Non-interaction >  false

Note: Call the jQuery library from the google cdn before executing the above code.

After publishing the page, once user downloads a file, you can track the download in Google Analytics. Navigate to Real-Time > Events > Under Content, Events (Last 30 min).

When you click on Download, you can view Event label

Comments


Your comment is awaiting moderation.

Related Articles

React Design Patterns- A Comprehensive Guide

May 9, 2024

Kubernetes Deployment Strategies- A Detailed Guide

Apr 9, 2024

How to Use Typescript with React?

Apr 4, 2024