(MISE À JOUR 3 avril 2017 : Il existe une version plus récente de GTM Tools, veuillez donc ignorer cet article et lire celui-ci à la place.)

Alors, le moment est venu de mettre à jour mes outils GTM. J’ai sorti le premier ensemble d’outils en octobre 2014, et il a rempli ses fonctions juste assez bien. Bien sûr, l’interface utilisateur était moche comme l’enfer, et il y avait des bugs en cours de route, mais pour cloner des conteneurs, des macros et des règles, et pour visualiser des conteneurs, c’était juste assez bon.

J’ai travaillé sur une nouvelle version de l’ensemble d’outils, conçu spécifiquement pour les comptes créés dans la nouvelle interface utilisateur de Google Tag Manager. Il n’y a pas de “compatibilité descendante”, donc cette version de GTM Tools ne fonctionnera, comme je l’ai écrit, qu’avec les comptes et les conteneurs créés dans la nouvelle interface utilisateur.

Cet article est destiné à être le “Guide de l’utilisateur” de l’outil, je vais donc passer directement au sujet juste après cette clause de non-responsabilité :

Je ne suis pas un développeur de produits professionnel et GTM Tools v2.0 n’est pas un produit commercial.

Cet ensemble d’outils est ma propriété intellectuelle personnelle, sans but d’en tirer de l’argent ou d’en faire le meilleur produit possible. Il y a des bogues, le code est assez cauchemardesque à certains endroits et je n’ai pas fait de tests approfondis. C’est un ensemble d’outils que vous pourriez trouver utile ou pas.

J’apprécierais quand même que vous m’envoyiez un e-mail (simo(at)simoahava.com) tous les bogues, erreurs ou blocages que vous rencontrez. N’oubliez pas de vérifier d’abord la partie Problèmes connus de ce guide.

L’outil se trouve dans cette URL :

http://www.gtmtools.com/

1. Connexion et authentification

GTM Tools v2.0 utilise votre compte Google pour l’authentification. Cela signifie que lorsque vous ouvrirez le site Web de l’outil pour la première fois, vous devrez S’identifier avec vos identifiants Google.

Une fois connecté, vous devrez autoriser GTM Tools v2.0 à accéder à Google Tag Manager et à votre profil Google. Plus précisément, voici les étendues d’autorisation auxquelles vous autorisez l’accès :

Si vous refusez d’autoriser l’accès, vous ne pourrez pas utiliser l’ensemble d’outils.

Une fois que vous êtes dans l’interface de l’outil, vous pouvez voir le profil avec lequel vous vous êtes connecté dans le coin supérieur droit de la page. Vous pouvez cliquer sur ce lien et Déconnexion de votre compte Google à tout moment, ou vous pouvez cliquer sur Compte pour accéder aux paramètres de votre compte Google.

2. Page d’accueil

La première page que vous verrez dans les outils est la page d’accueil. Cette page est un espace réservé, et vous devez utiliser la barre de navigation en haut de la page pour vous déplacer sur le site.

La navigation comporte les sélections suivantes dans la page d’accueil :

• Domicile – Vous ramène à la page d’accueil

• Compte GTM – Cela répertorie tous les comptes GTM auxquels vous avez accès avec le compte Google connecté. Notez que cette liste inclut les comptes GTM créés pour l’ancienne interface GTM, mais ceux-ci ne fonctionneront pas dans GTM Tools v2.0, essayez donc d’éviter d’y accéder.

• Bibliothèque – Vous amène à la bibliothèque d’actifs où vous pouvez trouver vos conteneurs stockés

• Chariot – Vous montre combien d’articles vous avez dans votre panier, et en cliquant sur le bouton, vous serez redirigé vers la page du panier

• Votre profil – Cliquez dessus pour afficher un menu déroulant dans lequel vous pouvez choisir d’accéder aux paramètres de votre compte Google et/ou de vous déconnecter de votre compte Google.

3. Page de compte

**REMARQUE !** Pour des raisons de traitement, vous ne pourrez interagir qu’avec une **VERSION PUBLIÉE** d’un conteneur donné. S’il n’y a pas de version publiée, vous ne pourrez effectuer aucune action sur le conteneur. C’est quelque chose que j’ai l’intention de corriger dès que l’API offrira un meilleur accès au projet de conteneur.

