Google Analytics using Global Site Tag

[Trevor Muhl]

I have recently implemented Google Analytics within our instance for a Service Portal and a UI Page. Some of the existing discussions were helpful, but were not quite enough to get a working solution. I completed the following in ServiceNow version London.

Prerequisites

You must have a Google Analytics account and one Google Analytics Property created for your instance or Service Portal. A "tracking ID" associated with the property will be used to configure ServiceNow.

Introduction

From the Google Analytics page, under Admin (Settings) > Property > Tracking Info > Tracking Code, the Global Site Tag information will be automatically generated and provided. The Global Site Tag will look something like this:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '|tracking-id|');
</script>

Note that "|tracking-id|" will be replaced with the personalized tracking ID for your property.

There are two portions to this Global Site Tag:

'gtag.js' library reference

<script></script>

Calling script

This script uses the above library.

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '|tracking-id|');
</script>

These two items will be used separately in ServiceNow.

Procedure (Service Portal)

The procedure below follows the official documentation here: Create a widget dependency.

1. Create a new widget dependancy package (Service Portal > Dependencies). This package will contain all necessary code (the gtag.js library and calling script), which will be introduced to the Service Portal later.
2. • Name: Whatever you prefer. Example -- "GA Global Site Tag".
   • Include on page load: Set true (checked).
   • Portals for page load (optional): Leave empty.
   • Angular module name: Suggested -- "spgtag".
3. Add files to the dependency package.
4. 1. Click "New" on the "JS Includes" related list. This first file will be a reference to Google's gtag.js library. Note that the correct tracking ID should be included.
   2. • Source: URL
      • JS File URL: The URL from the library reference provided by Google. Example -- "https://www.googletagmanager.com/gtag/js?id=|tracking-id|"
   3. Create a new UI Script for the calling script shown above. Again, note that the correct tracking ID should be included.
   4. • API Name: Can be anything. Suggested--"gtag".
      • UI Type: Mobile / Service Portal
      • Script: Calling script provided by Google, wrapped in an Angular module (named 'spgtag'). Example -- 

        angular.module('spgtag', []).run(function($rootScope, $window, $location){
        	$rootScope.$on('$locationChangeSuccess', function(event, toState, toParams){
        		$window.dataLayer = $window.dataLayer || [];
        		function gtag(){dataLayer.push(arguments);}
        		gtag('js', new Date());
        
        		gtag('config', '|tracking-code|');
        	});
        });​

   5. Again, click "New" on the "JS Includes" related list from the dependency package to create a new related file. This file will be the UI script created in the previous step.
   • • Display name: Can be anything. Example -- "Tracking code".
     • Source: UI Script
     • UI Script: Reference to the script created in the previous step.
5. Add this dependency package to your target Service Portal(s). Since the header widget for a Service Portal is always present, it is often the best candidate for this dependency. Open that record via Service Portal > Widgets. Click "Edit" under the "Dependencies" related list and add the package you created in the very first step ("GA Global Site Tag").

At this stage, the Service Portal setup is completed! Navigation through the Service Portal will begin displaying activity in Google Analytics.

Procedure (UI Page)

In my case, I needed to add Google Analytics to a UI page that was accessible from the Service Portal. Unfortunately, since the UI Page is not actually part of the Service Portal, the work done in the previous section did not apply.

Simply copy the entire Global Site Tag into the HTML field after the first "<head>" tag. Here is example HTML content for a UI Page:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<head>
		<!-- Global site tag (gtag.js) - Google Analytics -->
		<script></script>
		<script>
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());

			gtag('config', '|tracking-id|');
		</script>
	</head>
</j:jelly>

Note that the syntax checker will complain about the "async" property in the script tag. Use 'async=""' or 'async="async"' to resolve that.

And that should be all that is needed! I hope this article is helpful. Please let me know if you have any questions.

Reference: Google Analytics on Service Portal

[Bhairavi Gandhi]

Hi Trevor,

Your article was helpful.

Thanks.

How can we track different contents on the website?

[Pankaj Bisht1]

I have also implemented this but by making a UI Script and the tracking code in the footer of the Service Portal. 

[Sai Siva Chaita]

I tried your code for the service portal. it didnot work. i see google analytics on Page source but, there is no response in the GA portal @Trevor

Please check attachments

[Trevor Muhl]

You need to remove the vertical bar characters ("|") from the tracking IDs in all locations.

