J’ai toujours été fier d’éviter le titre typique de “Guide ultime pour le soin des pigeons”, “Tout ce que vous devez savoir sur le grand changement de voyelle”, “Saviez-vous que vous avez mal fumé du peyotl toute votre vie ? ”. Je suis prêt à faire une exception maintenant en ajoutant un GROS NOMBRE ÉNORME au titre. Vous voyez, la quantité de connaissances que l’on peut accumuler sur tout ce qu’ils font au quotidien est époustouflante. Cela aide si vous écrivez un blog sur le sujet, car la production créative est un excellent moyen d’organiser vos pensées. Il est également utile d’être actif dans le soutien de la communauté, car la résolution de problèmes est un excellent moyen d’accumuler de nouvelles compétences et de perfectionner vos talents existants.

Maintenant, j’ai déjà écrit plus de 50 astuces GTM, donc ce n’est pas comme si c’était une idée nouvelle, même sur ce blog. Mais cette fois, je voulais juste écrire des choses courtes et de la taille d’un octet que j’ai apprises en cours de route, et je veux les partager avec vous.

Comme vous pouvez le lire dans le titre outrageusement appâtant, il devrait y avoir plus de 100 astuces, mais je n’en ai énuméré que 100. C’est parce que je veux que VOUS ajoutiez vos idées à la fin de ce post, et voyons si nous pouvons continuer . Oui, c’est ma tentative honteuse de déléguer la création de contenu à la communauté. Je suis coupable de ça aussi, maintenant.

Contenu de la page

Table des matières

Table des matières

[+show] [–hide]

Extrait de code JavaScript du conteneur

1. Initialise le dataLayer

La partie extrait de code JavaScript du conteneur GTM a une fonction très importante (parmi d’autres). Il initialise le window.dataLayer déployer. Ainsi, si vous n’avez pas initialisé un dataLayer objet vous-même, l’extrait de conteneur le fera pour vous. Cela garantit que dataLayer.push() fonctionne au sein de GTM.

2. Crée le chargeur de script pour la bibliothèque GTM

Peut-être plus important encore, l’extrait de conteneur JavaScript crée un <script> élément, qui charge la bibliothèque de conteneurs Google Tag Manager pour votre ID de conteneur GTM à partir des serveurs de Google.

3. L’extrait de code JavaScript doit être dans mais peut être (presque) n’importe où

Le dernier (et le meilleur) recommandation pour placer l’extrait de code JavaScript est de le mettre dans le <head> du document. Cela aide GTM à se charger le plus tôt possible, ce qui se traduit par une plus grande précision de suivi. Cependant, vous pouvez exécuter l’extrait de code JavaScript à peu près à tout moment pendant le chargement de la page et n’importe où dans le code de votre site où l’exécution de JavaScript est possible. Cependant, plus la bibliothèque se charge tôt, plus votre collecte de données sera précise.

4. Appuie sur la première event: 'gtm.js'

L’extrait de code JavaScript pousse également l’initiale event: 'gtm.js' dans dataLayer. Il s’agit d’un événement GTM important. Il est utilisé par les déclencheurs Toutes les pages et Vue de page. Toutes les variables de couche de données que vous souhaitez utiliser avec ces déclencheurs doivent être ajoutées à dataLayer avant l’exécution de l’extrait de conteneur JavaScript.

5. Plusieurs extraits de conteneur sur une page sont pris en charge

Vous pouvez ajouter plusieurs extraits de conteneur JavaScript sur une page. Ceci est officiellement pris en charge. La mise en garde est qu’ils doivent tous utiliser le même dataLayer Nom.

Extrait de conteneur

6. Le bloc doit être au tout début de

Au moment de la rédaction, le <noscript> bloc doit être ajouté au tout début de <body>. C’est la seule façon dont la vérification de la console de recherche à l’aide de la méthode Google Tag Manager fonctionnera. Naturellement, si vous ne vous souciez pas de vérifier le site à l’aide de la méthode GTM, ni d’utiliser le suivi des visites non JavaScript, vous pouvez laisser le <noscript> bloquer complètement. Ne le placez pas dans <head> car cela entraînerait des problèmes de validation HTML.

