GTM – Google Tag Manager : Quel Intérêt ?

Rassurez-vous, je ne vais pas vous proposer de faire des graffitis sur un mur. Nous allons parler ici d’un autre type de tags : ceux proposés par l’incontournable Google via son outil dédié. Cet outil ? Il s’agit de Google Tag Manager (GTM pour les intimes). Dans cet article, vous allez voir pourquoi et comment l’utiliser pour votre propre site web.

GTM - Tout savoir sur Google Tag Manager

Découvrez ce qui se cache derrière l’acronyme GTM

Google Tag Manager (GTM), c’est quoi ?

GTM est l’acronyme de Google Tag Manager. Il s’agit d’un outil d’analyse vous permettant de déployer et d’utiliser des balises sur votre site web (ou votre application mobile). Le tout sans avoir à modifier le code de ce dernier.

Google Tag Manager peut être traduit en français par “Google Gestionnaire de Balises”. Le but de ces balises (aussi appelées tags, pixels ou tracking codes) est de mesurer les performances de votre site. Autrement dit, les tags de GTM sont là pour vous aider à comprendre les données que vous recueillez.

Un point sur la notion de tag (balise ou marqueur en français) : il s’agit d’un élément inséré directement dans le code source d’une page web pour générer une information de suivi sur le serveur d’un outil d’analytics. C’est bon, je n’ai perdu personne ? Alors continuons !

Quel est l'intérêt de mettre en œuvre Google Tag Manager ?

L’approche ROIste du marketing moderne fait qu’il existe aujourd’hui des tas de balises de suivi différentes pour chaque type de plateformes : Facebook, LinkedIn, Twitter, Google Ads, LinkedIn, etc. Si vous voulez évaluer vos performances sur ces plateformes, celles-ci peuvent vous demander d’ajouter un bout de code à votre site.

Le problème : l’ajout massif de tags en tout genre peut ralentir le site web. Or, un site lent est un site qui est voué à mourir à petit feu (car les internautes vont le fuir comme la peste !). Google Tag Manager est une solution directe à ce problème. Depuis un seul outil, vous pouvez (re)prendre le contrôle de tous vos tags, ainsi que de l’ensemble du tracking de données sur votre site web.

Via son système de gestion des tags, l’intérêt de GTM est de vous aider à analyser le comportement des internautes qui se rendent sur votre site. Le tout en ayant la capacité de “manager” et de supprimer les tags superflus (qui peuvent être “lourds” pour votre site). GTM est donc incontournable pour tous les propriétaires ou gestionnaires de sites internet, surtout en e-commerce !  

Quelles datas peuvent être récoltées via Google Tag Manager ?

Avoir conscience de l’importance de tracker les données, c’est bien. Mais savoir de quelles datas on parle, c’est mieux ! Justement, GTM permet de suivre une quantité énorme d’informations collectées.

Grâce aux tags prédéfinis ou à ceux que vous implémentez, vous pouvez notamment tracker les éléments suivants (liste non exhaustive) :

  • Le nombre d’inscription à votre newsletter ;
  • Le nombre de Call-To-Action cliqués ;
  • Les conversions Google Ads ;
  • Les abandons de panier ;
  • L’utilisation de codes de promotion ;
  • Les durées de visionnage de vos vidéos ;
  • Le Coût Par Clic pour chacun de vos produits ;
  • La profondeur du scroll moyen sur chaque page.

Comment créer un compte GTM ?

Comme pour toute solution Google, il faut être utilisateur de la suite Google (c’est-à-dire avoir une adresse gmail) pour ouvrir un compte GTM. Une fois sur l’outil Google Tag Manager, remplissez les champs demandés relatifs à la gestion de la propriété de votre site ou de votre application.

