Google Tag Manager - Premiers pas

Ce chapitre fournit un aperçu de la façon de démarrer avec Google Tag Manager, d'ajouter une balise et de l'analyser pour en vérifier l'exhaustivité.

Tout au long du processus, nous utiliserons le blog (créé dans le chapitre précédent) pour la démonstration des différentes étapes.

Step 1 - Comme indiqué dans la capture d'écran ci-dessus, cliquez sur le code du conteneur (GTM-XXXXXXX) dans le coin supérieur droit à côté de l'étiquette Modifications de l'espace de travail: 0.

Vous verrez la boîte de dialogue Installer Google Tag Manager.

Maintenant, ici, nous voulons installer le code Google Tag Manager sur notre blog.

Step 2 - Pour obtenir le code GTM dans la figure ci-dessus ajouté sur le blog, accédez à https://Blogger.com et connectez-vous avec vos identifiants.

Un écran comme indiqué ci-dessous vous sera présenté avec le nom de votre article de blog dans la liste.

Step 3 - Dans le panneau de gauche, recherchez l'option: Thème.

Vous verrez l'écran suivant.

Step 4- Cliquez sur Modifier le code HTML pour modifier le code HTML du blog. Un code source HTML pour votre blog sera visible, comme illustré dans la figure suivante.

Ici, nous voulons installer le code Google Tag Manager. Comme indiqué par GTM, nous sommes tenus d'insérer le code aux emplacements suivants -

Aussi haut que possible dans la balise <head>
Dans la balise <body>

Step 5- Localisez la balise <head> dans le code HTML ci-dessus. Revenir àhttps://tagmanager.google.comet copiez le code dans la boîte de dialogue Installer Google Tag Manager à l'étape 1 ci-dessus. Collez le code copié exactement sous l'ouverture de la balise <head>.

Step 6 - De même, recherchez la balise <body> dans le code HTML.

Note- Vous pouvez utiliser la touche de raccourci Ctrl + F pour trouver les balises <head> et <body>. La fonctionnalité de recherche du navigateur vous sera utile pour trouver les balises.

Une fois que vous avez localisé la balise <body>, répétez la procédure pour copier le code associé à la balise <body> à partir de Google Tag Manager.

Pour faciliter la localisation de la balise, la balise <body> commencera généralement par <body expr: class = '"loading" + data: blog.mobileClass'>.

Collez le code requis sous la balise <body>, puis cliquez sur Enregistrer le thème.

Il affichera l'erreur suivante, et il est normal de voir cette erreur.

Step 7 - Pour résoudre ce problème, dans le code Google Tag Manager sous la balise <head>, recherchez la ligne avec -

j = d.createElement(s),dl = l != 'dataLayer'?' &l = '+l:'';j.async = true;j.src =

Remplace le & comme souligné dans la ligne ci-dessus avec &et cliquez sur Enregistrer le thème. L'erreur sera résolue.

Ceci conclut le processus d'ajout du code Google Tag Manager à votre blog.

Introduction à la balise

Comme indiqué simplement sur le site Web d'assistance de Google Tag Manager, une balise est un morceau de code qui envoie des informations à un tiers, tel que Google Analytics.

À partir de là, en ce qui concerne un outil analytique particulier, plusieurs balises peuvent être associées. Les avoir tous sur une seule page est en effet un plus, car le responsable du marketing du produit pourra voir plusieurs métriques associées à la page.

Cependant, il y a un point tout aussi important à noter ici, il ne faut pas exagérer les balises sur un site Web. Cela augmente non seulement la confusion lors de la gestion de la balise, mais rend également difficile la différenciation des données provenant de différentes balises.

Le code suivant, comme nous l'avons vu dans la boîte de dialogue Installer Google Tag Manager, est en fait une balise.

<!-- 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-M8QLQCZ');
</script>
<!-- End Google Tag Manager -->

Emplacement d'un tag

L'emplacement d'une balise peut être n'importe où dans le code source de la page. Il peut être tout en haut comme celui ci-dessus ou il peut rester dans le pied de page transmettant les informations nécessaires.

