Google Tag Manager - Guide rapide

Pour comprendre Google Tag Manager, nous devons d'abord comprendre quelques concepts connexes.

Marketing produit - Contexte

Avec l'avènement d'Internet et du Web, il y a eu une immense nécessité de se démarquer pour promouvoir votre produit. Cette époque a surpassé l'époque où la publicité et le marketing fonctionnaient de manière fantastique avec les supports papier.

La nécessité de commercialiser le produit devenant une tâche ciblée et habile, il existe une nouvelle race de professionnels appelés «Product Marketers». Ces personnes doivent être mises à jour avec la tendance du marché, le comportement des utilisateurs et les goûts et les aversions de leur public.

Le responsable du marketing produit, portant le chapeau d'un analyste et d'un annonceur, a besoin de savoir beaucoup de choses pour être au top. L'une de ces choses est la création d'une campagne marketing pour un engagement réussi des utilisateurs.

Si nous adoptons la définition de Wikipédia pour le marketing produit - Product Marketing is the process of promoting and selling a product to an audience.

En bref, un spécialiste du marketing de produit doit créer diverses campagnes promotionnelles pour rester au top de la concurrence, augmentant ainsi les ventes.

Depuis le boom de la dot com, pour un marketing produit réussi, la présence d'un produit est requise non seulement dans le monde réel mais aussi dans le monde du web. La présence et l'acceptation dans le monde du web sont directement proportionnelles au succès du produit.

Outils de marketing produit

Dans cette quête d'augmentation des ventes de produits tout en étant créatif, un spécialiste du marketing de produit doit être conscient de certains outils efficaces. Ces outils en eux-mêmes s'avèrent utiles pour commercialiser le produit et analyser la tendance des utilisateurs en conséquence.

Voici quelques outils de marketing produit couramment utilisés -

  • Google Analytics
  • Chartbeat
  • Kissmetrics
  • Mesures de sprint
  • Woopra
  • Clicky
  • Test utilisateur
  • Œuf fou
  • Mouseflow
  • Mint

Google est évidemment en tête de liste avec son offre - Google Analytics. Google a introduit cet outil d'analyse très tôt au cours de l'évolution du marketing produit. En effet, c'est l'outil le plus fiable et le plus utilisé dans la communauté du marketing produit.

L'outil a son mode de fonctionnement unique en utilisant une interface conviviale. L'utilisateur doit ajouter le numéro de compte Google Analytics à ses pages Web / blog respectives. En conséquence, les visites des utilisateurs et les clics sont suivis par Google Analytics.

Utilisation de différents outils d'analyse

Semblable à Google Analytics, tous les autres outils fournis dans la liste ci-dessus ont un mode de fonctionnement différent. Lorsqu'il s'agit d'utiliser un outil particulier, il faut faire modifier le code du site / blog afin de commencer à suivre le comportement de l'utilisateur.

Ces outils fournissent une analyse sur quelle page a été utilisée le plus souvent, quelles ont été les activités effectuées par l'utilisateur, etc. En outre, ces outils peuvent fournir un retour rapide sous forme de données pour les fonctionnalités nouvellement lancées.

Le fonctionnement de Google Analytics est assez similaire à celui de la plupart des autres outils répertoriés. Considérons maintenant une organisation de produits relativement importante, axée sur la création d'une nouvelle fonctionnalité pour améliorer l'expérience client. Pour une organisation à grande échelle, il est utile de disposer d'énormes processus / pipelines de publication, qui permettent d'obtenir la fonctionnalité souhaitée de manière transparente.

Entrez Google Analytics. Pour que Google Analytics soit utile, il est nécessaire que toutes les pages du code du site Web du produit aient ce numéro de compte. Aussi simple que cela puisse paraître, pour les grandes organisations de produits, l'ajout d'un petit morceau de code dans la page peut parfois être fastidieux et nécessite des tests rigoureux après la création de cette fonctionnalité.

Si l'organisation produit vise à utiliser plusieurs outils d'analyse de données comme indiqué dans la liste ci-dessus, multipliez l'effort en termes de temps et de coût par le nombre d'outils utilisés. Cela devient douloureux à mesure que le produit mûrit. Finalement, évaluer le comportement de l'utilisateur devient également un must. Dans de tels cas, il est important d'avoir un mécanisme un pour tous, de sorte qu'il devienne plus facile pour les spécialistes du marketing de produits de créer différentes campagnes à la volée.

Comme différents outils utilisent différentes techniques pour suivre le comportement de l'utilisateur, il est nécessaire d'opter pour un seul support, qui rend compte de ces différentes techniques avec différents outils.

Google Tag Manager - Introduction

Pour un spécialiste du marketing de produit, utiliser différents outils nécessite une courbe d'apprentissage respective. Avoir différents outils implique différents codes à saisir et donc les changements dans le site Web. S'il existe un processus simple et direct de modification du code du site Web, cela devient un bonheur d'ajouter les différents codes liés aux différents outils d'analyse.

Google Tag Manager (GTM) est un outil gratuit qui permet aux spécialistes du marketing d'ajouter et de mettre à jour facilement des balises de site Web. Les balises permettent la surveillance des pages vues du site, le suivi des conversions, etc. En utilisant Google Tag Manager, on peut avoir une solution de gestion des balises efficace qui permet des mises à jour rapides et faciles des balises de site Web. Les balises sont essentiellement des extraits de code, destinés à l'analyse du trafic et à l'optimisation du marketing.

Pour un spécialiste du marketing de produits engagé dans différentes solutions d'analyse de produits, Google Tag Manager est un must, car il couvre de nombreux aspects du marketing de produit sous un même toit. Vous pouvez ajouter et mettre à jour AdWords, Google Analytics, Firebase Analytics, Floodlight et d'autres balises tierces à l'aide de Google Tag Manager.

Pour configurer Google Tag Manager, il est indispensable d'avoir un site Web. Pour les besoins du didacticiel, nous allons suivre le processus suivant pour configurer Google Tag Manager.

  • Créer un blog avec Blogger.com
  • Créez un compte avec Google Tag Manager
  • Installer une balise sur le blog

Créez un blog avec Blogger.com

Step 1 - Pour commencer à créer un blog, suivez ce lien - https://blogger.com. La page d'accueil du blogueur apparaîtra comme indiqué dans la capture d'écran suivante.

Step 2 - Cliquez sur le bouton - CRÉEZ VOTRE BLOG pour commencer à créer un blog.

À l'étape suivante, Blogger vous demandera votre compte Google. Blogger, étant l'un des produits Google, vous facilite la vie en permettant à un compte Google de créer un blog en ligne.

