Les systèmes de Tag Management ont le vent en poupe depuis quelques années. Faciles à installer, ils permettent aux différentes personnes qui travaillent sur un site web ou sur une application de pouvoir injecter rapidement du code et des scripts, par exemple pour un tracking en Webanalytics. En référencement naturel, ces systèmes permettent de faire remonter des informations précieuses au référenceur, tout en modifiant au besoin le code HTML des différentes pages pour les optimiser, et sans passer par un développeur. Dans cet article, nous passons en revue les avantages et les différentes méthodes d’implémentation.

Par Daniel Roch


Principe de Google Tag Manager

Google Tag Manager est une solution de gestion de tags (de scripts pour être exact) sur un site web et/ou une application mobile. Le principe est simple : vous ajoutez un bloc « Tag Manager » dans le code de vos pages. Ensuite, un utilisateur (dûment autorisé, bien sûr) peut rajouter autant de codes qu’il veut dans ce Tag Manager sans jamais toucher directement au code source de son site : il gère tout dans l’interface de son « Tag Manager ».


Fig. 1. Google Tag Manager, une des solutions existantes pour faire du « Tag Management ».

Ceci est très utile pour gérer une partie de son code sans avoir besoin de développeurs. Tout se passe dans l’interface de Google, et surtout, sans modifier directement son site. La plupart des solutions existantes permettent en outre de tester son code (sans que cela n’impacte réellement le vrai site ou la vraie application).

Ce type de solution est également utile quand on veut pouvoir ajouter plusieurs scripts différents sur son site, et selon certaines conditions précises (selon l’URL, selon une action, selon la présence d’un élément dans le contenu, etc.). Par exemple, Google Tag Manager peut injecter dans vos pages :

  • Des codes venant de solutions Analytics (Piwik, Google Analytics, etc.) ;
  • Des codes venant d’outils de tracking (affiliation, suivi des ventes, heatmaps, etc.) ;
  • Des codes pour modifier le contenu HTML de vos pages (modifier le H1, une image, etc.) ;
  • Etc.

Les codes sont injectés dans vos pages de manière transparente, soit sur l’ensemble du site, soit selon les conditions que vous aurez indiquées directement dans l’interface d’administration de Google Tag Manager.


Fig. 2. L’interface de Google Tag Manager.

Google Tag Manager est notamment un concurrent de :

Explications techniques

Toutes les solutions de Tag Management fonctionnent de la même façon. Vous avez ce qu’on appelle un conteneur que vous devez ajouter une fois pour toutes dans l’intégralité de vos pages. C’est d’ailleurs la seule modification technique que vous devrez apporter à votre site pour que cela fonctionne. Ce conteneur est vide au début.


Ensuite, dans l’interface d’administration, vous devrez ajouter les codes qui vous intéressent en indiquant les conditions dans lesquelles ils doivent apparaître, par exemple :

  • Sur l’ensemble du site ;
  • Sur une page précise ;
  • Selon un critère précis (profondeur de la page, provenance du visiteur, etc.) ;
  • Lors d’une action (téléchargement, formulaire rempli, etc.) ;
  • Etc.

Lors de la création d’un compte, vous pourrez créer votre premier conteneur. Une fois cette étape réalisée, Google Tag Manager vous demandera donc d’ajouter le premier code du conteneur qui ressemble à ceci :

<!-- 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 -->

Il faudraalors remplacer 'GTM-XXXXXX' par l’identifiant de votre conteneur. Un second code est également demandé (et il sera utilisé dans le cas où le navigateur de l’utilisateur ne peut pas exécuter proprement de JavaScript) :

<!-- 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) -->

Même si les tags ajoutés dans vos pages ne doivent l’être qu’à des endroits précis, sachez que le conteneur doit être présent sur toutes vos pages car c’est l’administration de l’outil qui vous permettra d’indiquer les conditions dans lesquelles chaque élément doit être affiché ou non. Vous aurez alors à votre disposition des déclencheurs (« Triggers ») et des variables :

  • Un trigger est une condition de déclenchement pour chacun de vos tags (par exemple, nous voulons ajouter un code quand la page possède telle balise H1) ;
  • Les variables sont des données que vos scripts pourront utiliser, par exemple récupérer le contenu de la balise H1.

Quelle compatibilité ?

