logo

NJP

Google Analytics using Global Site Tag

Import · Feb 21, 2019 · article

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.
    1. * Source: URL
    2. Create a new UI Script for the calling script shown above. Again, note that the correct tracking ID should be included.
    3. * 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|'); }); });​
    4. 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.
    5. * 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 "" 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

View original source

https://www.servicenow.com/community/developer-articles/google-analytics-using-global-site-tag/ta-p/2325399