Lorsque vous choisissez un compte GTM dans la navigation Comptes, vous serez redirigé vers une page qui répertorie tous les conteneurs du compte GTM sélectionné. Si vous cliquez sur un nom de conteneur, vous serez redirigé vers la page de conteneur correspondante.

Si vous cliquez sur la petite flèche vers le bas à côté d’un nom de conteneur, vous verrez des liens rapides pour les actions de conteneur suivantes :

• Inspecter – Vous amène à la page Inspecter le conteneur, où vous pouvez afficher des informations sur le conteneur et où vous pouvez ajouter/supprimer des actifs du conteneur dans le panier

• Visualiser – Vous amène à la page Visualiser le conteneur, où vous pouvez afficher une visualisation du conteneur

• Cloner – Ouvre une boîte de dialogue modale qui vous permet de cloner ce conteneur

En savoir plus sur ces actions dans les sections suivantes de ce guide.

4. Page Conteneur

La page conteneur est ici plus pour des raisons structurelles que pour apporter une quelconque valeur ajoutée. Vous pouvez vous déplacer jusqu’aux actions individuelles (Inspecter, Visualiser, Cloner), ce que vous pouvez également faire à partir de la page Compte, comme vous venez de l’apprendre.

Les chapitres suivants contiennent des détails sur les différentes actions que vous pouvez entreprendre.

Inspecter le conteneur

Sur la page Inspecter le conteneur, vous pouvez voir une liste de toutes les balises, déclencheurs et variables d’un conteneur. Vous verrez également des informations sur la version actuellement publiée en cliquant sur le panneau Informations sur la version.

Le nombre sur le côté droit d’un titre de panneau vous indique le nombre d’actifs dans chaque catégorie respective.

En développant une catégorie d’actifs, vous verrez une liste de tous les actifs de cette catégorie.

Vous verrez également trois boutons :

• Plus vert + pour ajouter l’actif à votre panier

• Moins rouge – pour supprimer l’actif de votre panier

• oui dans la colonne Liens s’il existe des dépendances (c’est-à-dire des actifs liés) que vous devriez probablement ajouter également à votre panier

Le plus vert sera grisé si l’actif est déjà dans le panier, et le moins rouge sera grisé si l’actif n’est pas encore dans le panier. S’il n’y a pas de dépendances, vous ne verrez qu’un tiret dans la colonne “Liens”.

Ne pas ajouter d’actif au panier si un autre actif portant le même nom a déjà été ajouté. Ceci n’est pas pris en charge par la version actuelle de GTM Tools v2.0, et je n’ai pas encore empêché cela dans le code.

Lorsque vous cliquez sur le oui bouton pour les dépendances, une boîte de dialogue modale s’ouvrira qui répertorie toutes les dépendances de l’actif actuel. Cela signifie que ces dépendances sont directement liées à l’actif lui-même ou à l’un des actifs liés. Il est fortement recommandé d’inclure toutes les dépendances liées lors de l’ajout d’un actif au panier.

Vous pouvez ajouter une dépendance au panier en cliquant sur le Ajouter lien, après quoi vous verrez le texte Ajoutée à côté de la dépendance.

Visualiser le conteneur

La page Visualiser le conteneur vous montre d’abord une brève description de ce que fait l’outil. Une fois que vous cliquez sur le Démarrer la visualisation une boîte de dialogue modale plein écran s’ouvrira et vous pourrez voir une visualisation de tous les actifs du conteneur ainsi que tous les liens entre eux.

Les couleurs des actifs sont :

• Gris – Variables intégrées

• Vert – Mots clés

• Bleu – Variables

• Rouge – Déclencheurs

Si vous passez votre souris sur un actif, tous les liens vers ou depuis cet actif seront mis en surbrillance. La couleur du chemin est rouge si le lien provient de l’actif sélectionné et la couleur du chemin est verte si le lien se dirige vers l’actif sélectionné.

Passer la souris sur l’actif affichera également des informations à son sujet dans la petite boîte qui apparaît au centre de la visualisation.

Cliquer sur un nom d’actif fige les chemins, de sorte qu’il vous est plus facile de naviguer jusqu’à l’autre extrémité du chemin.

En cliquant Sélectionnez les nœuds ermites mettra en évidence tous les actifs qui n’ont aucun lien vers ou depuis d’autres actifs.