Il y a encore quelques années, ces scripts étaient en phase de démarrage. Désormais, ils sont compatibles avec de nombreuses solutions externes, qu’il s’agisse de solutions Web, de solutions AMP ou de solutions mobiles pour Android ou iOS.
Parmi les solutions externes compatibles, on retrouvera notamment :

  • AB Tasty
  • Adwords
  • DoubleClick
  • Google Analytics
  • HotJar
  • Linkedin
  • Quantcast
  • Etc.

Vous en trouverez la liste détaillée ici : https://support.google.com/tagmanager/answer/6106924

Exemple d'integration

Prenons un exemple simple. Une fois votre compte et votre premier conteneur créé (et ajouté à votre site), nous allons simplement ajouter Google Analytics. Pour cela, cliquez sur « Add A New Tag » :


Fig. 3. On commence l’ajout d’un script.

Vous pouvez ensuite choisir un « Tag Type », soit avec des scripts par défauts (Adwords, Analytics, AB Tasty), ou bien avec un script sur mesure.


Fig. 4. Vous avez un grand choix de scripts.

Pour les scripts prédéfinis, vous pourrez comme sur la figure 4, avoir accès ensuite au paramétrage spécifique du script ajouté, en l’occurrence ici l’ID Analytics à insérer. En dessous, vous pourrez alors définir le Trigger, c’est-à-dire le déclencheur pour le script associé, par exemple lorsqu’une page est consultée.
Pour plus de détails pour démarrer avec cet outil, nous vous conseillons cet article officiel : https://developers.google.com/tag-manager/quickstart

Quels sont les atouts de cette solution ?

Le premier avantage de Google Tag Manager est celui déjà cité auparavant : vous n’aurez besoin de votre développeur qu’au démarrage pour insérer le conteneur de Google Tag Manager. En fonction de votre CMS, vous pourriez d’ailleurs n’avoir besoin de personne puisqu’il existe en plus des extensions simples à installer pour gérer cet aspect, comme ici avec le CMS WordPress : https://fr.wordpress.org/plugins/google-tag-manager/

Ensuite, vous avez une liberté totale de modification de vos tags dans l’interface de Google.

De plus, il est possible d’ajouter son propre code Javascript, vous permettant ainsi de modifier ou de corriger votre site sans passer par le développeur. Par exemple, un peu de code Javascript peut vous permettre d’ajouter du contenu HTML dans vos pages, même si à la base votre CMS ou Framework ne le permet pas (nous en parlerons un peu plus loin) ou si cela est trop complexe, coûteux ou long à réaliser.

Peut-on les utiliser en SEO ?

A la base, les solutions de Tag Management ne sont pas forcément destinées au référencement naturel. Elles avaient surtout été pensées pour pouvoir rajouter facilement des tags supplémentaires pour les webanalytics.

Les risques de l’utilisation d’un système de Tag Management

Avant toute chose, sachez qu’il existe plusieurs risques à l’utilisation d’un tel système en SEO, et qu’il est donc toujours préférable au début de tester cette solution sur un petit site sur lequel une erreur n’aura pas de gros impacts sur vos visites, vos ventes et/ou votre visibilité.

Les dépendances

Le premier risque est simple à comprendre (même si peu probable) : vous allez dépendre d’un service externe pour gérer et injecter vos tags. Si jamais les serveurs de Google ne répondent plus, pour une raison ou une autre, aucun code ne sera ajouté à vos pages, vous faisant perdre des données et éventuellement certaines optimisations. De manière générale lorsque l’on développe un site ou une application, on essaiera toujours de réduire les appels à des solutions externes.

Les bugs

Second risque : les incompatibilités. La plupart des exemples qui vont suivre utilisent des codes JavaScript, souvent avec le langage jQuery. Il peut malheureusement arriver que des bugs ou incompatibilités apparaissent, provoquant un arrêt du fonctionnement de vos différents codes. C’est notamment le cas si vos codes interfèrent avec un code JavaScript déjà présent dans la page.

Cela ne peut fonctionner que si le reste de votre code est relativement propre. Si, par exemple, vous avez une variable sur le contenu d’un H1, vous prenez le risque d’avoir un thème qui en ajoute 2 ou 3, ce qui peut alors fausser votre variable.

L’interprétation de Google

Dès que l’on parle de JavaScript, il existe toujours un risque en référencement naturel. Nous savons tous que Google exécute de mieux en mieux et de plus en plus souvent de code JavaScript, mais il ne parvient pas toujours à le faire proprement.

