Google lance son tag manager – signe de maturité du marché

Google vient de profiter du premier salon eMetrics de Boston (octobre 2012) pour lancer son outil de tag management.

Cette solution arrive sur un marché déjà bien occupé par d'autres éditeurs (Satellite, EnsightenSuperTag, Tealium, ou en France TagCommander) ainsi que des leaders des web analytics tels qu'Adobe ou IBM.

Au moment où tout le monde se rue sur le lancement d'un produit par Google, je vous propose avec ce billet de prendre un peu de recul. En effet, comme à chaque fois que Google s'intéresse à une nouvelle technologie, cela renforce la légitimité de la discipline avec des succès massifs tels qu'Adwords ou Analytics - même si ca peut tourner au désastre comme Wave ou finir par être dépassé par le marché en place comme pour Website Optimizer.

Alors c'est quoi le tag management et en quoi ca vous concerne? En quoi cette solution de Google impacte votre tracking et vos web analytics?

La problématique éternelle: le marquage

Nous sommes en 2012 et la mesure de la performance marketing de nos sites Web est toujours soumise par le marquage de chacune des pages et de ses éléments avec du Javascript. C'est vrai pour la publicité, pour le retargeting, pour l'analytics, j'en passe et des meilleures.

En fait, on se retrouve dans la même situation qu'il y a 10-12 ans à l'époque des premiers tags Javascript:

  1. on définit les besoins de mesure
  2. on définit des variables métiers contenant l'information nécessaire
  3. on établit un plan de marquage sur base de ces variables
  4. on implémente/déploie
  5. on vérifie la présence et la justesse des tags (avec Hub'Scan ;-))

Evidemment, si votre besoin de mesure se limite à la pose du marqueur de base pour chaque outil, pas ou peu de problème. Quoique.

Sinon, jusque là tout va bien, n'est-ce pas? C'est là que ca se complique.

Le Tag Management, c'est quoi au juste?

Le tag management c'est une méthodologie qui consiste en une encapsulation de plusieurs solutions de tracking/marketing en simplifiant au maximum le nombre de bouts de code à placer dans une page donnée (et donc dans un site). On parle de tag container pour désigner ce marqueur d'encapsulation et de tag management pour l'ensemble des règles de déclenchement et d'activation des différents marqueurs encapsulés.

La promesse du tag management est la suivante: on place un seul et même bout de code Javascript dans toutes les pages d'un site et ce tag unique va s'occuper de générer et déclencher vos autres tags marketing.

Le tag est sensé s'auto-situer sur votre site en fonction de paramètres tels que l'URL de la page en cours ou son contenu HTML. Idéalement, le tag s'appuie sur ce qu'on appelle une "couche de données" ou data layer, qui contient les données métier qui seront réinjectées dans le tag analytics. Une interface d'administration permet aussi de créer des règles de génération du tag à la volée en fonction du contexte et/ou de la data layer.

Exemple:
var variable1 = "Fiche Produit"; // Type de page
var variable2 = "123456789"; // Code produit
var variable3 = "Canapé 4 places"; // Libellé produit
var variable4 = "Michu1234"; // Code client

Et toutes ces valeurs seront réutilisables par le tag container qui saura y piocher pour alimenter le marqueur analytics désiré.

Vous aurez compris que le tag management vise à affranchir chez l'annonceur les équipes marketing des contraintes DSI propres au marquage:

  • on pose un seul tag générique sur toutes les pages d'un site (footer PHP ou autre inclusion serveur)
  • une interface simple à utiliser permet de créer des règles en toute indépendance avec la technique
  • un seul tag container peut déployer plusieurs types de contenus et outils marketing sans repasser par une expression de besoin et/ou une étude de faisabilité.

En France, AT Internet a mis en place le Soft Tagging, une méthode de marquage a posteriori qui fonctionne de manière similaire, mais qui ne permet pas toutefois de s'affranchir complètement de cette data layer. Il s'agit davantage d'un "filet de sauvetage" pour un marquage qui n'a pas pu être réalisé complètement mais ca a le mérite d'exister.

Super, pourquoi tout le monde ne s'en sert pas alors?

On parle maintenant des systèmes de tag management comme la prochaine panacée pour les problèmes de marquage. Le tag management blanchit vos dents pendant votre sommeil, remplit votre déclaration d'impôts et fait revenir votre femme en 48h chrono plus vite que... Vous avez compris, on prête beaucoup de mérites au Tag Management mais il est bon de démystifier plusieurs idées reçues.

J'adore le tag management et je trouve que c'est une technologie formidable. J'entretiens de très bonnes relations avec la plupart des acteurs de ce marché et ils s'accordent à dire que s'ils font le même métier, ils offrent chacun une spécificité bien... spécifique 😉

En revanche, aucune de ces solutions ne couvre complètement les besoins de mesure ou le périmètre exhaustif d'un site web.

L'illusion du tag management est de penser que la récupération de données métier dans l'outil de web analytics va se faire de façon propre par rapport à des règles.

Par exemple, un outil de tag management ne va pas miraculeusement générer les bonnes valeurs métiers web analytics sur une fiche produit qui liste entre autres le numéro de produit, la catégorie, le type de promotion appliqué au produit, la couleur, la taille, etc. Pour ça, l'outil de tag management ne peut pas non plus se baser sur des règles ou un tableau associatif géant. Les contraintes de performance seraient quasiment insurmontables puisque c'est le plateforme de tag management qui supporterait la création du tag container final et ajouterait une couche de latence supplémentaire lors du rendu de la page dans le navigateur de l'internaute. Imaginez un scénario où un système de tag management doive requêter une base de données de produits comportant des dizaines de milliers de références pour en retirer les informations métier nécessaires à la partie analytics (entre autres). Même avec un système de cache, ce n'est pas viable actuellement.

Alors vous me direz:

"oui mais aujourd'hui en 2012 on a des débits réseau suffisants".

Dans l'absolu oui, mais on flirte avec la folie au niveau architecture. 🙂

Vu qu'un tag container peut générer tout et n'importe quoi (HTML, Flash, Javascript, CSS et consorts), il ne saurait se soustraire au travail de génération de contenu que devrait faire le moteur applicatif du site. Ou alors, les systèmes de tag management deviendraient de pures plateformes de génération dynamique de contenu et on change de modèle économique :-).