Vous pouvez utiliser le champ de recherche pour trouver des actifs. Commencez à taper, et les actifs qui correspondent à ce que vous avez tapé seront mis en surbrillance au fur et à mesure que vous tapez.

Cloner le conteneur

Il existe deux façons de cloner un conteneur dans GTM Tools v2.0. Pour des raisons architecturales, ils sont un peu différents.

La première consiste à passer par la page Compte et la page Conteneur. Donc, soit vous choisissez Cloner le conteneur dans le menu déroulant à côté du nom du conteneur dans la page Compte, soit vous cliquez sur le bouton Cloner sur la page Conteneur elle-même.

Lorsque vous choisissez cette option Cloner, vous pourrez choisir le compte GTM sur lequel ce conteneur sera cloné. Vous pouvez également choisir le même compte GTM que celui à partir duquel vous clonez le conteneur.

Une fois que vous avez choisi le compte et cliqué sur Cloner, le processus commence et le conteneur source avec tous ses actifs est cloné sur le compte cible.

S’il existe déjà un conteneur portant ce nom dans le compte cible, le nom du conteneur sera préfixé par “copie de “ Pendant le processus.

La deuxième façon de cloner un conteneur consiste à utiliser vos conteneurs créés sur mesure. Cela signifie que vous choisissez de cloner soit directement à partir de la page Panier, soit à partir de votre page Bibliothèque de ressources.

Si vous choisissez cette option, il sera possible de fusionner le conteneur stocké avec un conteneur existant, ou vous pouvez choisir de créer un conteneur entièrement nouveau, si vous le souhaitez.

Si vous choisissez Nouveau conteneur, vous devrez donner un nom au nouveau conteneur. Lorsque vous cliquez sur Cloner, le nouveau conteneur est créé dans le compte cible et tous les actifs sont clonés. S’il existe déjà un conteneur portant ce nom, le nom du nouveau conteneur sera préfixé par “copie de” Pendant le processus.

Si vous choisissez un conteneur existant, le contenu de votre panier ou du conteneur stocké sera fusionné avec les actifs du conteneur cible. Cela signifie que s’il y a un conflit de nom, c’est-à-dire qu’un actif portant le même nom existe déjà dans le conteneur cible, le nom de l’actif sera préfixé par “copie de”et tous les liens vers la ressource dans d’autres ressources clonées seront mis à jour en conséquence.

Renommer les conteneurs et les actifs comme celui-ci rend possible la fusion des conteneurs tout en préservant les liens établis entre les actifs dans le conteneur source.

Si vous choisissez de fusionner les actifs dans un conteneur existant, aucun actif existant dans le conteneur cible n’est modifié de quelque manière que ce soit, vous n’avez donc pas à vous soucier des données ou de la perte d’intégrité.

Une fois que le processus de clonage commence, il n’y a aucun moyen de l’interrompre.

5. Page du panier

Sur la page Panier, vous pouvez voir tous les actifs que vous avez stockés dans votre panier. Vous stockez les actifs dans le panier via la page Inspecter le conteneur. Les actifs sont d’abord répertoriés par nom de compte GTM, puis par nom de conteneur et enfin par type d’actif.

En cliquant sur le Éliminer lien à côté d’un actif supprime l’actif de votre panier.

En cliquant sur le Cloner dans un conteneur ouvre une boîte de dialogue modale qui vous permet de cloner le contenu du panier dans un conteneur existant ou un nouveau conteneur.

En cliquant sur le Enregistrer le panier ouvre une boîte de dialogue modale qui vous permet d’enregistrer le contenu du panier dans votre bibliothèque de ressources. De cette façon, vous pouvez enregistrer vos configurations de conteneur préférées pour les utiliser ultérieurement.

En cliquant sur le Panier vide bouton vide le contenu du panier.

6. Bibliothèque d’actifs

La page Bibliothèque vous montre tous vos conteneurs stockés. Lorsque vous cliquez sur un nom de conteneur, vous verrez combien de balises, de déclencheurs et de variables se trouvent dans le conteneur stocké. Vous pourrez également voir quand le conteneur a été créé, ainsi que la description que vous avez donnée au conteneur lorsque vous l’avez enregistré.