7. Uniquement exécuté par les navigateurs avec JavaScript désactivé

Les <noscript> L’extrait de code n’est exécuté que par les navigateurs avec JavaScript désactivé. Si vous souhaitez le tester, vous pouvez désactiver JavaScript à l’aide des outils de développement de votre navigateur (par exemple, Chrome).

8. Charge une page HTML dans un

Le bloc charge un <iframe> élément, qui récupère ses données sous forme de fichier HTML à partir des serveurs de Google Tag Manager. Essentiellement, ce fichier HTML est votre conteneur. Le code HTML contiendra les éléments d’image que vous avez configurés pour se déclencher pour les visiteurs dont le JavaScript est désactivé.

9. Seul le déclencheur Page View fonctionne

Étant donné que le GTM sans JavaScript ne peut pas exécuter JavaScript (d’oh), seul le déclencheur Page View est à votre disposition. Ainsi, il n’y a pas de déclencheurs dynamiques et aucun moyen d’attendre que la page se charge ou quelque chose comme ça. Le déclencheur de vue de page est déclenché lorsque le <iframe> le contenu est récupéré.

10. Utilisez un function() { return true; } Variable JavaScript personnalisée dans le déclencheur

Un moyen très pratique de déclencher des balises uniquement lorsqu’elles sont exécutées dans le <iframe> consiste à créer une variable JavaScript personnalisée avec le contenu suivant :

function() {
  return true;
}

Cette variable ne renverra que true si le navigateur l’exécute, c’est-à-dire exécute JavaScript. En ajoutant {{Variable}} n’est pas égal à vrai en tant que condition de déclencheur déclenche le déclencheur uniquement dans les navigateurs où JavaScript est désactivé.

11. Seule la balise Image personnalisée est utile

Étant donné que le conteneur sans JavaScript ne peut pas exécuter JavaScript, il ne vous reste que la balise d’image personnalisée. En d’autres termes, vous pouvez créer des éléments d’image qui sont ajoutés directement dans le conteneur HTML. Ces éléments d’image seront ensuite rendus par le navigateur. En fait, vous pouvez même effectuer un suivi Google Analytics de base à l’aide d’une balise d’image, car les requêtes GA sont essentiellement des pixels d’image. Consultez ce guide LunaMetric pour vous inspirer.

12. Peut utiliser les paramètres “Data Layer” via les paramètres de requête

Vous pouvez alimenter les valeurs de “Couche de données” dans le conteneur HTML à l’aide des paramètres de requête dans le <iframe> valeur de l’attribut src. Les paramètres de requête doivent être ajoutés sous forme de paires clé-valeur, et les clés que vous ajoutez peuvent ensuite être utilisées dans les variables de la couche de données. Pour plus de détails, consultez le guide Bounteous lié au paragraphe précédent, ou consultez le guide que j’ai écrit.

Les dataLayer la structure

13. Tableau JavaScript global

Les dataLayer structure est un tableau JavaScript global, et peut donc être accessible dans n’importe quel code de site qui peut également accéder à la window chose. C’est une bonne idée de toujours préfixer le dataLayer nom avec window. pour éviter les conflits avec les structures à portée locale qui utilisent le même nom.

14. Vous pouvez utiliser un nom différent de dataLayer

Vous pouvez modifier le nom de cette structure globale dans l’extrait de conteneur JavaScript. N’oubliez pas de toujours utiliser ce nouveau nom lorsque vous ajoutez des messages à dataLayer!

15. Seul le .push() la méthode fonctionne avec GTM

Google Tag Manager ne réagit qu’aux .push() méthode. Vous pouvez .splice(), .slice(), .shift() et .pop() tout ce que vous aimez. GTM n’écoute que .push() commandes.

16. Généralement, seuls les objets simples fonctionnent avec GTM

Le moyen le plus courant de fournir des données à Google Tag Manager consiste à utiliser des objets simples. Chaque objet contient une ou plusieurs paires clé-valeur. Ces paires clé-valeur sont ensuite traduites en variables de couche de données, que vous pouvez créer dans Google Tag Manager pour extraire les valeurs de la couche de données.