Toute optimisation basée sur du JS prend donc un risque simple : la mauvaise compréhension ou la non-interprétation de vos optimisations.
Cependant, de tous les tests réalisés par des référenceurs, cela ne semble pas poser de problème majeur. Par exemple ici, les tests réalisés par Moz sur l’implantation de balises Canoniques semblent être bien pris en compte par GoogleBot :


Fig. 5. Un exemple réussi d’optimisation SEO avec Google Tag Manager.

Source : https://moz.com/blog/seo-changes-using-google-tag-manager

Les données déjà utilisables

Pour optimiser la visibilité de son site grâce au Tag Manager, il faut avant tout décider ce que l’on veut optimiser. Et pour cela, sachez qu’il existe par défaut un grand nombre de variables d’ores et déjà utilisables sur tous les conteneurs de Google Tag Manager. Voici une liste des plus utiles :

  • Pour les pages
    • L’URL
    • Le referrer
    • Le nom de domaine
    • Le chemin relatif de la page
  • Les clics et formulaires (Google Tag Manager traque nativement les clics et les validations de formulaires). On peut alors récupérer :
    • La cible
    • La classe ou l’ID de l’élément ciblé
    • La valeur d’un éventuel href ou action
    • Etc.
  • Les variables du navigateur, notamment l’historique de navigation (pages précédentes, suivantes, etc.).
  • Etc.

Vous en trouverez une liste détaillée ici : https://www.simoahava.com/analytics/variable-guide-google-tag-manager/

Les utilisations SEO de Google Tag Manager

Nous allons maintenant donner quelques exemples de prise en compte de GTM en SEO. Ils ne sont pas exhaustifs car ils dépendent beaucoup de vos besoins, de votre solution technique actuelle et des contraintes qui y sont liées. Par exemple, pour les optimisations HMTL, il est toujours préférable de les faire directement dans le CMS si cela reste possible.

Les prérequis

Pour une grande partie des optimisations SEO qui vont suivre, vous aurez besoin d’avoir un minimum de connaissances en HTML et si possible en Javascript. En effet, elles vont se baser sur différents éléments :

  • Pouvoir cibler un élément précis dans une page (un élément HTML, un élément avec un ID spécifique ou possédant une classe précise) ;
  • Pouvoir ensuite cibler cet élément avec du Javascript.

Le suivi Analytics avancé

Commençons par une optimisation simple : le suivi Analytics poussé. Par défaut, un code Analytics ressemble à ceci :

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments
)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 ga('create', 'UA-CCCCCCCCCC);
ga('send', 'pageview');
</script>

Sauf si vous avez un développeur, vous pourrez difficilement le modifier, par exemple pour y ajouter des lignes supplémentaires (meilleure attribution des liens, déclenchement d’évènements quand l’utilisateur reste plus de X secondes, etc.). Là vous pourriez le faire sans souci. Il pourrait alors ressembler à cela :

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-CCCCCCCCCC);
ga('require', 'displayfeatures');
ga('require', 'linkid', 'linkid.js');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
setTimeout("ga('send', 'event', 'Lecture', '60 seconds')",60000);
</script>

Chez LunaMetrics, ils ont eu par exemple un usage détourné très intéressant en SEO. Etant donné que le Not Provided masque la requête tapée par l’internaute, ils voulaient pouvoir faire remonter le mot clé ciblé par les pages d’arrivées des internautes (en l’occurrence en se basant sur le H1 de la page).

En résumé, ils ont :

  • Paramétré le tag Analytics pour insérer une Custom Dimension qui prend pour valeur leur variable ;
  • Une variable créée sur mesure grâce à une macro pour récupérer les informations souhaitées.

Et le rendu est utile. Ici, voici ce que donnerait le tableau des mots clés SEO dans Analytics (attention, la colonne « Optimized Keywords » n’est pas le mot clé tapé mais bien le mot clé ciblé) :


Fig. 6. Le résultat pour les mots clés.

Et ils obtiennent ensuite le même résultat URL par URL :


Fig. 7. Le rendu dans le menu des Landing Pages.

Pour le détail de la mise en place, suivez leur guide : http://www.lunametrics.com/blog/2013/12/30/seo-reporting-google-tag-manager/