Step 3 - Entrez vos informations d'identification pour Google, et vous verrez l'écran suivant pour créer votre blog.

Step 4 - Choisissez un titre, une adresse et un thème de blog de votre choix.

La saisie d'un titre est assez simple, vous pouvez fournir n'importe quel titre à votre guise. Avec l'adresse, lorsque vous commencez à saisir l'adresse de blog souhaitée, l'interface commencera à rechercher la disponibilité. La capture d'écran suivante montre comment une adresse de blog est recherchée.

Une fois que vous avez terminé ce processus et que l'adresse du blog est disponible, vous verrez le message suivant dans la zone de texte.

Comme indiqué dans la capture d'écran ci-dessus, l'adresse du blog - https://gtmtutorial2017.blogspot.com est sélectionné.

Step 5 - Une fois que vous avez sélectionné le design souhaité, cliquez sur le bouton rouge - Créer un blog!

Le système prendra quelques secondes et votre nouveau blog sera prêt. Une fois cela fait, l'interface suivante vous sera présentée pour commencer à écrire un blog.

Au moins un message est requis pour que Google Tag Manager fonctionne efficacement.

Step 6 - Créez votre premier article sur le blog en cliquant sur le bouton de lien en bleu - Créez un nouvel article.

Step 7- Vous pouvez commencer à écrire le contenu de votre premier article de blog. Fournissez un titre de publication au besoin en haut de l'écran.

Souvent, blogger facilite la composition de contenu HTML et de texte enrichi. Ceci est possible en utilisant le bouton bascule Composer / HTML dans le coin supérieur gauche de l'écran. Voyons comment utiliser l'option Compose comme exemple.

Step 8- Cliquez sur Composer, un éditeur de texte enrichi sera affiché. Commencez à ajouter du contenu.

Step 9 - Une fois terminé, cliquez sur le bouton Publier en haut à droite de l'écran.

Vous serez redirigé vers l'écran comme indiqué dans la capture d'écran ci-dessus, avec un nouveau message visible dans la liste. Ceci conclut la création du site sur Blogger.com

La prochaine étape consiste à créer un compte Google Tag Manager. Ensuite, nous ajouterons le code du conteneur au site Web. Enfin, nous pourrons suivre les pages vues / événements correspondants avec GTM.

Créez un compte avec Google Tag Manager (GTM)

Step 1- Pour démarrer avec Google Tag Manager, utilisez ce lien: Google Tag Manager . Vous verrez la page d'accueil suivante de Google Tag Manager.

Step 2- Cliquez sur l'un des liens pour INSCRIPTION GRATUITE. Les liens sont disponibles sur la page - au centre et dans le coin supérieur droit.

Step 3 - Allez-y et explorez la page comme vous le souhaitez car elle fournit des informations très utiles sur Google Tag Manager.

Une fois que vous avez cliqué sur INSCRIPTION GRATUITE, l'écran suivant vous sera présenté et l'URL deviendra - https://tagmanager.google.com/?hl=en. Cela s'affichera sous l'écran de connexion avec votre compte Google.

Une fois que vous avez entré vos informations d'identification pour Google, l'interface du gestionnaire de balises s'affiche.

Step 4- GTM vous demandera d'ajouter votre nouveau compte. Il y a deux étapes -

  • Mettre en place compte
  • Conteneur d'installation

Step 5- Dans un premier temps, ajoutez le nom du compte. Pour les besoins de ce tutoriel, nous utiliserons le nom - Tutoriel Google Tag Manager. Vous pouvez choisir de partager des données de manière anonyme avec Google et d'autres personnes, afin d'améliorer votre expérience de marketing produit.

Step 6 - Cliquez sur Continuer.

Step 7- La prochaine étape consiste à configurer le conteneur. Donnez un nom au conteneur. Ajoutons le nom comme - Tag Container. Sous Où utiliser le conteneur, comme illustré dans la capture d'écran suivante, sélectionnez Web.

Step 8 - Cliquez sur CRÉER.

Un écran vous sera alors présenté pour accepter les conditions d'utilisation de Google Tag Manager.

Step 9 - Cliquez sur OUI pour continuer.

Step 10 - Enfin, vous serez présenté avec un ensemble d'extraits de code comme indiqué dans la capture d'écran suivante, qui doivent être ajoutés sous head et body Mots clés.

Ces extraits de code sont nécessaires pour que les données du blog créé puissent être transférées dans l'interface Google Tag Manager.

Nous passerons en revue la création des balises et les processus respectifs dans un chapitre suivant.

Interface de Google Tag Manager

Prenons le temps de nous familiariser avec les différentes sections de l'interface de Google Tag Manager.

Tout d'abord, voyons comment gérer les sections suivantes -

  • Workspace
  • Versions
  • Admin

Espace de travail

La section de l'espace de travail montre le travail actif en cours. Cette section comporte différentes sous-sections telles que -

  • Overview
  • Tags
  • Triggers
  • Variables
  • Folders

Nous en apprendrons davantage sur ces sous-sections dans les chapitres suivants.

Versions

Il est très courant pour les grandes organisations de créer quelques balises et de les avoir pour examen ou processus d'approbation.

Dans le même temps, il peut être nécessaire de comprendre les balises précédentes publiées sur le site Web. À toutes ces fins, nous pouvons utiliser la section Versions. Cela montre toutes les balises possibles publiées dans l'espace de travail actuel et permet d'annuler les modifications, si nécessaire.

Administrateur

Si vous souhaitez configurer votre compte Google Tag Manager pour différents environnements ou différents utilisateurs, vous pouvez utiliser cette section.

Vous pouvez également configurer les détails du compte et consulter les activités liées au compte, s'il y a plusieurs utilisateurs associés à ce compte.

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 &amp;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 analytiques. 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.

Une fois que vous avez compris le processus de création d'une balise, il est logique de plonger en profondeur et de voir comment le suivi est réalisé en utilisant différentes approches.

Balise de vue de page

Un spécialiste du marketing de produit doit comprendre le nombre de visiteurs pour le site Web / blog du produit. Ceci est vraiment essentiel car cela aide à comprendre la tendance des visiteurs. Il peut s'agir de savoir si une amélioration / fonctionnalité particulière ajoutée dans le site Web / blog est appréciée par le visiteur, si les visiteurs accèdent au site Web quotidiennement / hebdomadairement, etc.

Étant donné que la «vue de page» a une importance énorme pour comprendre la sympathie du site Web / blog, voyons comment une vue de page peut être suivie à l'aide d'une balise.

