Cet article propose des astuces pour optimiser Google Tag Manager (GTM) afin d'améliorer les performances web. Les meilleures pratiques incluent l'utilisation de modèles personnalisés, l'asynchronisme des scripts GTM, la minimisation de l'utilisation de variables et balises, et l'établissement d'un processus pour l'ajout et la suppression de balises.
Introduction
Google Tag Manager (GTM) facilite grandement l'ajout de balises marketing sur votre site. Cependant, une utilisation excessive peut fortement impacter la vitesse de votre site (Les Core Web Vitals aussi donc). Cet article propose des astuces pour améliorer la performance, nettoyer les balises et variables, et maintenir un conteneur GTM efficace. Voici des conseils pour améliorer les performances, nettoyer les balises et les variables, éliminer le JavaScript inutile, et maintenir un conteneur GTM organisé.
Utiliser les Template de Balises
Tag Manager propose une variété de template de balises standard, tels que Google Analytics ou Hotjar. Récemment, la possibilité de créer des templates personnalisés a été ajoutée, apportant des avantages en termes de facilité d'utilisation, de sécurité, et surtout, de performance. Contrairement aux balises HTML personnalisées qui nécessitent une nouvelle analyse des scripts GTM, les templates sont insérés simultanément avec le script GTM, optimisant ainsi le processus.
Limitez un maximum l’utilisation des variables Javascript personnalisées. Favorisez les implémentations du dataLayer ou demandez à un développeur de fournir la variable côté serveur.
Asynchronisation des Scripts
Dans le monde du GTM, l'asynchronisation des scripts est cruciale. Les scripts synchrones interrompent le chargement d'autres scripts jusqu'à leur achèvement, ce qui peut être problématique si le script en question n'est pas essentiel. Les scripts GTM doivent fonctionner de manière asynchrone, ce qui est la norme pour GTM et ses templates. Les erreurs peuvent survenir dans les balises HTML personnalisées et les variables, donc une attention particulière est nécessaire, notamment lors de l'appel à des services tiers. Par exemple, lors de la récupération d'une adresse IP, il est recommandé d'écrire la requête de manière asynchrone et de stocker l'adresse dans le sessionStorage pour éviter les appels répétitifs.
Asynchronisation ne veut pas dire pas d’impacts
Même si les éléments ne sont pas directement bloqués, les scripts asynchrones nécessitent toujours des ressources informatiques, ce qui a toujours un impact sur l'exécution des fichiers/scripts principaux du site.
Minimiser l'Utilisation des Variables et Balises
Il est essentiel de déclencher les balises uniquement lorsque cela est nécessaire, plutôt que de les activer sur chaque page et événement. Configurer les balises pour qu'elles se déclenchent sur des pages spécifiques peut réduire la charge. De plus, les variables sont recalculées sur chaque page, ce qui peut alourdir le processus si elles contiennent des calculs complexes.
Pour optimiser, il est conseillé de stocker les calculs dans le local storage ou de session, d'utiliser des instructions conditionnelles pour limiter les calculs complexes, et d'envisager de demander à un développeur de fournir la variable côté serveur.
Rationalisez vos tags (balises). En viabilisant les tags vous pouvez avec 1 ou 2 tags par partenaires en général plutôt que d’avoir des tags différents pour vos pays, locales, ou pour chaque évènement.
Établir un Processus pour la Gestion des Balises
La mise en place d'un processus documenté pour l'ajout et la suppression des balises est primordiale. Les balises s'accumulent avec le temps et peuvent laisser de la dette analytique, comme des variables ou des tags inutilisées. Un processus clair aidera à éliminer ces éléments superflus qui ne seront donc pas chargés dans la configuration du conteneur à chaque page vue.
Il est également utile d'utiliser des outils tels que GTM Export Tools pour identifier et supprimer les balises et variables obsolètes.
Pour information les tags codés en dur (dans la balise <head>) ralentissent davantage le site web (comparés à GTM + ces tags).
Ce n'est pas GTM lui-même. C'est ce que vous y mettez
Tous les éléments ne consomment pas les mêmes ressources. Ajouter plusieurs éléments au conteneur ne ralentit pas toujours le site de manière significative. Les tags et les variables constantes ont un impact moins important, tandis que les Custom Js ont un impact beaucoup plus important en fonction de leur complexité de calcul.
Retarder un maximum le déclenchement des tags
Vous connaissez probablement déjà 3 déclencheurs liés à la vue de page : Page view (gtm.js), DOM Ready (gtm.dom), Window Loaded (gtm.load).
De plus, vous pouvez utiliser l'astuce de Pavel et ajouter un 4e moment où le tag peut être déclenché — 1,5 seconde après le Window Loaded.
D'ailleurs, voici le code utilisé par Pavel :
javascriptjavascriptCopy code <script> (function() { try { window.setTimeout(function(){ dataLayer.push({ 'event' : 'afterLoad' }); }, 1500); } catch (err) {} })(); </script>
Plus vous activez vos tags tardivement, moins cela impacte le chargement des pages. Retardez les tags qui sont moins importants (ou nécessitent moins de précision)
Pour décider quels tags peuvent être retardés sur un site web, il est essentiel d'adopter une approche collaborative, en impliquant développeurs, spécialistes du marketing, gestionnaires et clients. Chaque groupe doit comprendre les priorités des autres et évaluer l'impact des tags sur la performance du site et les objectifs commerciaux.
Caching, minifying et bundling
Les équipes de développement utilisent diverses techniques pour optimiser la vitesse de chargement des pages, qui peuvent être bénéfiques pour les utilisateurs de GTM. La mise en cache est un moyen efficace de réduire le temps de chargement en servant des fichiers déjà stockés dans le cache du navigateur. De plus, la minification et le regroupement des scripts réduisent la taille des fichiers et le nombre de requêtes au serveur, améliorant ainsi la vitesse de chargement.
Implémentation des tags en server-side
Avec l'avènement de GTM côté serveur, il est maintenant possible de décharger une partie du traitement des balises sur le serveur, réduisant la charge sur le navigateur de l'utilisateur.
Vous pouvez aussi enrichir les hits vers vos outils côté serveur.
Par exemple, pour les impressions de produits, il suffit de passer uniquement les identifiants et d'utiliser Firestore pour enrichir les données. Vous pouvez consulter notre article sur ce sujet : .
Proxifier GTM via un CDN
Enfin, pour aller gagner encore quelques millisecondes, l'utilisation d'un proxy de mise en cache pour charger GTM peut également contribuer à accélérer le chargement de la page. Si vous utilisez un CDN (Content Delivery Network) comme Cloudflare vous pourrez probablement le configurer.
Conclusion
La mise en place d'une optimisation efficace de Google Tag Manager (GTM) est essentielle pour améliorer les performances web et maintenir l'efficacité des sites. En suivant les meilleures pratiques telles que l'utilisation de modèles personnalisés, l'asynchronisation des scripts GTM et la minimisation de l'utilisation des variables et balises, les marketeurs peuvent réduire l'impact sur la vitesse de chargement des pages et optimiser l'expérience utilisateur.
De plus, l'établissement d'un processus documenté pour la gestion des balises, l'utilisation de techniques de mise en cache, minification et regroupement des scripts, ainsi que l'exploration de l'implémentation côté serveur peuvent également contribuer à améliorer les performances web.
En conclusion, en adoptant une approche réfléchie et optimisée de GTM, les marketeurs peuvent optimiser les performances de leurs sites et offrir une meilleure expérience utilisateur.
En savoir plus
Auteur
Edouard de Joussineau
Dirigeant de Starfox Analytics. 9 ans dans le CRO & la Web Analyse. Entrepreneur et Product Manager mais également amateur de bon vin, de F1 et d’échecs.
Suivez Starfox Analytics sur Linkedin
Un besoin, une question ? Notre équipe vous répondra au plus vite.
→ Suivez Starfox sur Linkedin
Contactez-nous !
Un besoin, une question ? Écrivez-nous à [email protected]. Notre équipe vous répondra au plus vite.
Prendre rendez-vous →
Autres ressources
Pavel Brecik's blog
If you change couple of triggers in Google Tag Manager used for firing 3rd party retargeting scripts, it's possible to instantly save significant amount of Page Load time.
https://pavelbrecik.cz/the-easiest-cro-you-can-do-is-via-google-tag-manager.html
Google Tag Manager vs Page Speed: Impact & How to Improve
A comprehensive reports with tests on how does Google Tag Manager impact page speed + a bunch of tips on how to improve the performance.
https://www.analyticsmania.com/post/google-tag-manager-impact-on-page-speed-and-how-to-improve/