Autre exemple encore, toujours par LunaMetrics, pouvoir classer ses contenus par type, par longueur, par nombre d’image ou encore par date de publication. Là aussi, cela passe par la création de macros pour récupérer les informations nécessaires, et les renvoyer en variables dans le Tag Analytics présent dans Google Tag Manager. Dans la figure 8, on peut ainsi classer ses contenus par longueur, permettant ainsi au référenceur de voir si la longueur influe sur le positionnement ou sur les ventes et prises de contact :


Fig. 8. Analytics peut récupérer le nombre de mots des contenus.

Le tutoriel est présent ici : http://www.lunametrics.com/blog/2014/01/24/classify-blog-posts-analytics-content-groupings/

Modifier, ajouter et supprimer du code HTML

Outre la partie WebAnalytics, on peut aussi utiliser Google Tag Manager dans une optique de modification directe du contenu HTML. Imaginons par exemple que la solution utilisée pour votre site ne vous permette pas de modifier vos balises dans le Header (Title, Meta description, etc.), sachez qu’une solution de Tag Management peut vous permettre de faire cela.

Là encore, le principe est simple :

  • On crée une variable ;
  • On alimente la variable avec la valeur souhaitée ;
  • On injecte dans le code HTML la variable.

La méta robots

Voici un exemple pour ajouter le noindex, nofollow à une page :

<script>
// Nous supprimons toutes balise meta robot déjà existante
jQuery('meta[name="robots"]').remove();
// Nous créons un nouvel élément HTML appelé « meta »
var meta = document.createElement('meta');
// Nous assignons un attribut à cet élément (ici “robots”)
meta.name = 'robots';
// On rajoute la valeur noindex, nofollow
meta.content = 'noindex, nofollow';
// Puis on l’insère dans le Header
jQuery('head').append(meta);
</script>

Attention cependan : avant de valider définitivement votre script, pensez toujours à utiliser les boutons de tests proposés dans l’interface. De même, attention car dans notre exemple, cela ne peut fonctionner qu’à la seule condition d’avoir chargé préalablement le script jQuery.

La méta description

Vous pouvez ensuite faire de même avec la méta description. Ici, avec cette ligne, nous récupérons la valeur actuelle de la méta description. Libre à vous ensuite de la modifier dans votre script pour y rajouter d’autres informations.

var currentdesc = $('meta[name=description]').attr("content");


Les balises Og

Autre exemple, voici un simple code à ajouter dans votre Tag Manager pour ajouter les balises OpenGraph de Facebook (Titre et URL) en se basant tout simplement sur la balise Title et l’URL actuelle :

$("meta[property='og:title']").attr("content", document.title);
$("meta[property='og:url']").attr("content", location.toString());


D’autres exemples ?

Ces quelques exemples sont très loins d’être exhaustifs. Partez de votre besoin pour implanter si nécessaire vos codes via un système de tag management. Cela peut notamment inclure :

  • Le balisage Hreflang
  • Des URL canoniques
  • Des URL vers des pages AMP
  • Etc.

Un des meilleurs exemples : Schema.org et JSON

Un des exemples les plus parlants pour optimiser son SEO via Google Tag manager est l’optimisation du balisage Schema.org.
Prenons l’exemple de l’ajout d’un balisage JSON "Product". Pour faire cela, on peut utiliser un système de Tag management. Pour réussir à l'implémenter, il suffit :

Et voici le rendu de votre code :


Fig. 9. Un exemple de code JSON implémenté grâce à Google Tag Manager.

L’explication plus complète est disponible dans cet article : https://moz.com/blog/seo-changes-using-google-tag-manager

Conclusion

Google Tag Manager et ses solutions concurrentes ont de beaux jours devant elles. Faciles à implémenter, elles permettent ensuite aux utilisateurs d’être libres sur la mise en place de différents scripts sur leur site web et sur leurs applications mobiles.

En SEO, malgré le fait que tout se passe en JavaScript, Google semble plutôt bien interpréter les modifications que vous pourriez mettre en place.
Bien que le système de Trigger et de Variables soit un peu complexe à prendre en main, surtout pour un non-développeur, cela permet d’avoir un réel et puissant outil pour personnaliser son contenu, l’optimiser et pour pouvoir récupérer des données utiles en référencement naturel.

Attention cependant : vous dépendrez alors d’un système externe pour gérer certains aspects de votre site, et il existe toujours un risque que Google ne comprenne pas parfaitement vos différents scripts. Ne l'oubliez jamais...


Daniel Roch
Consultant WordPress, Référencement et Webmarketing chez SeoMix (http://www.seomix.fr)