Step 1 - Comme nous avons suivi les étapes du chapitre précédent, laissez-nous accéder à la section des balises dans Google Tag Manager.

Il affichera le tag récemment créé - First Tag.

Step 2 - Cliquez sur First Tag, cela affichera la boîte de dialogue avec les déclencheurs configurés, etc.

Comme souligné dans la capture d'écran ci-dessus, concentrons notre attention sur l'ID de suivi.

Cet ID de suivi est associé à Google Analytics. Lorsque nous démarrons le mode de débogage et visitons le blog, cela sera compté comme une vue de page unique.

À ce moment précis, Google Analytics enregistrera la vue de la page dans son interface.

Step 3 - Déboguez à l'aide de Google Tag Manager et ouvrez le Google Analytics dashboard, sous Sources de trafic → Vue d'ensemble, vous verrez les statistiques suivantes.

Cela montre qu'une page vue est enregistrée et que les pages vues correspondantes seront suivies plus avant dans Google Analytics.

Tags de lien

Plusieurs fois, il y aura certaines offres promotionnelles pour lesquelles un utilisateur peut être obligé de quitter le blog ou le site Web. Outre les promotions, il peut s'agir de sondages tiers qu'un utilisateur peut être amené à participer. Ces enquêtes produiront certaines statistiques, qui seront différentes des données qui arrivent via différentes balises.

À cette fin, il est utile d'activer le suivi du nombre de clics sur le lien et de diriger l'utilisateur vers le site Web. Ces liens sont appelésoutbound links et ces liens peuvent être suivis facilement à l'aide de Google Tag Manager.

Pour démontrer cela, nous allons créer un lien dans notre blog.

La capture d'écran ci-dessus montre un lien appelé - Un lien sortant. Ce lien sera utilisé pour le suivi dans Google Tag Manager. Il redirige vershttps://www.google.com

Step 1- Accédez à l'espace de travail de Google Tag Manager. Cliquez sur Balises dans le panneau de gauche. Cliquez sur le bouton NOUVEAU sur la page pour commencer à créer la balise de lien sortant.

Appelons la balise - Balise de lien sortant.

Step 2 - Suivez le même processus que la configuration initiale de la balise pour avoir le code Google Analytics entré dans le champ correct - ID de suivi.

Step 3- Sélectionnez le champ Type de piste comme événement. Vous pourrez voir plus loin les options suivantes.

Ces options sont conformes au type de piste - Événement. Notez que ces options ne seront pas du tout disponibles sous Type de piste - Vue page. En effet, comme nous associons le code Google Analytics au Google Tag Manager, pour voir les détails de l'événement en temps réel, nous avons besoin de certains paramètres.

Step 4- Remplissez les détails du formulaire ci-dessous. Le texte en gras sont les valeurs à saisir dans les zones de texte.

  • Catégorie - Outbound

  • Action - Click

  • Laissez les champs Libellé et Valeur vides

  • Gardez le coup de non-interaction comme False

Step 5 - Ensuite, dans la section Déclenchement, cliquez sur Choisir un déclencheur pour déclencher cette balise…

Step 6- Cliquez sur l' icône bleue + dans le coin supérieur droit. Cela ouvrira la section de déclenchement personnalisé. Donnez un nom à ce déclencheur sous la forme - Cliquez sur Déclencheur.

Step 7 - Cliquez sur Choisir un type de déclencheur pour commencer la configuration…

Il affichera les types de déclencheurs suivants, comme indiqué dans la capture d'écran suivante.

Step 8- Comme indiqué dans la figure ci-dessus, cliquez sur Juste des liens sous Type de déclencheur de clic. Cela montrera les différentes options pour configurer le type de déclencheur nouvellement créé.

Maintenant, nous devons configurer le déclencheur pour qu'il se déclenche si l'URL sur laquelle vous avez cliqué a un chemin de page comme https://www.google.com. Notez que nous avons configuré le lien sur notre blog pour rediriger vers la même URL.

Step 9 - Configurez le déclencheur comme indiqué exactement dans la figure ci-dessus.

Nous voulons configurer ce déclencheur pour qu'il se déclenche sur certains clics sur les liens lorsque l'URL de la page est égalehttps://www.google.com. Une fois terminé, l'écran devrait ressembler à ce qui suit.

Step 10 - Cliquez sur le SAVEbouton pour enregistrer ce déclencheur nouvellement créé. L'écran revenir à la configuration de balise pour Outbound Lien Tag .

Step 11 - Cliquez sur ENREGISTRER pour terminer la configuration.

Comme indiqué dans la figure ci-dessus, une balise complète pour le lien sortant doit ressembler à ce qui précède.

Maintenant, mettons le tag en action.

Step 12- Depuis l'espace de travail, cliquez sur le bouton APERÇU. Le mode de débogage démarre.

Step 13- Dans votre navigateur, dans un autre onglet, ouvrez votre blog. La fenêtre de débogage sera affichée au bas de l'écran.

Comme indiqué ci-dessus, puisque nous n'avons pas encore cliqué sur le lien, la balise apparaît toujours sous Balises non déclenchées sur cette page.

Step 14- Cliquez sur le lien sortant comme créé à l'étape précédente, la balise sera déclenchée. Vous pouvez le voir apparaître sous Balises déclenchées sur cette page.

Ceci conclut l'approche de création d'une balise pour un lien sortant afin de suivre les liens sur le blog / site Web.

Suivi des événements

Le suivi des événements correspond à toute action différente du chargement d'une page. Le navigateur a une réponse spécifique à toute action que vous effectuez sur la page. Par exemple, l'action peut être aussi simple que de cliquer sur un lien ou de soumettre un formulaire à un formulaire complexe tel que le suivi des vues de fichiers et des téléchargements.

Avec Google Tag Manager, vous pouvez facilement suivre les événements générés dans le navigateur. Il enregistre les réponses du navigateur pour une action potentielle, obtenant ainsi facilement le suivi de l'événement particulier.

Nous utiliserons l'exemple ci-dessus pour voir le suivi des événements en action. Dans l'exemple précédent, nous avons créé un lien qui redirige vers notre blog. Dans cet exemple, nous allons créer un autre lien, qui pointera vers notre blog. Nous utilisons cet exemple afin de montrer comment les liens sortant du blog peuvent être suivis de manière transparente.

J'ai créé un lien appelé Lien interne dans le blog. Ce lien redirigera vers la même page de blog.

Allons au tableau de bord de Google Tag Manager et créons un nouveau déclencheur pour le lien sortant. Nous utiliserons pour cela une URL de clic variable intégrée. En utilisant l'URL de clic, nous allons détecter si le lien sur lequel l'utilisateur clique redirige l'utilisateur en dehors du blog ou non.

