Documentation:Google tag manager

Google tag manager

This page was created by Hans.karlsen on 2022-06-22. Last edited by Wikiadmin on 2026-07-29.

You can make page-tracking tools such as Google Tag Manager and HubSpot receive a page-view signal when a user navigates within an MDriven Turnkey application.

MDriven Turnkey is a single-page application (SPA). During in-app navigation, the browser does not load a new document in the same way as a traditional multi-page web site. A tracking script that only runs on the initial document load can therefore miss later locations.

How SPA navigation affects tracking

A tracker normally identifies a page from the browser location. In a Turnkey SPA, the browser location can change while the application remains loaded. To record those changes, load the tracker once and add code that detects a changed browser URL and calls the tracker API.

For example, when the URL changes from:

https://example/#/Customer

to:

https://example/#/Customer/Details

the tracking code can use the part after # as the tracked path.

Add a tracker and page-change detection

Place the tracker loader and the page-change script in an AppWideAngularScriptIncludes.html file in a Turnkey component. App-wide script includes are loaded for the application, which makes them appropriate for code that must observe navigation across all views.

In your model's Turnkey assets, create or select a component used for application-wide scripts.
Add or edit that component's AppWideAngularScriptIncludes.html file.
Add the vendor's tracker embed code.
Add page-change detection that calls the vendor's API when window.location.href changes.
Publish or deploy the updated application assets, then test navigation in the browser.

The following example loads HubSpot and sends a new page view whenever the browser URL changes. Replace the script URL with the HubSpot embed URL for your own account.

<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer
        src="//js.hs-scripts.com/6xxxx2.js"></script>
<!-- End of HubSpot Embed Code -->

<!-- HubSpot detect page change -->
<script>
  (function () {
    var previousState = window.location.href;

    setInterval(function () {
      if (previousState !== window.location.href) {
        previousState = window.location.href;
        let page = previousState.split('#')[1];
        var _hsq = window._hsq = window._hsq || [];
        _hsq.push(['setPath', page]);
        _hsq.push(['trackPageView']);
        console.log('HubSpot track ' + page);
      }
    }, 800);
  })();
</script>

What the example does

Code	Purpose
`previousState`	Stores the most recently observed browser URL.
`setInterval(..., 800)`	Checks the URL every 800 milliseconds.
`previousState.split('#')[1]`	Extracts the SPA location after the hash character. For `#/Customer`, the value sent is `/Customer`.
`_hsq.push(['setPath', page])`	Sets the HubSpot path to the newly detected SPA location.
`_hsq.push(['trackPageView'])`	Sends the page-view event after setting the path.

Verify the integration

Open the Turnkey application in a browser.
Open the browser developer tools and select the Console.
Navigate between at least two Turnkey views.
Confirm that the console shows HubSpot track followed by the expected hash-based path for each navigation.
Confirm in the tracking provider's reporting or debugging tools that the navigation produces the expected page views.

The example reports changes after the application has loaded. The tracker embed code is still responsible for loading the tracking provider on the initial page load.

Use another tracking provider

The same pattern applies to Google Tag Manager or another tracker: load its vendor-provided script in AppWideAngularScriptIncludes.html, detect a changed browser location, and invoke that provider's documented API to report the new active path. The exact API call is provider-specific.

For Google Analytics configuration in a Turnkey application, follow HowTos:Google Analytics in Turnkey app. Do not copy the HubSpot _hsq calls into a Google Analytics implementation; they are HubSpot-specific.

Related Turnkey customization

Use app-wide script includes for browser-side code that applies to the whole application. Use an Angular external component when a script and its markup belong to a specific ViewModel view; Documentation:Using Google Charts shows this component-based asset structure. If your requirement is to add metadata to the generated page rather than to send navigation events, see Documentation:Turnkey extra meta tags.

Contents