Vous l'aurez deviné, la solution passe par la construction dans le code de la page de cette fameuse data layer, ce qui veut dire qu'on retombe dans les mêmes travers d'implémentation des données métier que dans une implémentation classique sans tag management - on ne fait que décaler le problème! On retrouve l'allégorie de la grue qui sert à construire la grue qui sert à... vous aurez compris 😉

Pour autant, le gros avantage de la data layer est de pouvoir servir du contenu métier à différents tags au sein d'un même tag container; par exemple: fournir un numéro de produit à un marqueur de conversion eCommerce et à un tag d'affiliation.

Webtrends avait compris l'importance de s'appuyer sur une data layer, notamment en permettant de récupérer automatiquement de l'information métier dans les balises META d'une page HTML.

Et Google dans tout çà?

Google a compris que de nombreux annonceurs qui se servent de leurs services marketing (Adwords, Adsense, Analytics, DoubleClick, Google+, etc) multiplient les implémentations pour chaque outil différent, avec un bout de code différent pour chaque solution ainsi qu'un ordonnancement particulier par rapport aux autres modules. Si en plus on rajoute des outils de retargeting, de bannières internes, etc, et qu'on prend en compte chaque page individuelle d'un site web et ses spécificités, on multiplie les problèmes liés à l'implémentation.

Mais parlons de GTM (le doux nom donné à Google Tag Manager).

En l'état, GTM est un outil somme toute basique mais qui permet d'intégrer dans un même tag container:

  • Google Analytics
  • Adwords: tag de conversion et remarketing
  • Doubleclick Floodlight: tag compteur et conversion

GTM permet également l'inclusion d'un appel de pixel classique, avec un paramètre "cache buster" pour l'unicité de chaque appel.

Mais GTM permet surtout l'inclusion de code HTML personnalisé et l'utilisation de "macros" qui vont directement faire appel à divers éléments d'une page et donc... notre fameuse data layer! 🙂