En cliquant sur le Cloner vous permet de cloner ce conteneur dans un conteneur existant ou dans un nouveau conteneur.

En cliquant sur le Visualiser Le bouton vous amène à la page Visualiser le conteneur, où vous pouvez voir une visualisation de tous les actifs stockés dans le conteneur.

En cliquant sur le Effacer ouvre une boîte de dialogue modale qui confirme cette action. Si vous choisissez de supprimer le conteneur, vous verrez un message de réussite sous peu, après quoi la page se rechargera automatiquement.

7. Problèmes connus

Voici quelques-uns des problèmes que je connais existent dans l’ensemble d’outils.

1. Si vous essayez d’accéder à des comptes créés dans l’ancienne version de GTM, vous rencontrerez des problèmes. Malheureusement, il n’y a aucun moyen de les éliminer efficacement. Cela ne posera plus de problème après la migration de tous les comptes vers le nouveau GTM.

2. Vous pouvez ajouter un actif au panier même si un autre actif portant le même nom est déjà dans le panier. Cependant, si vous le faites, vous rencontrerez une erreur lors de la tentative de clonage du conteneur. Je vais empêcher que ce soit le code, mais il n’a pas été intégré à cette version.

3. Actuellement, toutes les actions de conteneur fonctionnent uniquement avec les versions publiées du conteneur. Il s’agit d’une limitation, et j’espère l’améliorer dès que l’API fournira un meilleur support pour accéder au brouillon de conteneur. À tout le moins, j’ai l’intention de vous permettre de choisir la version avec laquelle vous souhaitez interagir.

4. La cause la plus fréquente d’erreurs est liée aux conflits de noms. J’ai essayé de corriger la plupart d’entre eux en ajoutant automatiquement “copie de “ devant le conteneur ou l’actif que vous essayez de cloner, mais j’ai peut-être manqué certains cas d’utilisation.

5. Je mets en cache la plupart des éléments avec lesquels vous travaillez pour réduire le nombre d’appels d’API effectués. Cependant, le cache est purgé pour les conteneurs et les actifs chaque fois que des modifications importantes sont apportées. Néanmoins, il peut y avoir des situations où vous ne voyez pas de changement même si vous venez d’effectuer une opération avec les outils ou avez fait quelque chose dans l’interface GTM. Dans ce cas, je vous suggère d’attendre 15 minutes, puis de vérifier à nouveau, car c’est le délai d’expiration du cache. Je vais ajouter un commutateur pour vider manuellement votre propre cache, mais ce n’est pas encore dans cette version.

8. Dernières versions

17 novembre 2016

• Gestion des erreurs mise à jour pour être plus informative et moins intrusive.

• Migration de l’API Channel vers Firebase Realtime Database. En conséquence, la barre de progression est légèrement plus lente (en y travaillant), mais elle est plus stable.

• Création d’un nouveau conteneur pour le stockage de la bibliothèque car le premier était plein. Le partage se fait automatiquement.

• Refactorisation mineure ici et là, mais la base de code est toujours assez horrible.

10 décembre 2016

• Migration des cookies dans le stockage du panier vers AppEngine Datastore.

9. Résumé

Comme je l’espère précisé dans l’introduction, cet ensemble d’outils est mon propre terrain de jeu. Ce n’est pas une plate-forme entièrement formée, ce n’est pas un produit sponsorisé et il n’y a pas d’équipe d’ingénieurs travaillant dessus 24h/24 et 7j/7. J’espère donc que vous le trouverez utile, et je ferai de mon mieux pour corriger les bugs et les nouvelles fonctionnalités, mais n’attendez pas de moi un support de niveau Premium pour faire les choses correctement.

Utilisez l’ensemble d’outils à vos risques et périls.

Il n’y a aucun risque pour vos actifs existants, car je n’ai aucune fonctionnalité d’écrasement dans l’ensemble d’outils. La seule chose que vous pouvez gâcher est de cloner quelque chose dans quelque chose d’autre, et dans ce cas, seule la chose que vous avez clonée en souffrira. Assez facile à nettoyer ensuite dans votre compte GTM.

J’espère toujours que vous trouverez l’ensemble d’outils utile, et j’apprécierais beaucoup tout commentaire que vous pourriez vouloir adresser à mon équipe de développeurs (c’est-à-dire moi).