Pour activer l'URL de clic de variable intégrée, voici les étapes.

Step 1- Dans la section Variables, cliquez sur le bouton en rouge, CONFIGURER. Il affichera les variables intégrées disponibles. Il existe différentes variables intégrées disponibles, à savoir: Pages, Utilitaires, Erreurs, Clics, etc.

Step 2- Dans la catégorie Clics, cochez la case URL de clic. Cela affichera immédiatement les variables disponibles dans l'URL de clic. Voir l'écran suivant pour référence.

Maintenant que la variable est configurée, nous pouvons configurer le déclencheur.

Le déclencheur sera activé lorsqu'un utilisateur cliquera sur toutes les URL qui redirigent en dehors du blog. La création de ce déclencheur est assez simple.

Step 3- Allez dans Déclencheurs, cliquez sur Nouveau. Donnez un nom au déclencheur. Disons que le nom est - Déclencheur de lien externe.

Step 4 - Sous Configuration du déclencheur, cliquez sur Choisir un type de déclencheur pour commencer la configuration…

Step 5- Dans les options disponibles, sous Cliquer, sélectionnez Juste des liens. Voir l'écran suivant pour les étapes jusqu'à présent.

Lorsque vous cliquez sur Just Links, vous êtes redirigé vers la première section, où vous devrez fournir l'exception d'URL. Voici les étapes pour le faire.

Step 6 - Pour l'option Ce déclencheur se déclenche, sélectionnez Quelques clics sur les liens.

Step 7- Dans les conditions, sélectionnez URL de clic, qui doit être préalablement sélectionnée. Sélectionnez la valeur ne contient pas parmi les options de condition.

Step 8- Dans la zone de texte de valeur, entrez une valeur qui est l'URL de votre blog. Dans notre cas, nous entrerons gtmtutorial2017.blogspot.in. Une fois terminé, l'écran ressemblera à ce qui suit.

Step 9 - Cliquez sur le bouton Enregistrer en bleu pour enregistrer votre nouveau déclencheur.

Il est maintenant temps de configurer notre balise, que nous utiliserons pour suivre l'événement de clic, qui redirigera l'utilisateur en dehors du blog.

Step 10- Ouvrez la section Tags, cliquez sur le bouton NOUVEAU. Donnez un nom à votre balise, appelons-la - Balise de lien externe.

Step 11 - Sous Configuration de la balise, cliquez sur Choisir un type de balise pour commencer la configuration… Sélectionnez le type de balise comme Universal Analytics et saisissez les détails suivants à l'écran.

  • Sous Type de piste, sélectionnez Événement
  • Pour la catégorie - entrez Lien externe
  • En action - entrez Cliquez
  • Pour l'étiquette, cliquez sur l'icône d'options

Step 12 - Dans le panneau latéral affiché, sélectionnez URL de clic.

Step 13- Une fois terminé, cochez la case Activer les paramètres de remplacement dans cette balise. Dans la zone de texte ID de suivi, saisissez votre code de suivi Google Analytics.

Step 14- Faites défiler vers le bas pour configurer le déclenchement. Nous allons utiliser notre déclencheur nouvellement créé.

Step 15- Cliquez sur Choisir un déclencheur pour faire déclencher cette balise… Il affichera les déclencheurs disponibles. Sélectionnez le déclencheur de lien externe, que nous avons créé précédemment.

Ceci conclut la configuration de la balise. Cliquez sur le bouton Enregistrer.

Step 16- Maintenant, pour déboguer la balise, cliquez sur le bouton Aperçu en gris. Il démarrera Google Tag Manager en mode débogage.

Step 17- Revenez sur votre blog et actualisez le blog pour que le débogueur Google Tag Manager démarre. Compte tenu de l'exemple ci-dessus, deux liens sont affichés dans la page. Il existe également la balise de lien externe, qui est affichée sous Balises non déclenchées sur cette page.

Il est maintenant temps de tester la configuration de la balise. Nous utiliserons Ctrl + Clic dans les deux scénarios pour vérifier si la balise est déclenchée. Ctrl + clic ouvrira le lien dans le nouvel onglet, sans actualiser la page actuelle. Nous devons avoir la page intacte, car nous ne pourrons pas voir les balises déclenchées si la page s'actualise.

Step 18- Tout d'abord, utilisez Ctrl + clic sur le lien interne comme indiqué dans la figure ci-dessus. Idéalement, la balise ne devrait pas être déclenchée, car le lien dirige l'utilisateur sur le même blog lui-même.

Comme le montre la figure ci-dessus, sous la section Résumé du débogueur, vous verrez un autre événement - gtm.linkClick. Cela signifie que GTM a enregistré l'événement de clic.

Mais vous ne verrez aucun changement dans la section Balises déclenchées sur cette page. C'est parce que nous avons configuré l'onglet pour les liens sortants.

Step 19 - Maintenant Ctrl + clic Un lien sortant (cela a été créé dans la section précédente).

Observez la section récapitulative, elle sera à nouveau mise à jour pour un autre événement - gtm.linkClick.

Comme le montre la figure ci-dessus, pour le prochain événement enregistré, il y aura une balise déclenchée - Balise de lien externe. Vous pourrez le voir sous Balises déclenchées sur cette page.

De cette manière, vous pouvez utiliser le suivi des événements avec Google Tag Manager et configurer des balises pour les données critiques dont vous avez besoin à partir de votre site Web / blog.

Suivi des formulaires

Le plus souvent, sur n'importe quel site Web / blog, vous verrez un formulaire, qui capturera certains détails de l'utilisateur. En tant que spécialiste du marketing de produit, il devient fastidieux de savoir si le formulaire est utilisé par les visiteurs.

Il peut être judicieux de savoir combien de fois un utilisateur a rempli des informations sur ce formulaire et combien de fois il a rencontré une erreur. Avec Google Tag Manager, vous pouvez facilement suivre les soumissions de formulaires. Cette section vous guidera tout au long du processus.

Pour cet exemple, nous aurons un formulaire Contactez-nous créé sur notre blog.

Step 1- Pour les blogueurs, pour créer un formulaire de contact, utilisez l'option Mise en page → Ajouter un gadget. Une fois que vous avez cliqué sur Ajouter un gadget, vous verrez l'écran suivant, où vous trouverez le gadget Recherche de blogs. Cliquez sur l'icône bleue plus (+) pour l'insérer dans le blog.

Une fois terminé, il apparaîtra sur votre blog comme indiqué dans la capture d'écran suivante.

Maintenant, configurons les déclencheurs associés et la balise.