var plainObject = {
  someKey: 'someValue',
  someOtherKey: 'someOtherValue'
};
window.dataLayer.push(plainObject);

17. Vous pouvez utiliser n’importe quel type JavaScript comme valeur d’une clé

Tous les types JavaScript sont pris en charge en tant que valeurs lorsque vous poussez votre dataLayer messages. Lorsque vous créez une variable de couche de données dans GTM, elle contient une référence à la valeur de la clé, quel qu’en soit le type.

window.dataLayer.push({
  type_number: 5,
  type_string: 'hello',
  type_object: { someKey: 'someValue' },
  type_array: [1,2,3,4],
  type_function: function() { return 'hello'!; },
  type_boolean: true
});

18. Seulement event la clé peut déclencher des balises

Seul un message avec un event: 'someValue' paire clé-valeur peut déclencher des balises. Tout objet sans 'event' La clé est traitée comme un simple “message” et n’a aucun pouvoir de déclenchement propre.

19. Vous pouvez aussi .push() un tableau de commandes

Il y a un spécial tableau de commandes vous pouvez .push() dans dataLayer si vous souhaitez exécuter des méthodes pour des valeurs déjà présentes dans le modèle de données. Donc, techniquement, ce ne sont pas seulement des objets simples qui dataLayer digère. Il y a plus à ce sujet dans le conseil #26.

20. Ne jamais écraser, toujours .push()

Je déteste généralement distribuer les meilleures pratiques, alors considérez plutôt cela comme une réalité de la vie. N’utilisez jamais, jamais, jamais, jamais cette syntaxe :

var dataLayer = [{...}];

C’est destructeur. Si cette commande est exécutée après l’extrait de conteneur GTM ou après que vous avez déjà établi un dataLayer objet, vous finirez par écraser l’objet existant avec cette structure nouvellement initialisée. Dans le pire des cas (étonnamment courant), vous finirez par casser GTM, puisque vous écrasez également la coutume .push() écouteur ajouté par la bibliothèque de conteneurs.

Préférez plutôt cette syntaxe :

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({...});

21. Le tableau est plafonné à 300

C’est peut-être plus obscur, mais en plus d’ajouter un .push() écouteur, la bibliothèque de conteneurs GTM limite également la longueur du dataLayer structure à 300. Cela signifie que lorsque vous .push() le 301e article dans dataLayerles premier/plus ancien article dans dataLayer est retiré. Comme vous l’apprendrez dans la section suivante, cela n’a aucun impact sur le modèle de données de GTM. Il coiffe juste le dataLayer structure elle-même.

Le modèle de données de GTM

22. Copie les messages en file d’attente via dataLayer.push()

Lorsque vous utilisez la variable de couche de données, Google Tag Manager ne récupère pas la valeur de la dataLayer déployer. Au lieu de cela, il interroge son propre modèle de données interne pour voir si une valeur a été transmise à la clé donnée (ou au nom de la variable). Si une valeur est trouvée, GTM la renvoie. Cela signifie que le modèle de données interne de GTM a accès aux valeur la plus récemment poussée pour une clé donnée.

23. GTM gèle les valeurs des variables lorsqu’un déclencheur se déclenche

Les déclencheurs ne se déclenchent que lorsque la clé 'event' est poussé dans dataLayer. Lorsque cela se produit, GTM “fige” l’état du conteneur, et toutes les balises qui se déclenchent sur ce déclencheur n’auront accès qu’à l’état actuel du modèle de données interne. Ainsi, si vous souhaitez insérer des valeurs dans dataLayer afin qu’elles deviennent disponibles pour une balise qui se déclenche sur le site, ces valeurs doivent être poussées avant ou dans le même objet que le 'event' qui déclenche la balise.

24. Les objets sont fusionnés de manière récursive

La fusion récursive est l’un des concepts les plus complexes à comprendre. Lorsque vous travaillez avec des valeurs primitives (chaînes, nombres, booléens, par exemple), le modèle de données interne de GTM n’a accès qu’à ce qui a été poussé le plus récemment dans une clé dont la valeur est l’un de ces types primitifs. Cependant, lorsque vous travaillez avec des objets structurés et des tableaux, c’est plus compliqué.