Ces champs définissent le périmètre de réglage et de déclenchement des balises. Vous obtenez ensuite votre tag. C’est-à-dire un code de tracking en JavaScript généré automatiquement. Sans rentrer ici dans les détails de la configuration technique, veillez simplement à intégrer ce code dans votre site (idéalement dans le <header>). Si besoin, n’hésitez pas à vous faire aider par un développeur ou webmaster lors de cette opération. Car elle nécessite d’avoir des bases en JavaScript.

Une fois votre balise encodée sur votre site web, vous pouvez tout gérer depuis l’interface de Google Tag Manager. Là, il vous faut choisir l’outil marketing qui sera l’auteur du tag : Google Analytics, Google Optimize, Hotjar, Criteo… Les outils ne manquent pas.

Enfin, il vous faut configurer le suivi lié à la balise. Par exemple, vous pouvez utiliser une balise Google Analytics qui déclenchera l’enregistrement d’un « événement défini » (le déclencheur) dès lors qu’un utilisateur clique sur un élément choisi dans une liste déroulante (la variable). Ce tag interagira alors avec le code source de la page (sans autre intervention de votre part).

En bref, le fonctionnement de Google Tag Manager peut se résumer par 3 éléments :

  • Les tags : les scripts d’analyse ou de marketing.
  • Les triggers : les déclencheurs qui activent les tags de suivi.
  • Les variables : les éléments qui conditionnent le déclenchement du tag.

Combien coûte GTM ?

Réponse : 0 euro. Et oui, Google Tag Manager est un outil gratuit (comme la majorité des solutions proposées par le géant de Mountain View).

Notez qu’il est également possible de choisir des options payantes, notamment pour utiliser le serveur Google Tag Manager (hébergé dans Google Cloud). Pour rester sur du gratuit, vous pouvez utiliser Google Analytics afin d’interpréter les données de GTM. Justement, parlons-en.

Google Tag Manager ou Google Analytics ?

GTM et Google Analytics ne doivent pas être confondus : ce sont deux outils indépendants de la suite Google. Ils sont toutefois parfaitement complémentaires (et conçus pour fonctionner de pair).

  • D’un côté, vous avez GTM qui récolte des données via les balises de suivi que vous avez déployées.
  • De l’autre, vous avez Google Analytics (GA) qui analyse ces mêmes données et vous les rend accessibles.

Cliquez ici pour en savoir plus sur le fonctionnement de Google Analytics.

Chez CustUp, nous évangélisons depuis plusieurs années déjà sur les enjeux liés à la collecte et à l’exploitation des données. Car la réussite du Marketing Client repose sur la maîtrise de ces données. Pour cela, Google Tag Manager est un bon début. Des solutions comme la Customer Data Platform sont idéales pour ceux qui veulent aller encore plus loin sur le sujet (et prendre une avance considérable sur leurs concurrents).

Partager :
Depuis qu’il a créé l’agence CustUp, Antoine Coubray utilise tous les jours des acronymes propres au digital marketing. Via cette

Depuis qu’il a créé l’agence CustUp, Antoine Coubray utilise tous les jours des acronymes propres au digital marketing. Via cette série d’articles, vous maîtriserez vous aussi ces nombreux acronymes.

