{"id":105940,"date":"2025-02-23T22:07:05","date_gmt":"2025-02-23T22:07:05","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/gtmtips-delay-the-history-change-trigger\/"},"modified":"2025-02-23T22:07:05","modified_gmt":"2025-02-23T22:07:05","slug":"gtmtips-delay-the-history-change-trigger","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=105940","title":{"rendered":"#GTMTips: Delay The History Change Trigger"},"content":{"rendered":"


\n<\/p>\n

\n

When working with the analytics of single-page applications (SPA)<\/a>, there are a number of things to pay attention to. For example, you need to make sure that Google Analytics doesn\u2019t break your session attribution<\/a>, and that you are not inadvertently inflating your page speed timing metrics<\/a>. Actually, there are so many \u201cgotchas\u201d when it comes to SPA tracking in tools like Google Analytics<\/a> that you just can\u2019t get by with a plug-and-play implementation.<\/p>\n

See Dan Wilkerson\u2019s excellent article<\/a>, which sums nicely the can of worms involved with tracking an SPA.<\/p>\n

One of the problems with frameworks that load their content dynamically using JavaScript (e.g. React<\/a>) is when the history event is dispatched before<\/em> the content has been loaded or the URL has actually changed.<\/p>\n

This is problematic, since you might actually want to refer to elements loaded in this dynamic state change in your tags, but because the History Change trigger<\/a> fires as soon as the event is dispatched, the content might not be there yet when your tags fire.<\/p>\n

So in this article I\u2019ll show a quick and dirty way to delay the trigger, so that your tags don\u2019t fire until the page has had time to load the content.<\/p>\n


\n X<\/span><\/p>\n

\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n

\n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n

<\/span><\/p>\n

Tip 79: Delay The History Change Trigger<\/h2>\n
\n

<\/p>\n

\"Delay<\/p>\n

<\/a><\/p>\n<\/div>\n

The easy way<\/strong> to do it is to fire a Custom HTML tag<\/strong> with the History Change trigger that is causing problems on your site<\/strong>.<\/p>\n

First, make sure you have all the history-related Built-in variables<\/a> enabled in the container.<\/p>\n

Then, in the Custom HTML tag, add the following code:<\/p>\n

\n
script>\n  (function<\/span>() {\n    var<\/span> timeout = 500<\/span>; \/\/ Milliseconds - change to what you want the timeout to be.\n<\/span>    window<\/span>.setTimeout(function<\/span>() {\n      window<\/span>.dataLayer.push({\n        event: 'custom.historyChange'<\/span>,\n        custom: {\n          historyChangeSource: {{History Source}},\n          newHistoryState: {{New History State}},\n          oldHistoryState: {{Old History State}},\n          newHistoryFragment: {{New History Fragment}},\n          oldHistoryFragment: {{Old History Fragment}}\n        }\n      });\n    }, timeout);\n  })();\nscript<\/span>><\/code><\/pre>\n<\/div>\n
As said above, make sure this tag fires on the History Change trigger you want to delay.<\/p>\n
The Custom HTML tag adds a 500 millisecond delay, after which it pushes a custom event named custom.historyChange<\/code> into the dataLayer<\/code>. With this event, five new Data Layer variables are pushed, each with the values from the original<\/em> History event that triggered the Custom HTML tag in the first place. These new variables are:<\/p>\n