Utiliser Google Tag Manager pour suivre les interactions des visiteurs

0
122

Les marchands en ligne ont besoin de données pour prendre des décisions. Un exemple est le suivi de l’activité des visiteurs. Dans cet article, je vais examiner comment configurer la création de rapports sur les interactions courantes sur les sites à l’aide de Google Tag Manager.

Pour être sûr, un développeur peut ajouter JavaScript à un site Web pour prendre en charge divers rapports dans Google Analytics. Par exemple, pour suivre les clics sur un bouton, JavaScript peut déclencher un gestionnaire d’événements onClick dans Google Analytics.

Cependant, Google Tag Manager peut également suivre les clics sans déployer JavaScript. (Pour une présentation, consultez la section «Premiers pas avec Google Tag Manager, pour le commerce électronique».)

Par exemple, la capture d’écran ci-dessous provient du site de mon entreprise. Je veux savoir combien de clics le bouton « Afficher les prix » reçoit.

Combien de clics le bouton

Combien de clics le bouton « Afficher les prix » a-t-il reçu?

Je peux suivre les clics dans Google Tag Manager, à partir de Déclencheurs> Nouveau.

Effectuez le suivi des clics dans Google Tag Manager, en commençant par Déclencheurs> Nouveau. « Width = » 1000 « height = » 369 « srcset = » https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google -Tag-Manager-2.jpg? Lossy = 1 & strip = 1 & webp = 1 1000w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-2-300×111. jpg? lossy = 1 & strip = 1 & webp = 1 300w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-2-570×210.jpg?lossy=1&strip=1&webp = 1 570w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-2-768×283.jpg?lossy=1&strip=1&webp=1 768w, https: / /566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-2-150×55.jpg?lossy=1&strip=1&webp=1 150w, https://566763.smushcdn.com/ 754212 / wp-content / uploads / 2020/08 / Google-Tag-Manager-2-500×185.jpg? Lossy = 1 & strip = 1 & webp = 1 500w « size = » (max-width: 1000px) 100vw, 1000px « /></p>
<p id=Suivez les clics dans Google Tag Manager, à partir de Déclencheurs> Nouveau. Cliquez sur l’image pour agrandir.

Ensuite, je nommerai le déclencheur en haut à gauche, en remplaçant « Déclencheur sans titre » par « Afficher les clics sur les tarifs ».

Je vais ensuite sélectionner Type de déclencheur> Clics – Liens uniquement> Quelques clics sur les liens. Je laisserai les deux cases non cochées et je définirai « Click Text » = « correspond RegEx (ignore case) » = « Voir les prix. »

Sélectionnez Type de déclencheur> Clics – Liens uniquement> Quelques clics sur les liens. Set « Click Text » = « correspond RegEx (ignore case) » = « Voir les prix. » « Width = » 1000 « height = » 427 « srcset = » https://566763.smushcdn.com/754212/wp-content/ uploads / 2020/08 / Google-Tag-Manager-3.jpg? lossy = 1 & strip = 1 & webp = 1 1000w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag -Manager-3-300×128.jpg? Lossy = 1 & strip = 1 & webp = 1 300w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-3-570×243. jpg? lossy = 1 & strip = 1 & webp = 1 570w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-3-768×328.jpg?lossy=1&strip=1&webp = 1 768w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-3-150×64.jpg?lossy=1&strip=1&webp=1 150w, https: / /566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-3-500×214.jpg?lossy=1&strip=1&webp=1 500w « tailles = » (largeur max: 1000 px) 100vw, 1 000px « /></p>
<p id=Sélectionnez Type de déclencheur> Clics – Liens uniquement> Quelques clics sur les liens. Définissez « Click Text » = « correspond à RegEx (ignorer la casse) » = « Voir les prix. » Cliquez sur l’image pour agrandir.

Notez que j’ai sélectionné « correspond à RegEx (ignorer la casse) », car c’est le moyen le plus polyvalent de rechercher le texte et la majuscule de « Afficher les prix ». Par exemple, l’interface du site lit « VOIR LES PRIX » en raison de CSS. Le texte dans le code HTML est « Afficher les prix ».

Ensuite, je vais enregistrer le déclencheur.

Créer un tag

Je vais maintenant créer la nouvelle balise dans Google Tag Manager à l’adresse Tags> Nouveau.

Créez la nouvelle balise dans Google Tag Manager sous Balises> Nouveau. « Width = » 1000 « height = » 366 « srcset = » https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google -Tag-Manager-4.jpg? Lossy = 1 & strip = 1 & webp = 1 1000w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-4-300×110. jpg? lossy = 1 & strip = 1 & webp = 1 300w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-4-570×209.jpg?lossy=1&strip=1&webp = 1 570w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-4-768×281.jpg?lossy=1&strip=1&webp=1 768w, https: / /566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-4-150×55.jpg?lossy=1&strip=1&webp=1 150w, https://566763.smushcdn.com/ 754212 / wp-content / uploads / 2020/08 / Google-Tag-Manager-4-500×183.jpg? Lossy = 1 & strip = 1 & webp = 1 500w « size = » (max-width: 1000px) 100vw, 1000px « /></p>
<p id=Créez la nouvelle balise dans Google Tag Manager à l’adresse Tags> Nouveau. Cliquez sur l’image pour agrandir.