[custup_nom_silo]
[custup_form_optinmonster]
[custup_form_optinmonster]
[custup_form_blog_inline_optinmonster]
<script type="text/javascript"> jQuery(document).ready(function( $ ) { var captchaU4d8v = grecaptcha.render( 'captcha-U4d8v', { 'sitekey' : '6LdT1-4gAAAAAO9Enn6scQv9Sg7vEHfEmTzlKqlw', 'theme' : 'light' }); var dj_envoyer_inscription = true; jQuery(document).delegate( '#dj_envoyer_inscription-U4d8v', 'click', function(){ if(dj_envoyer_inscription){ dj_envoyer_inscription = false; var email = jQuery('#dj_form_optinmonster-U4d8v input[name="email"]').val(); var data = new FormData(); data.append( "action", "inscription_mailchimp"); data.append( "email", email); data.append( "recaptcha_response", jQuery("#dj_form_optinmonster-U4d8v .g-recaptcha-response").val()); jQuery("#dj_form_optinmonster-U4d8v .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-U4d8v .panel-primary").css('display', 'block'); jQuery("#dj_form_optinmonster-U4d8v .panel-primary span").html( site.message_030 ); $.ajax({ url: site.ajax_url, type: 'post', dataType: 'JSON', processData: false, contentType: false, cache: false, data: data, success: function(result) { if(result.alerte){ jQuery("#dj_form_optinmonster-U4d8v .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-U4d8v .panel-danger span").html(result.alerte); jQuery("#dj_form_optinmonster-U4d8v .panel-danger").css('display', 'block'); }else if(result.message){ jQuery("#dj_form_optinmonster-U4d8v .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-U4d8v .panel-success span").html(result.message); jQuery("#dj_form_optinmonster-U4d8v .panel-success").css('display', 'block'); } if(result.status){ dataLayer.push({ "event": "gaEvent", "eventCategory": "Blog-Inline", "eventAction": "clic", "eventLabel": "https://www.custup.com/gtm-google-tag-manager-interet/", "eventValue": "", "eventNoninteraction": "true" }); } dj_envoyer_inscription = true; grecaptcha.reset(captchaU4d8v); }, error: function(errorThrown){ dj_envoyer_inscription = true; grecaptcha.reset(captchaU4d8v); } }); } return false; }); }); </script> <div id="dj_form_optinmonster-U4d8v" class="form_inline"> <div class="form-group col-md-12 col-sm-12 col-xs-12 no-padding m-5"> <div class="panel panel-primary m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-success m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-danger m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group pull-left"> <input class="form-control form-inline" type="text" id="dj_email" name="email" placeholder="E-mail" /> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group optin-recaptcha pull-left"> <div id="captcha-U4d8v"></div> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group envoyer text-center pull-left"> <button id="dj_envoyer_inscription-U4d8v" class="dj_envoyer_inscription" type="submit">Je m'abonne !</button> </div> </div>
[le Nom du Silo]
[le Nom du Silo]
[custup_icon]
<img src="https://www.custup.com/wp-content/themes/custup/public/img/icon.png" alt="Merci pour votre visite" class="skip-lazy" width="28" height="27"/>
[custup_form_exit]
<script type="text/javascript"> jQuery(document).ready(function( $ ) { var captchaCV40Y = grecaptcha.render( 'captcha-CV40Y', { 'sitekey' : '6LdT1-4gAAAAAO9Enn6scQv9Sg7vEHfEmTzlKqlw', 'theme' : 'light' }); var dj_envoyer_inscription = true; var email = ""; jQuery(document).delegate( '#emailCV40Y', 'change', function(){ email = jQuery(this).val(); }); jQuery(document).delegate( '#dj_envoyer_inscription-exit-CV40Y', 'click', function(){ if(dj_envoyer_inscription){ dj_envoyer_inscription = false; var data = new FormData(); data.append( "action", "inscription_mailchimp"); data.append( "email", email); data.append( "exit", 1 ); data.append( "recaptcha_response", jQuery("#dj_form_optinmonster-exit-CV40Y .g-recaptcha-response").val()); jQuery("#dj_form_optinmonster-exit-CV40Y .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-exit-CV40Y .panel-primary").css('display', 'block'); jQuery("#dj_form_optinmonster-exit-CV40Y .panel-primary span").html( site.message_030 ); $.ajax({ url: site.ajax_url, type: 'post', dataType: 'JSON', processData: false, contentType: false, cache: false, data: data, success: function(result) { if(result.alerte){ jQuery("#dj_form_optinmonster-exit-CV40Y .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-exit-CV40Y .panel-danger span").html(result.alerte); jQuery("#dj_form_optinmonster-exit-CV40Y .panel-danger").css('display', 'block'); }else if(result.message){ jQuery("#dj_form_optinmonster-exit-CV40Y .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-exit-CV40Y .panel-success span").html(result.message); jQuery("#dj_form_optinmonster-exit-CV40Y .panel-success").css('display', 'block'); } if(result.status){ dataLayer.push({ "event": "gaEvent", "eventCategory": "Exit", "eventAction": "clic", "eventLabel": "https://www.custup.com/gtm-google-tag-manager-interet/", "eventValue": "", "eventNoninteraction": "true" }); } dj_envoyer_inscription = true; grecaptcha.reset(captchaCV40Y); }, error: function(errorThrown){ dj_envoyer_inscription = true; grecaptcha.reset(captchaCV40Y); } }); } return false; }); }); </script> <div id="dj_form_optinmonster-exit-CV40Y" class="form_inline popin-exit"> <div class="form-group col-md-12 col-sm-12 col-xs-12 no-padding m-5"> <div class="panel panel-primary m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-success m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-danger m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group pull-left"> <input class="form-control" type="text" id="emailCV40Y" name="email" placeholder="E-mail" /> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group optin-recaptcha pull-left"> <div id="captcha-CV40Y"></div> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group envoyer text-center pull-left"> <button id="dj_envoyer_inscription-exit-CV40Y" class="dj_envoyer_inscription" type="submit">S'inscrire !</button> </div> </div>
[custup_scroll_nom_silo]
[custup_form_silo_scroll_optinmonster]
<script type="text/javascript"> var email = ""; jQuery(document).ready(function( $ ) { var captchade8tQ = grecaptcha.render( 'captcha-de8tQ', { 'sitekey' : '6LdT1-4gAAAAAO9Enn6scQv9Sg7vEHfEmTzlKqlw', 'theme' : 'light' }); var dj_envoyer_inscription = true; jQuery(document).delegate( '#emailde8tQ', 'change', function(){ email = jQuery(this).val(); }); jQuery(document).delegate( '#dj_envoyer_inscription-de8tQ', 'click', function(e){ if(dj_envoyer_inscription){ dj_envoyer_inscription = false; var data = new FormData(); data.append( "action", "inscription_mailchimp"); data.append( "email", email); data.append( "id_article", 25398); data.append( "recaptcha_response", jQuery("#dj_form_optinmonster-de8tQ .g-recaptcha-response").val()); jQuery("#dj_form_optinmonster-de8tQ .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-de8tQ .panel-primary").css('display', 'block'); jQuery("#dj_form_optinmonster-de8tQ .panel-primary span").html( site.message_030 ); $.ajax({ url: site.ajax_url, type: 'post', dataType: 'JSON', processData: false, contentType: false, cache: false, data: data, success: function(result) { if(result.alerte){ jQuery("#dj_form_optinmonster-de8tQ .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-de8tQ .panel-danger span").html(result.alerte); jQuery("#dj_form_optinmonster-de8tQ .panel-danger").css('display', 'block'); }else if(result.message){ jQuery("#dj_form_optinmonster-de8tQ .panel").css('display', 'none'); jQuery("#dj_form_optinmonster-de8tQ .panel-success span").html(result.message); jQuery("#dj_form_optinmonster-de8tQ .panel-success").css('display', 'block'); } if(result.status){ dataLayer.push({ "event": "gaEvent", "eventCategory": "Silo-XXX-Scroll", "eventAction": "clic", "eventLabel": "https://www.custup.com/gtm-google-tag-manager-interet/", "eventValue": "", "eventNoninteraction": "true" }); } dj_envoyer_inscription = true; grecaptcha.reset(captchade8tQ); }, error: function(errorThrown){ dj_envoyer_inscription = true; grecaptcha.reset(captchade8tQ); } }); } return false; }); }); </script> <div id="dj_form_optinmonster-de8tQ"> <form> <div class="form-group col-md-12 col-sm-12 col-xs-12 no-padding m-5"> <div class="panel panel-primary m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-success m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-danger m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group pull-left"> <input class="form-control" type="text" id="emailde8tQ" name="email" placeholder="E-mail" /> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group optin-recaptcha pull-left"> <div id="captcha-de8tQ"></div> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group envoyer text-center pull-left"> <button id="dj_envoyer_inscription-de8tQ" class="dj_envoyer_inscription" value="xx" type="submit">S'inscrire</button> </div> </form> </div>
[custup_count_abonnes_liste_mailchimp]
4464
[custup_form_horizontal_optinmonster]
<script type="text/javascript"> var email = ""; jQuery(document).ready(function( $ ) { var captcha5hn5R = grecaptcha.render( 'captcha-5hn5R', { 'sitekey' : '6LdT1-4gAAAAAO9Enn6scQv9Sg7vEHfEmTzlKqlw', 'theme' : 'light' }); var dj_envoyer_inscription = true; jQuery(document).delegate( '#email5hn5R', 'change', function(){ email = jQuery(this).val(); }); jQuery(document).delegate( '#dj_envoyer_inscription-5hn5R', 'click', function(){ if(dj_envoyer_inscription){ dj_envoyer_inscription = false; var data = new FormData(); data.append( "action", "inscription_mailchimp"); data.append( "email", email); data.append( "recaptcha_response", jQuery("#dj_form_horizontal_optinmonster-5hn5R .g-recaptcha-response").val()); jQuery("#dj_form_horizontal_optinmonster-5hn5R .panel").css('display', 'none'); jQuery("#dj_form_horizontal_optinmonster-5hn5R .panel-primary").css('display', 'block'); jQuery("#dj_form_horizontal_optinmonster-5hn5R .panel-primary span").html( site.message_030 ); $.ajax({ url: site.ajax_url, type: 'post', dataType: 'JSON', processData: false, contentType: false, cache: false, data: data, success: function(result) { if(result.alerte){ jQuery("#dj_form_horizontal_optinmonster-5hn5R .panel").css('display', 'none'); jQuery("#dj_form_horizontal_optinmonster-5hn5R .panel-danger span").html(result.alerte); jQuery("#dj_form_horizontal_optinmonster-5hn5R .panel-danger").css('display', 'block'); }else if(result.message){ jQuery("#dj_form_horizontal_optinmonster-5hn5R .panel").css('display', 'none'); jQuery("#dj_form_horizontal_optinmonster-5hn5R .panel-success span").html(result.message); jQuery("#dj_form_horizontal_optinmonster-5hn5R .panel-success").css('display', 'block'); } if(result.status){ dataLayer.push({ "event": "gaEvent", "eventCategory": "Blog-Floating-Bar", "eventAction": "clic", "eventLabel": "https://www.custup.com/gtm-google-tag-manager-interet/", "eventValue": "", "eventNoninteraction": "true" }); } dj_envoyer_inscription = true; grecaptcha.reset(captcha5hn5R); }, error: function(errorThrown){ dj_envoyer_inscription = true; grecaptcha.reset(captcha5hn5R); } }); } return false; }); }); </script> <div id="dj_form_horizontal_optinmonster-5hn5R" class="dj_form_horizontal_optinmonster"> <input type="hidden" name="recaptcha_response" value=""> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group dj_email_content pull-left"> <input class="form-control" type="text" id="email5hn5R" name="email" placeholder="E-mail" /> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group text-center dj_email_envoyer pull-left"> <button id="dj_envoyer_inscription-5hn5R" class="dj_envoyer_inscription" type="submit">Valider</button> </div> <div class="col-md-12 col-sm-12 col-xs-12 no-padding form-group optin-recaptcha pull-left"> <div id="captcha-5hn5R"></div> </div> <div class="form-group col-md-12 col-sm-12 col-xs-12 no-padding m-5"> <div class="panel panel-primary m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-success m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> <div class="panel panel-danger m-0" style="display:none;"> <div class="panel-heading"> <span class="m-5"></span> </div> </div> </div> </div>