Pour commencer avec le déclencheur, nous suivrons les mêmes étapes. Nous allons d'abord ajouter enable une variable intégrée appelée Form ID, puis nous créerons un déclencheur qui utilisera cette variable nouvellement créée.

Une fois cela fait, nous utiliserons ce nouveau déclencheur pour configurer une balise de suivi des interactions avec le formulaire.

Pour activer la variable intégrée ID de formulaire, procédez comme suit.

Step 2- Dans la section Variables, cliquez sur le bouton en rouge, CONFIGURER. Dans la catégorie Formulaires, cochez la case ID du formulaire. Cela affichera immédiatement l'ID du formulaire dans les variables disponibles. Voir l'écran suivant pour référence.

Maintenant que la variable est configurée, nous pouvons configurer le déclencheur.

Le déclencheur sera activé lorsque l'utilisateur soumettra des données dans le formulaire Contactez-nous.

Step 3- Pour ce faire, allez dans Déclencheurs, cliquez sur Nouveau. Donnez un nom au déclencheur. Appelons-le comme - Déclencheur de soumission de formulaire.

Step 4 - Sous Configuration du déclencheur, cliquez sur Choisir un type de déclencheur pour commencer la configuration…

Step 5- Parmi les options disponibles, sous Engagement de l'utilisateur, sélectionnez Soumission de formulaire. Voir l'écran suivant pour les étapes jusqu'à présent.

Lorsque vous cliquez sur Soumission de formulaire, vous êtes redirigé vers la première section, où vous devrez fournir l'ID du formulaire.

Step 6 - Pour l'option Ce déclencheur se déclenche, sélectionnez Tous les formulaires.

Une fois que vous avez terminé l'étape ci-dessus, cela permettra le suivi de tous les formulaires soumis sur la page du blog. Vous pouvez également utiliser un ID de formulaire spécifique, qui peut être configuré lorsque vous avez créé votre blog.

Pour configurer un ID de formulaire spécifique, vous pouvez faire appel au développeur de votre site Web / blog pour obtenir plus de détails. Une fois ces étapes terminées, consultez l'écran suivant pour une référence complète.

Step 7 - Cliquez sur le bouton Enregistrer en bleu pour enregistrer votre nouveau déclencheur.

Il est maintenant temps de configurer notre balise, que nous utiliserons pour suivre l'événement de clic qui redirigera l'utilisateur en dehors du blog.

Step 8- Ouvrez la section Tags, cliquez sur le bouton NOUVEAU. Donnez un nom à votre balise, appelons-la - Balise de soumission de formulaire.

Step 9 - Sous Configuration de la balise, cliquez sur Choisir un type de balise pour commencer la configuration… Sélectionnez le type de balise comme Universal Analytics et remplissez les informations suivantes -

  • Sous Type de piste, sélectionnez Événement
  • Pour la catégorie - entrez Soumission de formulaire
  • En action - entrez le formulaire soumis
  • Pour l'étiquette, cliquez sur l'icône d'options

Step 10 - Sur le panneau latéral affiché, sélectionnez Form ID.

Step 11- Une fois terminé, cochez la case Activer les paramètres de remplacement dans cette balise. Dans la zone de texte ID de suivi, saisissez votre code de suivi Google Analytics.

Faites défiler vers le bas pour configurer le déclenchement. Nous allons utiliser notre déclencheur nouvellement créé.

Step 12- Cliquez sur Choisir un déclencheur pour faire déclencher cette balise… Il affichera les déclencheurs disponibles. Sélectionnez Déclencheur de soumission de formulaire, que nous avons créé précédemment.

Ceci conclut la configuration de la balise. Cliquez sur le bouton Enregistrer.

Step 13- Maintenant, pour déboguer la balise, cliquez sur le bouton Aperçu en gris. Il démarrera Google Tag Manager en mode débogage.

Step 14- Revenez sur votre blog et actualisez le blog pour que le débogueur Google Tag Manager démarre. Il y aura la balise de soumission de formulaire, qui est affichée sous Balises non déclenchées sur cette page.

Step 15- Interagissez maintenant avec le formulaire Rechercher dans ce blog en y entrant des valeurs. Tapons First, car notre premier article de blog contient le mot First.

Step 16- Cliquez sur Rechercher. Le nouvel événement apparaîtra sous Résumé et la balise de soumission de formulaire apparaîtra sous Balises déclenchées sur cette page.

De cette façon, nous pouvons créer des balises de soumission de formulaire à l'aide de Google Tag Manager.

En plus de créer les balises et de gérer les déclencheurs et les variables associés, Google Tag Manager propose d'autres fonctionnalités. Cela comprend les éléments de gestion tels que l'organisation des utilisateurs, les dossiers utilisés pour organiser les balises selon l'ordre souhaité, etc.

Dans cette section, nous aurons un aperçu de la manière de gérer les utilisateurs et les différents dossiers liés aux balises.

Gestion des utilisateurs

Il n'est pas rare qu'une équipe de marketing produit utilise un seul compte Google Tag Manager pour gérer différentes campagnes marketing. Il y aura différents rôles, qui auront certaines autorisations telles que la création d'une balise, la suppression / modification d'une balise, la création d'un autre utilisateur, etc.

User Management fournit un portail à part entière pour gérer les utilisateurs utilisant les fonctionnalités GTM. La gestion des utilisateurs fonctionne à deux niveaux -

  • Niveau du compte
  • Niveau du conteneur

Pour accéder à la gestion des utilisateurs, cliquez sur ADMIN dans la barre de menu en haut à gauche.

Comme le montre la figure suivante, vous pourrez voir la gestion des utilisateurs associée au compte et au conteneur.

La différence importante entre les deux est la suivante: si vous fournissez l'accès à un utilisateur au niveau du compte, l'utilisateur a accès à tous les conteneurs sous ce compte. Alors que, si l'accès est fourni à l'utilisateur au niveau du conteneur, l'utilisateur peut modifier / ajouter / supprimer les balises sous ce conteneur uniquement.

Pour voir les détails de tous les niveaux d'accès disponibles, cliquez sur Gestion des utilisateurs under the Container level (surligné en jaune ci-dessus).

Cela affichera les comptes disponibles avec les autorisations qui leur sont fournies. Il s'agira principalement du compte Google que vous utilisez pour vous connecter à GTM.

Cliquez sur le bouton NOUVEAU en rouge. Il affichera l'écran suivant.

Comme le montre la figure, vous pouvez ajouter une adresse e-mail de votre choix, à qui vous souhaitez attribuer des autorisations d'accès, puis fournir les autorisations souhaitées au niveau du conteneur.