Ceci conclut une brève introduction à une balise et à la manière dont elle peut être créée.

Déclencheurs

Les déclencheurs détectent réellement le moment où une balise sera déclenchée. Il s'agit d'un ensemble de règles permettant de configurer une balise à déclencher. Par exemple, les déclencheurs peuvent décider qu'une balise particulière «X» sera déclenchée lorsqu'un utilisateur exécute l'action «Y». Plus spécifiquement, un déclencheur peut demander à une balise de se déclencher lorsqu'un bouton particulier dans une forme particulière est cliqué.

Les déclencheurs sont des conditions qui peuvent être attachées à une balise pour fonctionner de la manière souhaitée. Un exemple concret sera, considérons qu'une balise est configurée pour une transaction réussie sur une page de commerce électronique.

La balise indiquera si la transaction a été effectuée avec succès. Pour ce faire, un déclencheur sera créé, qui dira, déclenchez la balise uniquement lorsque la page de confirmation de transaction est affichée à l'utilisateur.

Plus important encore, considérez que vous souhaitez suivre toutes les pages vues d'un blog / site Web. Ainsi, spécifiquement, vous pouvez créer une balise avec Google Analytics, qui sera déclenchée lorsque l'utilisateur accède à n'importe quelle page de votre blog / site Web. Un déclencheur dans ce cas, sera générique, disant déclencher cette balise sur toutes les pages. Le déclencheur sera défini en conséquence.

Le déclencheur peut parfois se compliquer. Par exemple, si quelqu'un clique sur un bouton sur une page spécifique, déclenchez une balise.

Comme le montre la figure suivante, vous pouvez accéder aux déclencheurs en cliquant sur Déclencheurs dans le panneau latéral gauche de l'écran.

Comme il n'y a pas encore de déclencheurs configurés, vous ne verrez aucun résultat sur les déclencheurs.

Variables

Essentiellement, les variables sont des valeurs qui peuvent être modifiées.

Par exemple, considérons un simple clic sur un lien. Lorsqu'un clic est effectué sur un lien, plusieurs variables intégrées sont collectées avec cet événement de clic. Ces variables peuvent éventuellement être utilisées pour enregistrer le lien, qui est redirigé lorsqu'un utilisateur clique sur le bouton de lien particulier.

Dans les détails, vous pouvez également enregistrer la classe div particulière de l'élément sur lequel vous avez cliqué, à l'aide de variables. Ils sont appelés variables, car s'il y a 10 boutons de lien différents sur la page, la redirection à partir de ces boutons de lien va changer, en fonction de l'élément sur lequel on clique.

Vous pouvez accéder aux variables en utilisant le panneau de gauche et en cliquant sur Variables.

Google Tag Manager propose deux types de variables -

Variables intégrées
Variables définies par l'utilisateur

Comme son nom l'indique, vous avez la possibilité d'utiliser les variables existantes proposées par Google Tag Manager ou vous pouvez créer vos propres variables.

Prenons un exemple et voyons comment une balise fonctionne. Nous déboguerons maintenant la balise avec Google Tag Manager.

Débogage d'un tag

Dans la première section de ce chapitre, nous avons pris le temps d'ajouter le code de suivi de Google Tag Manager à notre blog sur Blogger.com.

C'était la première étape pour que Google Tag Manager identifie notre code de suivi. Si vous observez de près, dans le script qui a été inclus dans la balise <head>, il existe un code de suivi Google Tag Manager au format GTM-XXXXXXX.

Désormais, lorsqu'il s'agit de déboguer une balise, c'est assez simple avec l'interface Google Tag Manager. Nous utiliserons la balise Google Analytics de base pour la démonstration. Nous supposons qu'un compte Google Analytics existe déjà.

Créer une balise Google Analytics de base

Dans Google Tag Manager, pour créer une balise, plusieurs étapes sont nécessaires. Pour entrer dans les détails de chacun d'eux, considérons l'écran suivant.