Concentrons-nous sur Google Analytics pour l'instant. Commençons par créer un container en le nommant et en lui donnant un périmètre en terme de nom de domaine.

Création de tag container dans Google Tag Manager

On récupère le code à insérer dans chaque page de son site qui contiendra le container:

<!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-LC2S"height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><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='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-LC2S');</script><!-- End Google Tag Manager -->

Voilà, c'est tout. A noter que le seul paramètre qui change est le 'id' de votre container.

Créons maintenant un tag pour Google Analytics en allant dans Tags > Overview > New Tag..., on choisit GA et on nomme le tag. On renseigne ensuite son identifiant de profil (UA-XXXX-Y).

Création d'un tag pour Google Analytics

On va choisir si on veut traquer une page vue ou un événement (si événement, le dialogue change pour choisir une catégorie, une action, un libellé, etc.). Pas de support des variables personnalisées ou de l'eCommerce pour l'instant à moins d'utiliser du code HTML custom!

On enregistre le tag et il sera ajouté au container. Il faut maintenant déclarer le cas échéant des règles pour le déclenchement de votre tag GA, puisqu'un même container peut déclencher plusieurs tags de façon asynchrone et déconnectée. Par exemple, déclencher GA sur toutes les pages et uniquement le tag de conversion Adwords sur la page de conversion.

Amusez vous avec le moteur de règle, c'est assez sympa 🙂

Ensuite, on va attaquer le problème de la data layer: si vous déclarez des variables Javascript comme dans l'exemple ci-dessus, vous pouvez les référencer dans une macro.

Exemple: je déclare dans mon HTML une variable Javascript appelée dl_valeur et qui contient la valeur "Succès!"


<head>
<title>Test de Google Tag Manager</title>
<!-- DATA LAYER -->
<script>
var dl_valeur = "Succès";
</script>
</head>

