Google Analytics on Helsinki Service Portal

brian_ · ‎11-07-2016

Has anyone put Google Analytics on the Service Portal? I put it as a javascript include at the theme level. This seems to work, but only for the initial page the user hits or any refreshes. Since navigating around the portal typically doesn't involve reloading a new page, it would seem GA doesn't get the hit that the URL has changed.

I tried putting the tracking code into a widget in the header on all pages, but that didn't seem to work any better.

Any ideas? Thanks

brian_ · ‎12-05-2016

Did you create a UI script, or did you go through Service Portal > Themes > your theme > JS Includes? This is where the script will need to be. <edit: I re-read your post and saw you did that>

Also, remove the <script> tags (lines 1 & 10) from your script include. The yellow dot errors can be ignored.

That implementation should work great. I did end up combining that JS Include into the header widget as well for simplicity's sake. Here is a screenshot.

(if you choose to do it this way, you'll have to edit it in the Service Portal Configuration > Widget Editor. Editing it directly from Widgets will not let you save as the script editor barks at that red dot error, but that is code directly from Google so I left it alone)

And is working very well.

View solution in original post

brian_ · ‎11-07-2016

Figured it out. It is a 2 part solution:

1. Include the tracking code provided by Google in the Theme script includes. This is a UI script.

2. Modified the client script on my custom header widget (a widget that is on every page). The angular event $locationChangeSuccess is reported every time an angular page redirect happens. In here, define a function to send to Google a new pageview.

$rootScope.$on('$locationChangeSuccess', function(event, toState, toParams){

   ga('send', {

       hitType: 'pageview',

       title: $window.document.title,

       location: $location.absUrl()

   });

})

You'll need to include $rootScope in your controller if it isn't already. Just update the first line to add $rootScope

function ($rootScope, $scope, snRecordWatcher, spUtil, $location, $uibModal, cabrillo, $timeout, $window)

In my example, I'm also calling on $location and $window to get the URL of the new page, and the title of the new page.

#1 gets your GA tracking code on the page so it can be called elsewhere, and it tracks initial page loads, refreshes, back/forward browser navigation and any hard-coded href navigation (that isn't re-handled by Angular).

#2 calls the code from #1. It fires a new pageview every time an angular page redirect happens.

tyler_ford · ‎12-05-2016

Hi Brian,

I am trying to configure this same setup but not having any luck. I am sure it is my lack of scripting experience that is to blame. Hoping you can offer some pointers for what I may have done wrong.

First I created a UI script called "google analytics", and pasted the tracking code from google (as is)...should I ignore the syntax errors?

I added this to the "JS Includes" related lilst on our portal's theme page.

Next I added the piece of code you have listed in the "client controller" section of our header widget.

The first line in the client controller already had

so I just added the "$window" part as well...

Your assistance is greatly appreciated.

Thanks,

Tyler

brian_ · ‎12-05-2016