Je vais nommer la balise en haut à gauche, en remplaçant « Balise sans titre » par « Afficher les clics sur les tarifs ».

Je vais ensuite sélectionner « Google Analytics: Universal Analytics » comme type de balise et « Événement » comme type de suivi. Je vais renseigner les paramètres de suivi des événements de « Catégorie », « Action » et « Libellé ». Je laisserai le paramètre « Appel sans interaction » sur « Faux » et sélectionnerai ma variable Paramètres Google Analytics (ou la configurer si vous y êtes invité).

Sélectionnez

Sélectionnez « Google Analytics: Universal Analytics » comme type de tag et « Event » comme type de suivi. Renseignez les paramètres de suivi des événements de « Catégorie », « Action » et « Libellé ».

Ensuite, j’ajouterai le déclencheur que je viens de créer pour déclencher la balise.

Ajoutez le déclencheur pour déclencher la balise.

Ajoutez le déclencheur pour déclencher la balise.

Je suis maintenant prêt à enregistrer la balise et à la publier dans Google Tag Manager en cliquant sur « Soumettre » en haut à droite de la page.

Enregistrez la balise en cliquant sur «Soumettre» en haut à droite de la page.

Enregistrez et publiez le tag en cliquant sur «Soumettre» en haut à droite de la page.

Vérifier l’événement

Il est important de confirmer que le nouvel événement génère correctement des rapports dans Google Analytics. Pour ce faire, je vais accéder à Google Analytics et utiliser les rapports en temps réel sur Temps réel> Événements. Pour tester, je clique sur « Afficher les prix » sur mon site Web et je confirme le clic en temps réel.

Pour confirmer le nouvel événement, accédez à Google Analytics et utilisez les rapports en temps réel dans Temps réel> Événements. « Width = » 1000 « height = » 477 « srcset = » https://566763.smushcdn.com/754212/wp-content/uploads /2020/08/Google-Tag-Manager-8.jpg?lossy=1&strip=1&webp=1 1000w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag- Manager-8-300×143.jpg? Lossy = 1 & strip = 1 & webp = 1 300w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-8-570×272.jpg ? lossy = 1 & strip = 1 & webp = 1 570w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-8-768×366.jpg?lossy=1&strip=1&webp= 1 768w, https://566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-8-150×72.jpg?lossy=1&strip=1&webp=1 150w, https: // 566763.smushcdn.com/754212/wp-content/uploads/2020/08/Google-Tag-Manager-8-500×239.jpg?lossy=1&strip=1&webp=1 500w « tailles = » (largeur max: 1000px) 100vw , 1 000 px « /></p>
<p id=Pour confirmer le nouvel événement, accédez à Google Analytics et utilisez les rapports en temps réel sur Temps réel> Événements. Cliquez sur l’image pour agrandir.

Je clique également sur la valeur de la catégorie d’événement (« Bouton ») pour m’assurer que le libellé d’événement de « Afficher les prix » est correctement signalé.

Cliquez sur la catégorie d'événement (

Cliquez sur la valeur de la catégorie d’événement («Bouton») pour vous assurer que le libellé d’événement de «Afficher les prix» est correctement signalé.

Suivi des clics sur les numéros de téléphone

Un élément commun sur un site Web est un numéro de téléphone cliquable pour les utilisateurs mobiles.

Pour configurer le suivi des clics sur les numéros de téléphone, commencez par créer un déclencheur dans Google Tag Manager similaire au suivi des clics sur les boutons, ci-dessus. L’exception est de définir le «Click URL» = «contains» = «tel».

Pour suivre les clics sur les numéros de téléphone, créez un déclencheur dans Google Tag Manager similaire au suivi des clics sur les boutons, ci-dessus. L'exception est de définir le «Click URL» = «contains» = «tel».

Pour suivre les clics sur les numéros de téléphone, créez un déclencheur dans Google Tag Manager similaire au suivi des clics sur les boutons, ci-dessus. L’exception est de définir le «Click URL» = «contains» = «tel». Cliquez sur l’image pour agrandir.

Créez ensuite une balise (comme celle pour suivre les clics sur les boutons). Définissez les valeurs de catégorie d’événement et d’étiquette d’événement et laissez vide l’étiquette d’événement.

Définissez les valeurs de catégorie d'événement et d'étiquette d'événement et laissez vide l'étiquette d'événement.

Définissez les valeurs de catégorie d’événement et d’étiquette d’événement et laissez vide l’étiquette d’événement.

Ensuite, je vérifierai, dans les rapports en temps réel, que l’événement de clic se déclenche dans Google Analytics.

Vérifiez, dans les rapports en temps réel, que l'événement de clic se déclenche dans Google Analytics.

Vérifiez, dans les rapports en temps réel, que l’événement de clic se déclenche dans Google Analytics. Cliquez sur l’image pour agrandir.

Plus de suivi

J’ai expliqué dans l’article comment suivre les clics vers un bouton « Afficher les prix » et un numéro de téléphone. Il existe cependant de nombreuses autres possibilités pour les sites de commerce électronique. Les exemples comprennent:

  • Messages d’erreur de soumission de formulaire infructueuse;
  • Clics pour ajouter des boutons au panier;
  • Clics vers un estimateur de frais de livraison;
  • La fenêtre de discussion s’ouvre et l’engagement.