Step 1 - Cliquez sur le bouton AJOUTER UN NOUVEAU TAG.

Un panneau de droite glissera pour démarrer le processus de création d'une nouvelle balise. Cela affichera une balise vierge sans titre que vous pourrez configurer.

Step 2- Donnez un nom à votre tag. Donnons-lui le nom - First Tag.

Step 3 - Une fois terminé, cliquez sur le texte / l'icône - Choisissez un type de balise pour commencer la configuration….

Un autre panneau glissera de la droite, qui affichera les types de balises suivants.

Comme nous l'avons vu dans la définition, il existe différentes balises associées à différents outils d'analyse. Dans cette étape particulière, Google Tag Manager vous demande de spécifier le type exact de balise que vous souhaitez créer.

Vous remarquerez certains types de balises comme suit -

Analyse universelle
Google Analytics classique
Remarketing AdWords
Google Optimize

Note- Universal Analytics est la version améliorée et la plus populaire de Google Analytics. Cependant, il existe de nombreux sites qui utilisent Google Analytics classique.

Pour cet exemple, nous allons continuer à spécifier Universal Analytics.

Step 4- Cliquez sur Universal Analytics pour continuer. La commande reviendra à l'écran précédent et vous devrez sélectionner ce que vous voulez suivre. Voir la capture d'écran suivante pour référence.

Step 5 - Cochez Activer les paramètres de remplacement dans cette balise.

Note- Nous utilisons cette étape afin de se familiariser plus rapidement avec la création de tags. Vous pouvez continuer et créer une variable de paramètres Google Analytics sans cocher également la case ci-dessus.

Step 6- Ouvrez l'interface Google Analytics. Dans Google Analytics, recherchez le boutonADMINsur la première page. Dans la section Propriété, cliquez sur Paramètres de propriété. Vous pourrez voir un écran similaire au suivant.

Step 7- Copiez l'identifiant de suivi. L'ID de suivi aura le format UA-XXXXX-X.

Step 8- Une fois que vous avez copié l'ID de suivi, revenez à l'interface de Google Tag Manager. Comme indiqué précédemment, collez l'ID de suivi dans la zone de texte associée.

Maintenant, nous sommes sur le point de configurer l'élément important de la balise - un déclencheur.

Nous allons demander à Google Tag Manager que la balise soit déclenchée si la page est consultée par l'utilisateur. Pour ce faire, nous devrions avoir le déclencheur configuré à l'aide de la section suivante de l'écran.

Step 9 - Cliquez sur Choisir un déclencheur pour déclencher cette balise…

Une boîte de dialogue glissera de la gauche, vous demandant de sélectionner un déclencheur. Il affichera le déclencheur comme indiqué dans la capture d'écran suivante.

Step 10 - Cliquez sur Toutes les pages.

Le contrôle retournera à l'écran de configuration des balises. Cliquez sur le bouton bleu SAVE dans le coin supérieur droit. Vous avez configuré avec succès votre premier tag!

Step 11 - Maintenant, pour le mode de débogage, cliquez sur le bouton APERÇU en gris.

Comme le montre la capture d'écran ci-dessus, une boîte orange apparaîtra. Cela indique que le mode de débogage est activé. Accédez à votre blog en utilisant le lien disponible.

Step 12 - Désormais, lorsque vous accédez au blog, vous devriez pouvoir voir une section sur votre blog affichant la section Débogage de Google Tag Manager.

De plus, si vous observez de près, il y a First Tagaffiché sous Balises déclenchées sur cette page. Cela indique que notre balise a été déclenchée lors d'une vue de page réussie.

Step 13- Dans la section de débogage, cliquez sur Variables. Ensuite, cliquez sur Fenêtre chargée dans le panneau de gauche. Cette action signifie que nous sélectionnons une action pour analyser les variables chargées à la suite de cette action.

Il affichera la section Variables comme indiqué dans une case verte dans la capture d'écran suivante.

Vous pouvez analyser les variables plus clairement en passant au chapitre suivant.

↰ Previous page Next page ↱