Voici les autorisations disponibles -

  • No Access - Empêchez l'utilisateur d'accéder aux balises de conteneur.

  • Read- L'utilisateur ne pourra lire que les balises. Aucune opération de modification ou de suppression ne peut être effectuée.

  • Edit - L'utilisateur peut ajouter / modifier / supprimer les balises disponibles.

  • Approve- L'utilisateur dispose d'une autorisation élevée pour approuver les balises dans l'environnement en direct. Plus d'informations sur les environnements plus loin dans le didacticiel.

  • Publish - Toutes les autorisations, similaires à celles d'un utilisateur administrateur.

Ceci conclut la présentation de la gestion des utilisateurs au niveau du conteneur.

At the account level, on peut configurer un utilisateur en tant qu'utilisateur général ou administrateur.

Des autorisations similaires peuvent être attribuées à l'utilisateur ajouté; la seule différence est que l'utilisateur aura accès à tous les conteneurs sous ce compte.

Ceci conclut un aperçu de la gestion des utilisateurs au niveau du compte.

Dossiers

Les dossiers sont nécessaires en particulier lorsque vous avez de nombreuses balises et déclencheurs dans votre compte. Les dossiers peuvent s'avérer utiles lorsque vous avez un si grand nombre de balises / déclencheurs à gérer.

Pour organiser les balises et les déclencheurs dans ces dossiers, on peut utiliser sa propre créativité. Les dossiers peuvent être créés sur la base de différents domaines d'application ou des utilisateurs ou peut-être de la raison pour laquelle ils sont créés. L'équipe de marketing des produits peut prendre sa propre décision d'avoir une structure de dossier spécifique en place.

Une autre façon d'examiner les dossiers peut être sous l'angle des outils analytiques utilisés. Sur la base de l'outil analytique, on peut créer une balise, ce qui sera utile à long terme.

Pour créer différents dossiers, cliquez sur Dossiers dans le panneau de gauche. Vous verrez l'écran suivant.

Les balises créées jusqu'à présent seront affichées à l'écran. Vous pouvez organiser les balises en créant différents dossiers à l'aide de l'option - NOUVEAU DOSSIER affiché dans le coin supérieur droit de l'écran.

Une fois que vous cliquez sur NOUVEAU DOSSIER, une fenêtre contextuelle rapide s'ouvre comme suit.

À partir de l'écran précédent, vous pouvez toujours déplacer les balises selon vos besoins dans le dossier souhaité.

Ceci conclut l'introduction à la création de dossiers dans Google Tag Manager.

Nous avons créé, modifié et débogué les balises dans notre environnement de débogage. Jusqu'à présent, nous n'avons pas vu les balises en direct sur notre blog.

Pour que les balises soient actives sur le blog, nous devons publier les balises. Nous voudrons que les balises soient publiées plutôt que d'avoir toujours le mode Aperçu.

La publication des balises est assez simple.

Step 1 - Cliquez sur le bouton SOUMETTRE dans le coin supérieur droit de l'écran.

Il affichera l'écran suivant.

Step 2 - Entrez un nom de version identifiable afin qu'il puisse être facilement compris pour les modifications apportées.

Avec la description de la version, vous pouvez être aussi détaillé que possible sur les changements / ajouts de la balise dans cette version particulière.

Step 3 - Faites défiler jusqu'à Modifications de l'espace de travail, vous verrez toutes les modifications apportées aux balises, qui ne sont pas publiées ou en mode PREVIEW.

De même, sous Historique des activités, vous pouvez obtenir une compréhension exacte des changements / mises à jour qui ont été effectués dans le compte depuis le début des temps.

Step 4- Fournissez un nom de version, une description. Vous souhaiterez peut-être fournir le nom de la version en tant que première version et vous pouvez fournir la description en tant que première mise à jour de Google Tag Manager.

Pour le moment, nous laisserons Publish to Environment comme Live. C'est parce que nous n'avons pas encore d'autre environnement que Live.

Step 5 - Cliquez sur PUBLIER et un résumé de cette version vous sera présenté.

C'est ainsi que vous pouvez publier les modifications effectuées dans l'espace de travail de Google Tag Manager.

Vous pouvez utiliser un plugin Google Chrome - Google Tag Assistant pour voir les balises se déclencher sans le mode d'aperçu.

Créer des environnements dans Google Tag Manager

Il existe différentes manières de configurer un environnement à utiliser avec Google Tag Manager.

Habituellement, dans le monde du logiciel, le mot Environnement est utilisé dans le contexte de l'endroit où la fonctionnalité particulière est testée / revue.

Step 1 - Pour afficher les environnements disponibles dans Google Tag Manager, cliquez sur ADMIN.

Step 2 - Dans la section Conteneur, cliquez sur Environnements.

Vous pourrez voir l'écran comme indiqué ci-dessus.

En règle générale, les grandes sociétés de logiciels ont leur site Web divisé en différents environnements pour faciliter le processus de publication d'une fonctionnalité. Les développeurs travaillent sur leur site Web de développement, puis les modifications des fonctionnalités sont transmises au site de préparation. Enfin, lorsque les modifications sont vérifiées dans le site de préparation, les modifications sont transmises à l'environnement Live.

Dans le contexte de Google Tag Manager, il existe une flexibilité pour ajouter différents environnements, ce qui vous permettra de valider complètement votre balise avant qu'elle ne soit sur le site Web Live. Pour ce tutoriel, nous allons créer un environnement, appelé environnement Dev. Voici les étapes.

Step 3- Cliquez sur le bouton NOUVEAU en rouge. Vous pourrez voir la boîte de dialogue suivante.

Step 4- Remplissez les détails comme indiqué dans la figure ci-dessus. Nous prétendrons que notre site de développement est le même site que celui où nous travaillons actuellement, afin de pousser les changements en conséquence.

Step 5 - Cliquez sur CRÉER et vous verrez une invite comme suit.

Comme le montre la figure ci-dessus, l'invite montre deux façons d'utiliser l'environnement.

  • Using a Share Preview Link - Ce lien est pratique lorsque vous souhaitez diffuser les modifications de vos balises aux membres de votre équipe, lorsqu'il y a des équipes plus importantes.

  • With a snippet- Si vous êtes certain qu'un site particulier fonctionnera comme environnement de développement / de préparation, vous pouvez utiliser cette option d'extrait de code. Un extrait de code pour cet environnement est disponible, afin que vous puissiez accéder au site Web pour voir les modifications apportées récemment.

Step 6- Cliquez sur PUBLISH TO DEV pour les voir en action. L'écran suivant demandera les modifications disponibles pour pousser dans l'environnement nouvellement créé.

