.svg)
👋 This article offers tips for optimizing Google Tag Manager (GTM) to improve web performance. Best practices include using custom templates, asynchronizing GTM scripts, minimizing the use of variables and tags, and establishing a process for adding and removing tags.
Introduction
Google Tag Manager (GTM) makes it easy to add marketing tags to your site. However, excessive use can have a serious impact on your site's speed (Les Core Web Vitals too). This article offers tips for improving performance, cleaning up tags and variables, and maintaining an efficient GTM container. Here are tips for improving performance, cleaning up tags and variables, eliminating unnecessary JavaScript, and maintaining an organized GTM container.
Using tag templates
Tag Manager offers a variety of standard tag templates, such as Google Analytics or Hotjar. Recently, the ability to create custom templates has been added, bringing benefits in terms of ease of use, security, and above all, performance. Unlike custom HTML tags, which require a fresh analysis of GTM scripts, templates are inserted simultaneously with the GTM script, optimizing the process.
💡 Keep the use of custom Javascript variables to a minimum.
Favor dataLayer implementations or ask a developer to provide the server-side variable.
Scripts asynchronization
In the GTM world, script asynchronization is crucial. Synchronous scripts interrupt the loading of other scripts until they are completed, which can be problematic if the script in question is not essential. GTM scripts must run asynchronously, which is the norm for GTM and its templates. Errors can occur in custom HTML tags and variables, so particular care is needed, especially when calling third-party services. For example, when retrieving an IP address, it is recommended to write the request asynchronously and store the address in sessionStorage to avoid repetitive calls.
☝ Asynchronization doesn't mean no impact
Evenif elements aren't directly blocked, asynchronous scripts still require computing resources, which still have an impact on the execution of the site's main files/scripts.
Minimizing the use of Variables and Tags
It's essential to trigger tags only when necessary, rather than activating them on every page and event. Setting tags to trigger on specific pages can reduce the load. In addition, variables are recalculated on each page, which can make the process more cumbersome if they contain complex calculations.
To optimize, store calculations in local or session storage, use conditional statements to limit complex calculations, and consider asking a developer to provide the server-side variable.
💡 S treamline your tags
By making tags viable you can with 1 or 2 tags per partner in general rather than having different tags for your countries, locales, or for each event.
Establish a Beacon Management Process
A documented process for adding and removing tags is essential. Tags accumulate over time and can leave behind analytical debt, such as unused variables or tags. A clear process will help eliminate these superfluous elements, which will therefore not be loaded into the container configuration on every page view.
It is also useful to use tools such as GTM Export Tools to identify and remove obsolete tags and variables.
Pour information les tags codés en dur (dans la balise <head>) ralentissent davantage le site web (comparés à GTM + ces tags).
☝ It's not GTM itself. It's what you put in it
Not allelements consume the same resources. Adding several elements to the container doesn't always slow down the site significantly. Tags and constant variables have less impact, while Custom Js have a much greater impact depending on their computational complexity.
Delay tag activation as long as possible
You're probably already familiar with 3 page view triggers: Page view (gtm.js), DOM Ready (gtm.dom), Window Loaded (gtm.load).
You can also use Pavel's trick tip and add a 4th moment when the tag can be triggered - 1.5 seconds after Window Loaded.
By the way, here is the code used by Pavel:
<script>
(function() {
try {
window.setTimeout(function() {
dataLayer.push({
'event': 'afterLoad'
});
}, 1500);
} catch (err) {
// Gestion des erreurs
}
})();
</script>💡 The later you activate your tags, the less impact it has on page loading. Delay tags that are less important (or require less precision)
To decide which tags can be delayed on a website, it's essential to take a collaborative approach, involving developers, marketers, managers and customers. Each group needs to understand the priorities of the others, and assess the impact of tags on site performance and business objectives.
Caching, minifying and bundling
Development teams use a variety of techniques to optimize page loading speed, which can benefit GTM users. Caching is an effective way of reducing loading times by using files already stored in the browser cache. In addition, minifying and grouping scripts reduces file size and the number of requests to the server, thus improving loading speed.
Server-side tag implementation
With the advent of server-side GTM, it is now possible to offload some of the tag processing to the server, reducing the load on the user's browser.
💡 You can also enrich the hits to your server-side tools
For example, for product impressions, simply pass only the identifiers and use Firestore to enrich the data. You can read our article on this subject: .
Proxifying GTM via a CDN
Finally, to save a few more milliseconds, using a caching proxy to load GTM can also help speed up page loading. If you use a CDN (Content Delivery Network) like Cloudflare, you'll probably be able to configure it.
Conclusion
Effective Google Tag Manager (GTM) optimization is essential for improving web performance and maintaining site efficiency. By following best practices such as using custom templates, asynchronizing GTM scripts and minimizing the use of variables and tags, marketers can reduce the impact on page load speed and optimize the user experience.
In addition, establishing a documented process for tag management, using caching, minification and script grouping techniques, and exploring server-side implementation can also help improve web performance.
In conclusion, by adopting a thoughtful and optimized approach to GTM, marketers can optimize the performance of their sites and deliver a better user experience.
A need, a question?
Write to us at hello@starfox-analytics.com.
Our team will get back to you as soon as possible.
.svg)