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:
- Create a UI script containing a new angular module along with your google analytics snippet
- Create a javascript dependency that references the ui script and imports your angular module into your portal runtime
- 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.