Lorsque vous poussez un objet dans dataLayer, GTM parcourt chaque clé de cet objet et n’écrase que celles qui ont des clés partagées et des valeurs primitives (ou dont le type change). Les nouvelles clés sont simplement ajoutées à la valeur de l’objet existant.

Lorsque vous poussez un objet vers une clé qui contient déjà un objet avec les mêmes clés, seules les clés qui ont des valeurs primitives ou un type différent sont écrasées. Tous les autres sont simplement mis à jour.

25. Les tableaux sont fusionnés de manière récursive

En JavaScript, les tableaux sont également des objets structurés, où les clés sont des numéros d’index qui commencent à 0. Ainsi, lorsque vous insérez un tableau dans une clé qui avait déjà un tableau, ces deux tableaux sont fusionnés de manière récursive à partir de l’index 0, et tous les indices qui ne sont pas modifiés restent les mêmes.

26. Vous pouvez exécuter des méthodes JavaScript sur des valeurs de couche de données existantes avec un tableau de commandes

Que se passe-t-il si vous avez déjà un tableau dans une clé, mais qu’au lieu de fusionner ou d’écraser, vous souhaitez y ajouter des valeurs, c’est-à-dire pousser des éléments à la fin du tableau ? Vous pouvez utiliser un spécial tableau de commandes que tu pousses dans dataLayer. Le premier élément du tableau est une chaîne qui contient le nom de la clé et la commande que vous souhaitez exécuter, et tous les autres éléments sont passés en tant qu’arguments à la commande.

27. Version 1 et version 2 de la variable de couche de données

Vous avez probablement remarqué que vous pouvez choisir un version lors de l’utilisation de la variable de couche de données. Il existe des différences très importantes entre les deux.

Version 2 prend en charge les structures profondes avec la notation par points. Si vous souhaitez accéder aux indices de tableau, vous devez également utiliser la notation par points (products.0.name plutôt que products[0].name). Seule la version 2 prend en charge la fusion récursive.

Version 1 ne prend pas en charge la notation par points et ne récupère que la valeur la plus récemment poussée, qu’il s’agisse d’un objet ou non. Ainsi, il n’y a pas de fusion récursive – ce que vous poussez est ce que vous obtenez.

28. google_tag_manager['GTM-XXXX'].dataLayer méthodes

Si vous souhaitez accéder aux valeurs stockées dans le modèle de données de Google Tag Manager depuis l’extérieur de GTM ou sans utiliser de variable de couche de données, vous pouvez utiliser la google_tag_manager interface.

google_tag_manager['GTM-XXXX'].dataLayer.get('keyName') récupère la valeur stockée dans le modèle de données de GTM pour le nom de la variable nom_clé.

google_tag_manager['GTM-XXXX'].dataLayer.set('keyName', 'someValue') définit la valeur de nom_clé pour uneValeur dans le modèle de données de GTM. Cela équivaut à utiliser dataLayer.push({keyName: 'someValue'});

google_tag_manager['GTM-XXXX'].dataLayer.reset() purge le modèle de données de GTM, supprimant toutes les clés stockées.

Mode aperçu

Lorsque vous accédez au mode de prévisualisation de GTM, vous êtes transporté via le domaine www.googletagmanager.com (le même domaine qui dessert la bibliothèque gtm.js), au cours duquel un cookie est écrit dans votre navigateur pour ce domaine.

Lorsque vous visitez ensuite votre site Web, la demande de la bibliothèque gtm.js identifie que vous avez le cookie du mode Aperçu écrit sur www.googletagmanager.com, et la bibliothèque du conteneur d’aperçu est renvoyée à la place. Il s’agit donc essentiellement d’un cookie tiers, même si le cookie n’est pas défini lors de la navigation sur le site lui-même.

30. Affiche l’état des balises, des déclencheurs, des variables et de la couche de données à chaque message de la couche de données

Le mode Aperçu est un excellent moyen de comprendre le fonctionnement de Google Tag Manager. La navigation dans la colonne de gauche est une liste chronologique (la plus ancienne en bas) des messages qui ont été poussés dans dataLayer. Par…