When you have tracking codes from GoogleTagManager (GTM), HubSpot, or the like, you will probably want them to signal each page.

The problem is that a Single Page Application (SPA) like MDrivenTurnkey does not switch pages, and the tracker becomes unaware.

The different trackers have APIs where you can tell them what page is active.

The simplest way is to have a polling script that sends any new browser locations to the tracker. Look at the example below for HubSpot:

<!-- 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>
    
    

Instead, put your tracker script in a component's AppWideAngularScriptIncludes.html file like this:

x