Je vais donc créer une macro appelée dl-valeur (il n'aime pas les underscores) qui va pointer vers la variable dl_valeur dans ma page et que je pourrai appeler dans mes tags custom sous la forme {{dl-valeur}}.

Typiquement, puisque que GTM ne gère pas (en l'état) les variables personnalisées dans Google Analytics, je vous propose un exemple de code custom. Je crée d'abord un tag Custom HTML:

et qui contient le code suivant:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(
['_setAccount', 'UA-7634164-5'],
['_setCustomVar', 1,'Page type', 'Demo GTM',3],
['_setCustomVar', 2,'Valeur', '{{dl-valeur}}',3,
['_trackPageview','/gtm_macros.html'] );
(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();</script>

Vous aurez reconnu un appel à 2 variables personnalisées dont une dynamique s'appuyant sur ma macro dl-valeur ainsi qu'un appel à une page virtuelle.

Une fois satisfait, je sauvegarde et je retourne dans le propriétés de mon container pour en créer une version et le publier. N'oubliez pas cette étape!

Vous pouvez maintenant consulter les pages sujettes à votre container et vous observerez le déclenchement de vos tags. Utilisez Hub'Scan ou un outil de debug.

Exemple de requête envoyée par l'exemple avancé:

Appel de Google Analytics avec succès avec GTM

On voit bien dans la capture ci-dessus que ma variable dl_valeur a été passée avec Succès!" 😉

Retrouvez l'exemple complet sur http://juliencoquet.com/tests/gtm.html

Pour résumer:

  • Créez un container
  • Créez un ou plusieurs tags
  • Créez des règles de déclenchement
  • Créez des macros qui s'appuieront sur votre data layer!
  • Utilisez le mode Preview et Debug pour tester!

Google n'a rien inventé car toutes les autres solutions de tag management fonctionnent de la même manière, ou presque. En revanche, l'intégration avec les autres services Google est très pratique! Le support Google Analytics reste (pour l'instant) basique et les plus sérieux se rabattront sur le code HTML custom.

L'interface de Google Tag Manager reste pratique, facile d'accès et d'utilisation et tout un chacun peut trouver de quoi bien s'amuser avec, moi le premier 😉

Et maintenant?

Et maintenant, suivant vos besoins de suivi de votre performance, vous allez évaluer si votre plan de marquage peut être supporté au moins partiellement par une solution de tag management. Dites vous qu'une telle solution est utile et qu'elle vous servira à faciliter la mise en place d'une solution de web analytics. Cependant, elle ne saurait vous affranchir d'un réel travail de structuration de vos données métier et de la vérification des données remontées par les tags containers grâce à des outils tels qu'Hub'Scan - qui travaille de manière transparente avec un tag manager alors que ses concurrents se bornent à regarder le code HTML des pages 😉

N'hésitez pas à nous contacter pour toute questions sur le tag management et Hub'Scan!

10 réponses

  1. Merci beaucoup Julien pour ce tuto. Je bookmarke précieusement car je crois que ça va bientôt me servir 🙂

  2. […] UPDATE : L’excellent article de Julien Coquet qui est bien le seul a prendre du recul sur le sujet : http://www.hub-sales.fr/blog/google-lance-son-tag-manager-signe-de-maturite/ […]

  3. Salut Julien,
    Intéressant, j’ajouterais dans les problématiques non (peu) traitées par les TM, les appels synchrones haut de page pour les outils de testing…. 🙂
    Rémi

    • Julien Coquet

      Salut Rémi, tu as tout à fait raison concernant le testing.
      C’est davantage vrai pour une solution de test A/B (ou on change de page) que pour du MVT où on change des éléments dans la même page.
      Question d’éxécution 🙁

  4. […] RT @ekomerco: Alors c’est quoi le tag management ? grâce à @JulienCoquet vous allez le savoir ! …: via @axenetwit // SEO, Analytics, toussa […]

  5. Max

    Article très intéressant et tutoriel fort utile.
    Entre GTM et un autre éditeur, que suggeriez-vous ? Quelles indicateurs prendre en compte pour choisir l’un ou l’autre ?

    Merci

    • Julien Coquet

      Bonjour Maxime,

      comme je l’expliquais, les TMS sont légion – même plus nombreux que les solutions de web analytics 😉
      En revanche, le choix se portera sur l’une ou l’autre solution de TMS pour des raisons plus particulières:
      – contrat en droit français avec TagCommander
      – gestion de campagnes
      – gestion native de solutions d’analytics
      – gestion native de solutions de marketing / retargeting

      N’hésitez pas à me contacter, nous pouvons vous accompagner sur le choix d’un TMS

      • Max

        Merci pour votre réactivité.

        Je n’hésiterais pas à vous contacter pour en discuter.

        Cordialement

  6. Hasnene

    Bonjour Julien,
    Tout d’abord merci pour ce tuto très utile sur GTM.
    Cependant, j’ai quelques interrogations sur les Data Layer :
    – si je comprends bien, les data layer ne peuvent être utilisés que pour les CustomVar et les events?
    – Pour les events, doit-on configurer le compte dans GTM ou le fait de rajouter des dataLayer.push sur des event JS dans le code suffisent ?

    En vous remerciant

    • Julien Coquet

      Bonjour Hasnene,

      une data layer est utilisée pour stocker toute donnée utile au marquage, dont les custom vars et les events – mais pas que 😉

      Pour les events, tout dépend de l’événement; on peut par exemple rajouter via GTM un ‘listener’ jQuery sur une page donnée par exemple: bouton ajout au panier, etc.

  7. Bon j’ai enfin pris le temps de lire ton article dans le détail.
    Ca a vraiment l’air super puissant mais comme souvent il faut définir en amont les données à récolter histoire d’implémenter ça correctement.
    J’imagine que GTM ne remplace pas Hubscan en vérifiant si le tag est bien présent sur les pages ?

    • Julien Coquet

      Bonjour Benoit 🙂

      Oui tu auras bien compris que le tag management n’exclut pas une certaine partie de marquage incompressible, ne serait-ce que pour déclarer les valeurs à capturer.

      Et évidemment, GTM (ou tout autre tag manager) ne saurait remplacer Hub’Scan qui est un produit complémentaire (indispensable même) d’assurance qualité: même si le tag manager facilite la présence du tag, rien ne garantit son éxécution ou sa qualité.

  8. […] avions déjà parlé dans un précédent billet du tag management, notamment avec l’arrivée sur le marché de Google Tag Manager. Si jusqu’à présent […]

Ajouter un commentaire