Google Analytics on Service Portal

[Steve Kelly]

I'm posting to see if there is an easier way to set up Google Analytics on the Service Portal (we run both ITSM and CSM Service Portals and would like to set this up for both) than cloning the header widgets, perhaps through adding a JavaScript dependency or something along those lines.

I have seen the other posts where people have successfully added GA though cloning the widgets, however, this is something we would like to avoid if possible as it can be a hassle to deal with for upgrades. I see ServiceNow also has a 'Google Analytics' UI Script out of the box, so I'm hopeful there could be an OOB recommended way to implement GA for the Service Portal.

[will_leingang · Accepted solution]

Hi Steve - I'm not saying this is the only method to do this, but here is one approach that will work reasonably well and doesn't require cloning any widgets at all. If you are using exclusively out of box widgets then this is possibly your best choice.

Because ServicePortal is a single page app built on Angular you will need to hook into the locationChangeSuccess event to tell google analytics every time a user navigates to a different "page".

To do this you will need to:

1. Create a UI script containing a new angular module along with your google analytics snippet
2. Create a javascript dependency that references the ui script and imports your angular module into your portal runtime
3. Add the dependency to the Header Menu widget

Create a new UI Script

In the navigator go to System UI -> UI Scripts

Name: SP Google Analytics beacon

Type: Mobile/Service Portal

Script:

angular.module('spGABeacon', []).run(function($rootScope, $window, $location){
	$rootScope.$on('$locationChangeSuccess', function(event, toState, toParams){
		var trackerName = 'your-tracker-id';
		//Adding timeout function to ensure destination and not source page title is sent to GA
		setTimeout(function() {
			ga(trackerName + '.send', {
				hitType: 'pageview',
				title: $window.document.title,
				location: $location.absUrl()
			});
		}, 750);
	});
});

Create a Service Portal dependency

In the navigator go to Service Portal -> Dependencies

Name: GA beacon

Include on page load: Checked

Angular module name: spGABeacon

Click submit and open the record you just created.

Go to the JS Includes related list and click New

Display Name: GA beacon

Source: UI Script

UI Script: SP Google Analytics beacon

Associate the dependencies with the Header Menu widget

Using the navigator go to: Service Portal -> Widgets

Open the Header Menu widget

Using the Dependencies related list, click edit.

Pick: Google Analytics & GA beacon and click save

You're all done! Now when you browse any portal using the header menu widget, your page views will be sent to google.

[Steve Kelly]

Wonderful, this is exactly what I was looking for. Thank you Will!

[samwallace881]

Hey guys, 

Thanks for this article. I just found that Google Analytics comes baseline in Madrid.

This is the code for the ui script:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

You just have to reference this in the dependency you create. 

[JC S_]

Hi Sam - I tried adding this to SP Google Analytics beacon as shown below but I'm still not getting data to Google Analytics. Can you share how exactly you made it work? We're on New York release now.

angular.module('spGABeacon', []).run(function($rootScope, $window, $location){
	$rootScope.$on('$locationChangeSuccess', function(event, toState, toParams){
		var trackerName = 'UA-xxxxxxxxxx-x';
		//Adding timeout function to ensure destination and not source page title is sent to GA
		setTimeout(function() {
			ga(trackerName + '.send', {
				hitType: 'pageview',
				title: $window.document.title,
				location: $location.absUrl()
			});
		}, 750);
	});
});

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');