[Amy12]

Hi Trevor, 

Thanks for your tutorial. I tried to implement Google Analytics on the Service Portal but it is not working. I see the Google Analytics in the page source but I'm also not getting any responses or hits in my GA board. I attached some screenshots. 

I included the dependency package on the OOB widget named "Header Menu" and I am working out of the Madrid version. Any help would be greatly appreciated!

Thanks.

[rewanthrr]

Hi,

I have tried the same and no luck. Could you please help with more information.

Note: Our Instances are IP Restricted. Do I need to whitelist any IP address?

Thanks,

RRR

[harinalamalapu]

Hi Amy,

Any luck on this one? I tried exactly the same step as yours and I could see Google Analytics in the page source, but no activity is recorded on my GA board. Did you happen to find a way around this ?

Many Thanks.

[Amy12]

Hello,

I did end up figuring it out in the end. I used a combination of these two posts:

1. https://community.servicenow.com/community?id=community_question&sys_id=df0e41bcdba6a3001089e15b8a96...
2. https://community.servicenow.com/community?id=community_question&sys_id=b99217a1db101fc01dcaf3231f96...

I added two dependencies on my OOB Header Menu widget: Google Analytics and another called GA Beacon that I created. 

To create my GA Beacon, I clicked "New" on the Dependencies related list and filled in:

Name: GA Beacon

Include on page load: [checked]

Portals for page load (optional): [I chose my IT Service Portal because I wanted to track traffic on that specific portal]

Angular modular name: spGABeacon

Then I created a JS Includes record on the GA Beacon widget dependency record. I clicked "New" on the JS Includes related list and named my new JS Includes record "SP Google Analytics Beacon" and filled in:

Display name: SP Google Analytics Beacon

Source: UI Script

UI Script: SP Google Analytics Beacon

To create the new UI Script called "SP Google Analytics Beacon", I filled in the following fields:

API Name: SP Google Analytics Beacon

UI Type: Mobile / Service Portal

Script:

angular.module('spGABeacon', []).run(function($rootScope, $window, $location){
	ga('create', 'your-tracker-id', 'auto');
	
	//Browser load page view
	ga('send', {
		hitType:'pageview',
		title: $window.document.title,
		location: $location.absUrl()
	});
	
	//Angular navigate page view
	$rootScope.$on('$locationChangeSuccess', function(event, toState, toParams){
		ga('send', {
			hitType: 'pageview',
			title: $window.document.title,
			location: $location.absUrl()
		});
	});
});

Remember to replace 'your-tracker-id' with your own Google Analytics tracker ID.

[Roman S1]

Hi,

In order to use this code for Service Portal SPA:

angular.module('spgtag', []).run(function($rootScope, $window, $location){
	$rootScope.$on('$locationChangeSuccess', function(event, toState, toParams){
		$window.dataLayer = $window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());

		gtag('config', '|tracking-code|', {'page_path': $location.url()});
	});
});​

Thanks,

Roman

[Thomas Vogh]

Hi,

Thanks it was easy to implement and we now get all portals into Google Analytics.

Is there any way to only send data form one portal?

in the dependency i have added the /csm portal to "Portals for page load (optional)" but we still get /sp to Analytics. 

Thanks,

Thomas

[Danielle Gallo]

I followed the above instructions and it worked, however in Chrome Ad-Blocker prevents the page from loading when you have "Include on Page Load" checked. If you clear this checkbox the page will load, but the scripts are blocked. 

Do you have any suggestions to get around this?

[Keiichi Takeda]

Hi,

Based on the information so far, I customized the tags.

angular.module('spgtag', []).run(function($rootScope, $window, $location){
    $rootScope.$on('$locationChangeSuccess', function(event, toState, toParams){
        setTimeout(function() {
        $window.dataLayer = $window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
 
        gtag('config', '|tracking-id|', {
                        'page_path': $location.url(),
                        'page_location': $location.absUrl(),
                        'page_title': $window.document.title
        });
        }, 1000);
    });
});

• Customized to get the page title, location URL, path.

gtag('config', '|tracking-id|', {
     'page_path': $location.url(),
     'page_location': $location.absUrl(),
     'page_title': $window.document.title
});

• The waiting time for acquiring the page transition destination information is set.

setTimeout(function() {...}, 1000);

※Adjust the length of time according to the environment.

I hope this helps.
Thanks.