How To Speed Up Your Website By Delaying Google Tag Manager

One of the biggest slags on your website (if you didn’t know it already) is Google Tag Manager. This might come as a surprise to some knowing how much of a perfectionist Google can be regarding speed. Thankfully there is a solution to fix the slowdown of Google Tag Manager by delaying its loading and here’s how to do it.

To delay the loading of the Google Tag Manager we will be using the following code from Mattias Siø Fjellvang. You can add the script to your header directly or enqueue it as a separate JS file whichever you feel works best for your site.

/**
 * Delay Google Tag Manager for better page speed
 * BlogInbox.com
 */

var initGTMOnEvent = function(a) {
  initGTM();
  a.currentTarget.removeEventListener(a.type, initGTMOnEvent);
}, initGTM = function() {
  if (window.gtmDidInit) {
    return !1;
  }
  window.gtmDidInit = !0;
  var a = document.createElement("script");
  a.type = "text/javascript";
  a.async = !0;
  a.onload = function() {
    dataLayer.push({event:"gtm.js", "gtm.start":(new Date()).getTime(), "gtm.uniqueEventId":0,});
  };
  a.src = "https://www.googletagmanager.com/gtm.js?id=YOUR-GTM-CODE-HERE";
  document.head.appendChild(a);
};
document.addEventListener("DOMContentLoaded", function() {
  setTimeout(initGTM, 2000);
});
document.addEventListener("scroll", initGTMOnEvent);
document.addEventListener("mousemove", initGTMOnEvent);
document.addEventListener("touchstart", initGTMOnEvent);

There are a few places you will need to change to make the code fully functional. The first one is the “YOUR-GTM-CODE-HERE” to include your Google Tag Manager ID.

The second one you can edit to your own preference is the “2000” which sets the delay for Google Tag Manager. In our example, it is set to 2000 which equals 2 seconds.

Note – A few things to note from the script are that if the user scrolls, move a mouse, or does something else on the site, the script will not be delayed so you can start collecting analytics instantly. Though if the user does nothing and leaves before 2s have passed they will not be added to your analytics statistics since the script has never loaded.

Remember that even though this code delays the Google Tag Manager you still need to ask consent for cookies from all EU-based visitors. If you don’t know “How To Add Cookie Consent PopUp/Banner In WordPress“, click the link to follow our guide.

Similar Posts

4 Comments

  1. Can you delete the last 3 lines in order to stop firing the GTM by a time delay only? (2000 milliseconds in this example.)

    document.addEventListener(“scroll”, initGTMOnEvent);
    document.addEventListener(“mousemove”, initGTMOnEvent);
    document.addEventListener(“touchstart”, initGTMOnEvent);

    Or do you also have to delete some other lines as well?

    Thanks in advance, I’m completely new to this stuff.

    1. Yes, you can simply remove the last 3 lines of code and it will then trigger on the time delay. However, it’s recommended to leave the event listeners since it might otherwise skew your data when users leave before the 2s meaning you get a better bounce rate in analytics, but are missing important data.

  2. Hello friend. I hope you can help me. I added your code , but now it shows in the front end instead of the header. Is there some solution?

    Thanks in advance

    1. Hi Joseph,

      as mentioned in the article you need to add the code to your header.php or enqueue the JS file in your functions.php file so the JavaScript is loaded correctly.

Leave a Reply

Your email address will not be published.