Comment charger plusieurs ID de conteneur Google Tag Manager

Autant que Google vante vitesse de la page En tant que métrique de performance critique fou déterminer l’expérience utilisateur et son impact sur classementc’est quelque peu ironique, étant donné que leurs propriétés sont notoirement lentes.

Script typique de Google Tag Manager

La mise en œuvre typique de Google Tag Manager (GTM) nécessite de charger deux scripts: un dans la tête et un à la fin du corps. Exemple:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l="+l:"';j.async=true;j.src="https://www.googletagmanager.com/gtm.js?id="+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Cependant, certaines entreprises doivent en charger plus d’un GTM conteneur et faites l’erreur d’ajouter simplement les balises de script supplémentaires. Cette méthode est efficace mais nécessite supplémentaire Http exigencesTS, qui peut avoir un impact négatif sur les performances globales du site. La méthode appropriée consiste à charger un seul script, puis à transmettre plusieurs ID de conteneur à l’intérieur.

Comment implémenter plusieurs conteneurs Google Tag Manager

Bien que Google recommande d’utiliser un seul conteneur GTM par site pour éviter la complexité et les conflits, en particulier lors de la gestion du partage dataLayer—Les organisations utilisent plusieurs conteneurs pour:

• Des scripts tiers séparés gérés par des partenaires ou des agences
• Maintenir le suivi hérité pendant la migration
• Environnements de partition (par exemple, les étiquettes de marketing des entreprises vs.

Une approche commune mais inefficace consiste à coller plusieurs extraits GTM complets (script + iframe) dans la page pour chaque conteneur. Bien que cela fonctionne fonctionnellement, il introduit plusieurs demandes HTTP, l’exécution redondante du code de base de GTM et les conditions de course potentielles dans le tir de tag. Cela présente de nombreux inconvénients:

• Augmente le poids et le temps de chargement de la page
• Ajoute plusieurs appels à la bibliothèque GTM
• Risques d’exécutions de balises contradictoires via partage dataLayer

Il existe deux options pour charger plusieurs ID de conteneur GTM:

Option 1: Extraits multiples (avec prudence)

S’il est absolument nécessaire, vous pouvez charger plusieurs conteneurs GTM à l’aide d’extraits séparés:

<!-- GTM Container 1 -->
<script>/* Standard GTM code for GTM-XXXXXX */</script>
<noscript><iframe src="https://feed.martech.zone/link/8998/16356062/...GTM-XXXXXX..."></iframe></noscript>

<!-- GTM Container 2 -->
<script>/* Standard GTM code for GTM-YYYYYY */</script>
<noscript><iframe src="...GTM-YYYYYY..."></iframe></noscript>

Bien que cela soit simple, il entraîne des coûts de performance. Utiliser uniquement lorsque des équipes séparées gérent des conteneurs ou répondent aux besoins commerciaux distincts.

Option 2: conteneurs imbriqués via des balises HTML personnalisées

Une méthode plus rationalisée implique le chargement seulement Un conteneur principal sur la page et en utilisant un Tag HTML personnalisée Dans ce conteneur pour insérer des conteneurs de gestionnaire Google Tag (GTM) secondaire dynamiquement. Vous pouvez y parvenir avec les étapes suivantes:

1. Conteneur principal:
   • Implémentez l’extrait GTM standard pour votre conteneur principal.
   • À l’intérieur de l’interface utilisateur de Tag Manager de ce conteneur, créez un Tag HTML personnalisée.
   • Collez l’extrait GTM complet pour le ou les conteneurs secondaires dans le HTML personnalisé.
2. Définir soigneusement les déclencheurs
   • Pour minimiser l’impact des performances et limite les interférences croisées, définissez un déclencheur de cette balise afin qu’il ne se fasse que tire si nécessaire – par exemple:
     • Matchs de chemin de page /partner/
     • Le référent contient campaign-abc
     • Événement personnalisé = loadSecondaryGTM
3. Gérer les conflits Datalayer
   • Si les deux conteneurs écrivent à la même dataLayervous risquez d’écraser ou de rater des étiquettes. Vous pouvez isoler les données par:
     • Noms de variables de cadrage
     • En utilisant dataLayer.push() seulement en cas de besoin
     • Surveillance en mode prévisualisation pour les collisions
     • Vous pouvez également modifier le nom de la couche de données (l Dans le script ci-dessus) si vos conteneurs sont entièrement séparés.

Pouvez-vous charger plusieurs conteneurs dans un seul appel Google Tag Manager?

Grâce au lecteur, James Carter, j’ai mis à jour cet article. Il a souligné avec précision que vous ne pouvez pas charger plusieurs conteneurs GTM en combinant leurs ID dans un seul script ou URL IFRAME. GTM ne prend pas en charge une liste d’ID délimitée par des virgules dans son chemin de source JavaScript. Toute tentative de concaténer plusieurs ID en un seul <script> ou <iframe> La source entraînera des demandes non valides ou des conteneurs manquants.

Considérations de performance

Quelle que soit la façon dont vous implémentez plusieurs conteneurs GTM, n’oubliez pas:

• Chaque conteneur charge toujours sa configuration de balise complète.
• Chaque balise à l’intérieur de chaque conteneur peut licencier ses propres scripts ou demandes de réseau.
• Les conteneurs redondants ralentissent le temps d’interactif (TTI) et la plus grande peinture de contenu (LCP).

Meilleures pratiques: Si possible, consolidez toutes les balises dans un seul conteneur et utilisez des autorisations ou des espaces de travail intégrés de GTM pour gérer la complexité organisationnelle.