Visualiseur de conteneurs pour Google Tag Manager

[UPDATE:] Beaucoup de gens ont eu du mal à accéder à l’outil après la publication de cet article. Cela devrait maintenant être corrigé.

Donc, des trucs IMPRESSIONNANTS. La nouvelle interface utilisateur et l’API de Google Tag Manager viennent de sortir, et je peux enfin commencer à révéler les éléments sur lesquels j’ai travaillé 🙂

Je ne vais pas entrer dans la nouvelle interface utilisateur dans ce post. Je veux juste remercier chaleureusement l’équipe GTM pour avoir travaillé sur l’UX avec un tel dévouement. Le gros problème avec GTM jusqu’à présent a été que les nouveaux venus et les non-développeurs (et pourquoi pas les développeurs aussi) n’obtiennent pas le couler de l’outil. Il n’y a aucune indication de « quoi faire ensuite », ou « ce qui se passe en ce moment ». Voici quelques-unes des choses qui ont été corrigées dans cette version.

Mais l’API. Oh mec, l’API. Je l’aime. Cela me permet de faire des choses tellement cool avec. J’ai un tas d’outils au stade du prototype, y compris :

• Cloneur de conteneurs (copier le(s) conteneur(s) de compte en compte)

• Cloneur de balises (copier la ou les balises d’un conteneur à l’autre)

• Cloneur de macros (copier la ou les macros d’un conteneur à l’autre)

• Cloneur de règle (copier la ou les règles d’un conteneur à l’autre)

• Visualiseur de conteneur (lire la suite ci-dessous)

Je ne suis pas prêt à les rendre publics pour deux raisons : 1) J’utilise toujours le forfait gratuit App Engine, ce qui signifie que les quotas vont exploser si des dizaines de personnes commencent à cloner des ressources GTM en même temps (oui, c’est moi confiant quant à la popularité des outils), et 2) je ne suis pas un développeur visuel, donc les outils ressemblent à de la merde.

(METTRE À JOUR: J’ai cédé et rendu les autres outils publics également. Voir cet article pour plus d’informations.)

Mais il y a un outil que je veux rendre public maintenant, car j’en suis extrêmement fier. Alors on y va.

Visualiseur de conteneur

C’est un petit outil qui vous permet de visualiser tous les liens et relations entre les balises, les macros et les règles d’un conteneur.

Vous pouvez trouver l’outil ici : Container Visualizer (GTM Tools @SimoAhava). Je n’ai pas effectué de tests approfondis sur tous les navigateurs, donc cela peut sembler un peu différent selon le navigateur que vous utilisez.

Voici comment cela fonctionne:

1. Vous devez d’abord authentifier votre identifiant Google pour utiliser l’API

2. Ensuite, choisissez un compte dont vous souhaitez inspecter le conteneur

3. Choisissez ensuite un conteneur dans ce compte

4. Maintenant, vous devriez voir le diagramme avec tous vos nœuds

5. Survolez un nœud pour voir ses connexions

6. Cliquez sur un nœud pour figer son état (cliquez à nouveau n’importe où pour libérer)

7. Cliquez sur “Sélectionner des nœuds ermites” pour sélectionner des nœuds sans liens

8. Commencez à taper pour trouver une balise, une macro ou une règle spécifique

9. Cliquez sur “Plein écran” pour afficher une version plus grande de la visualisation

Je pense que c’est un outil sacrément doux pour voir à quel point votre conteneur est dynamique. Si vous avez le conteneur moyen, vous devriez voir beaucoup de liens vers la macro {{event}} et la macro {{url}}, mais si vous voulez un conteneur sain, vous devriez voir très peu de nœuds ermites ou d’actifs avec juste liens uniques.

Pour la visualisation, j’ai apporté de lourdes modifications à la visualisation Hierarchical Edge Bundling construite avec l’incroyable bibliothèque d3.js.

Du point de vue technologique, ce sont tous des modèles Python, JavaScript et HTML.

Je vais essayer de trouver le courage de publier bientôt les autres applications de ma collection GTM Tools @SimoAhava.

Faites-moi savoir ce que vous pensez de l’idée de visualiser vos actifs de données !