Les modifications qui ne sont pas encore envoyées à l'environnement respectif seront affichées. En outre, le nom de la version est affiché, afin que l'utilisateur sache clairement quelle version est publiée dans l'environnement respectif.

Step 7- Cliquez sur PUBLIER MAINTENANT pour voir les modifications disponibles sur votre nouvel environnement. Il affichera le message de réussite avec une date et une heure.

Dans la liste d'environnements disponibles, cliquez sur le nom du nouvel environnement, dans notre cas - Dev.

Les options disponibles pour partager le lien d'environnement seront affichées, comme indiqué ci-dessous.

En utilisant l'une des approches ci-dessus, vous pourrez voir les modifications de votre balise dans votre environnement de développement (Dev).

Une couche de données peut être considérée comme un objet contenant toutes les informations à transmettre et à traiter avec Google Tag Manager. C'est un concept un peu technique. Le terme couche de données est utilisé pour désigner la structure de données utilisée par Google Tag Manager pour stocker, traiter et transmettre des données entre votre site Web / blog et le gestionnaire de balises.

Pour approfondir les choses, une couche de données peut alimenter les données dans votre outil d'analyse sur votre visiteur. En prenant une autre perspective pour la définition, la couche de données est en fait une liste d'exigences et d'objectifs commerciaux pour chaque sous-ensemble du contexte numérique.

Prenons un exemple de site Web de commerce électronique, les exigences commerciales peuvent inclure -

  • Informations transactionnelles, ayant les détails sur ce qui a été acheté

  • Données des visiteurs, concernant qui a acheté

  • Autres détails sur l'achat, tels que l'endroit où l'achat a été effectué et à quelle heure

  • Enfin, les informations sur d'autres facteurs, tels que si le visiteur s'est abonné ou non aux mises à jour par e-mail

Ainsi, en un mot, la couche de données contient des informations qui peuvent être utilisées par différents outils / utilisateurs / parties prenantes selon les besoins.

Dans Google Tag Manager, dataLayer est un tableau JavaScript. Il se compose de paires clé-valeur. Voici un exemple rapide de dataLayer avec différents types de données -

dataLayer = [{
   'products': [{
      'name': 'Western Cotton',
      'tuning': 'High-G',
      'price': 49.75
   },
   {
      'name': 'Fenda Speakers',
      'tuning': 'Drop-C',
      'price': 199
   }],
   'stores': ['Hyderabad', 'Bangloer],
   'date': Sat Sep 13 2017 17:05:32 GMT+0530 (IST),
   'employee': {'name': 'Raghav}
}];

Ici, nous avons différentes valeurs telles qu'un tableau d'objets (les produits), des valeurs numériques (le prix), un tableau de chaînes (magasins), un objet date et un objet (nom).

Par ailleurs, lorsque vous placez le code de conteneur Google Tag Manager sur votre site Web, la couche de données est automatiquement créée.

En soi, la couche de données est un concept assez complexe à comprendre du premier coup. Ce chapitre fournira plus d'informations sur la manière d'interagir avec la couche de données.

Événements de la couche de données

Un exemple rapide d'événement de couche de données peut être, un formulaire d'inscription à la newsletter, qui ne peut pas être facilement suivi avec les écouteurs automatiques GTM. Un développeur de site Web peut vous aider à pousser un événement de couche de données une fois qu'un nouvel abonné a entré son e-mail sur votre site Web. Le code de cet événement devrait ressembler à ceci -

push({‘event’: ‘new_subscriber’});

Si vous le souhaitez, vous pouvez demander à votre développeur des informations supplémentaires, telles que l'emplacement du formulaire. Ceci est obligatoire s'il y a plus d'un formulaire sur votre site Web. Cela peut être réalisé en utilisant le code suivant.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'formLocation': ‘footer’,
   'event': new_subscriber
});

En outre, Google Tag Manager pousse par défaut un certain ensemble de valeurs vers la couche de données des applications Web. Ces valeurs sont -

  • gtm.js - Poussé vers la couche de données dès que Google Tag Manager est prêt à fonctionner

  • gtm.dom - Poussé vers la couche de données lorsque le DOM est prêt

  • gtm.load - Poussé vers la couche de données lorsque la fenêtre est complètement chargée

Inspection de la couche de données

Comme nous le savons déjà, certains événements sont créés à la suite de toute interaction à l'écran.

Par exemple, considérons cet événement de chargement de page simple. Pour consulter les événements, vous devez exécuter le débogueur. Une fois le débogueur en cours d'exécution (en mode aperçu), visitez le blog. Si vous regardez la fenêtre de résumé dans le coin inférieur gauche, voici ce que vous verrez -

Step 1 - Cliquez sur Window Loaded puis sur Data Layer.

Les informations affichées dans l'onglet Data Layer concernent l'événement Window Loaded.

Il est affiché sous la forme - {event: 'gtm.load', gtm.uniqueEventId: 3}

De plus, si vous souhaitez regarder de plus près, vous devez prendre en charge l'onglet console de Chrome. L'inspection d'une couche de données devient facile lorsque vous savez comment utiliser correctement le débogueur Chrome.

Step 2- Lorsque vous êtes sur votre blog, cliquez avec le bouton droit de la souris sur n'importe quelle partie de la page. Dans le menu contextuel qui s'affiche, cliquez sur Inspecter. Le panneau sera affiché sur le côté droit de l'écran, avec l'onglet Éléments activé.

Step 3- Cliquez sur Console. En mode console, cliquez sur l'icône du coin supérieur gauche pour effacer tous les messages affichés. Voir la capture d'écran suivante pour référence.

Step 4- Une fois que la fenêtre est effacée pour tous les messages précédents, tapez dataLayer, assurez-vous que la capitalisation pour L est effectuée. Ce nom est fourni par Google Tag Manager à sa couche de données. Cependant, vos développeurs peuvent lui attribuer un nom différent en cas de besoin.

Step 5- Appuyez sur Entrée après dataLayer. Il montrera les détails suivants.

Il existe trois objets et chaque objet contient des informations. Maintenant, ces objets peuvent ne pas être les mêmes pour vous, comme ils sont montrés dans la capture d'écran ci-dessus. Le dataLayer est configurable et il est tout à fait dans le contrôle du développeur de le configurer selon l'exigence.

Les valeurs présentes sont dues au gadget Blogger utilisé à cet emplacement / espace particulier. C'est la raison pour laquelle il y a certaines informations là-bas.

Si vous regardez l'objet 1, vous remarquerez que l'événement déclenché est - gtm.dom . Il est déclenché par GTM lors du chargement de la page.

De cette manière, vous pouvez inspecter la couche de données et y ajouter des informations en cas de besoin.

Variables dans la couche de données

Maintenant que nous connaissons la couche de données, essayons de lire l'une des variables à l'aide de l'interface Google Tag Manager.

Ici, nous allons essayer de lire l'événement à l'aide d'une variable de couche de données.

Si nous voyons la figure ci-dessus, l'événement variable contient le gtm.dom . Nous allons créer une variable à partir de l'interface GTM et voir comment elle se reflète dans l'onglet Variables sous Google Tag Manager.

Step 1- Dans l'interface Google Tag Manager, accédez à Variables. Faites défiler jusqu'aux variables définies par l'utilisateur. Cliquez sur NOUVEAU.

Step 2 - Donnez un nom à cette nouvelle variable, appelons-la varEvent.

Step 3 - Cliquez sur Choisir un type de variable pour commencer la configuration…

Step 4 - Sélectionnez Variable de couche de données dans la liste.

Step 5 - Lorsque vous sélectionnez Variable de couche de données, vous devrez fournir le nom et la version.

Ce nom proviendra de la couche de données réelle de Google Tag Manager. Comme mentionné précédemment, la variable que nous allons suivre est - event.

Step 6 - Entrez l'événement dans le nom de la variable de la couche de données.

Step 7 - Cliquez sur ENREGISTRER.

Step 8 - Cliquez sur Aperçu pour voir les modifications reflétées dans le débogueur.

Step 9- Une fois la page chargée, cliquez sur Fenêtre chargée puis sur Variables. Faites défiler jusqu'au bas de la section Variables, vous verrez varEvent, comme mis en évidence dans la capture d'écran ci-dessus.

Comme le montre la capture d'écran ci-dessus, la valeur sera gtm.load.

De cette manière, on peut inspecter la couche de données et capturer les valeurs dans la couche de données selon les besoins.

Il est temps d'examiner certains scénarios complexes, dans lesquels vous pouvez suivre les éléments critiques pour l'entreprise. Nous verrons comment créer un événement personnalisé, qui n'est pas prédéfini ou disponible par défaut.

Dans ce chapitre, nous examinerons -

  • Implémentation d'événements personnalisés
  • Suivi du défilement de la souris

Implémentation d'événements personnalisés

Il y aura des cas où vous voudrez peut-être créer un événement, qui est différent des événements disponibles dans GTM. Pour ce faire, nous devrons créer un événement personnalisé, qui utilise les variables existantes de la couche de données.

Considérez le scénario lorsque nous cliquons sur le lien interne créé précédemment. Créons un événement personnalisé appelé urlClick, qui lira la variable de couche de données gtm.elementurl.

Step 1- Pour ce faire, créons une variable appelée urlName depuis la section Variables. En utilisant le processus habituel, créez la variable.

Ci-dessus, un exemple de variable de couche de données - urlName.

Maintenant, nous allons utiliser cette variable pour créer notre événement personnalisé. L'événement personnalisé sera utilisé lorsque nous créerons le déclencheur. Voir la capture d'écran suivante pour référence.

Step 2- Créez un déclencheur pour se déclencher sur l'événement déjà présent, en cliquant sur le lien interne. Sous Nom de l'événement, spécifiez gtm.linkClick.

Maintenant, créons le tag.

Step 3- Suivez le même processus pour créer le tag. Voici les détails -

  • Type de tag - Universal Analytics
  • Type de piste - Événement
  • Catégorie - Clic sur le lien
  • Action - Cliquez sur

Step 4 - Pour l'étiquette, utilisez l'étiquette récemment créée, urlName.

Step 5- Une fois terminé, cochez Activer les paramètres de remplacement dans cette balise. Dans la zone de texte ID de suivi, saisissez votre code de suivi Google Analytics.

Lorsque vous sélectionnez un déclencheur, assurez-vous de sélectionner le déclencheur récemment créé - URL cliquée.

Step 6- Enregistrez le tag. Cliquez sur Aperçu pour voir les modifications dans votre blog.

Step 7- Ctrl + clic sur le lien interne. Vous devriez pouvoir voir l'événement gtm.linkClick dans la zone Résumé. En outre, vous devriez voir la balise déclenchée comme indiqué dans la capture d'écran suivante.

De cette manière, nous pouvons utiliser les événements existants pour créer nos propres événements personnalisés et réussir le suivi des contrôles souhaités.

Suivi du défilement de la souris

Lorsqu'il s'agit d'engager les utilisateurs sur le blog, un spécialiste du marketing peut vouloir détecter un défilement de la souris. La détection du défilement de la souris est essentielle car elle nécessitera d'autres actions, telles que l'affichage d'un lien vers une newsletter ou le déclenchement d'une fenêtre contextuelle offrant une sorte de réduction sur le produit.

En utilisant Google Tag Manager, nous pouvons facilement suivre l'événement de défilement. Pour cela, nous devons utiliser un code tiers, que nous utiliserons lors de la création d'une balise.

Le code est disponible à cet endroit. Nous l'utiliserons lors de la création d'un tag.

Step 1- Créez un déclencheur. Nous appellerons ce déclencheur - un déclencheur de défilement.

Reportez-vous à l'image suivante pour la configuration du déclencheur.

Step 2- Configurer le type de déclencheur - Prêt pour DOM. Autoriser l'activation de ce déclencheur - Tous les événements DOM Ready.

Step 3 - Cliquez sur ENREGISTRER une fois terminé avec les étapes ci-dessus.

Maintenant, créons le tag.

Step 4 - Cette fois, lors de la création d'une balise, sélectionnez un autre type de suivi comme indiqué dans la capture d'écran suivante.

Step 5 - Lorsque le HTML personnalisé est sélectionné, il affichera un espace pour entrer le code HTML.

Step 6- Entrez le code tel que copié à partir de ce lien.

Step 7- Faites défiler vers le bas pour configurer le déclencheur. Le déclencheur que nous avons récemment créé (Scroll Trigger ci-dessus) doit être sélectionné.

Step 8 - Cliquez sur ENREGISTRER.

Step 9- Maintenant, démarrez le débogueur GTM et actualisez la page du blog. Vous verrez deux changements majeurs dans la section Résumé et balise.

Step 10 - Maintenant, faites défiler vers le bas pour voir le reste du blog, quelques événements supplémentaires seront déclenchés.

  • ScrollDistance
  • ScrollTiming

Ces événements seront éventuellement utilisés pour détecter l'emplacement du défilement de la souris et prendre d'autres mesures en conséquence.