Tag Manager - Comment suivre les clics sur un element du site via les sélecteurs CSS
Le suivi des clics via Google Tag Manager (GTM) implique la création de balises, de déclencheurs et de variables.
Voici un guide général pour suivre les clics à l'aide de GTM :
Exemple_Trouver le sélecteur CSS d'un slider pour Tag Manager
Trouver le sélecteur CSS d'un slider dépend de la structure HTML spécifique de votre page et du script utilisé pour implémenter le slider. Voici quelques étapes générales pour vous aider à trouver le sélecteur CSS d'un slider :
Certains sliders ont des classes ou des IDs spécifiques qui peuvent être utilisés comme sélecteurs CSS. Recherchez des noms de classe comme "slider," "carousel," ou quelque chose de similaire.
Une fois que vous avez identifié le conteneur du slider, inspectez les balises enfants pour voir si elles ont des classes ou des IDs spécifiques.
Les balises enfants peuvent être les diapositives individuelles du slider.
Si le slider utilise un script externe, recherchez le code source de la page pour trouver des indices sur la structure du slider et les classes utilisées.
Certains navigateurs ont des extensions, comme "SelectorGadget" pour Chrome, qui vous permettent de sélectionner facilement des éléments et de générer des sélecteurs CSS.
Si le slider est basé sur une bibliothèque ou un plugin tiers, consultez la documentation pour obtenir des informations sur la manière de le cibler avec des sélecteurs CSS.
En résumé, il n'y a pas de méthode universelle pour trouver le sélecteur CSS d'un slider, car cela dépend de la mise en œuvre spécifique sur votre site. L'inspection des éléments et l'analyse de la structure HTML sont généralement les étapes clés pour trouver le sélecteur approprié.
1. Créer une Balise (Tag)
- Étape 1 : Connectez-vous à votre compte Google Tag Manager.
- Étape 2 : Accédez à votre conteneur.
- Étape 3 : Cliquez sur "Ajouter une nouvelle balise."
- Étape 4 : Choisissez le type de balise approprié (par exemple, balise Google Analytics 4).
- Étape 5 : Configurez la balise avec les informations nécessaires, comme l'ID de suivi GA4.
2. Créer un Déclencheur (Trigger)
- Étape 1 : Dans GTM, accédez à "Déclencheurs" depuis le panneau de navigation.
- Étape 2 : Cliquez sur "Nouveau" pour créer un déclencheur.
- Étape 3 : Choisissez le type de déclencheur approprié
3. Type de déclencheur (Trigger) sur Tag Manager
Dans Google Tag Manager (GTM), les options "Liens uniquement" (Click Link) et "Tous les éléments" font référence aux déclencheurs d'événements et déterminent quels types d'éléments déclencheront l'événement associé. Voici une explication de la différence entre ces deux options :
a. Déclencheur "Liens uniquement" :
Définition : Ce type d'événement est spécifiquement conçu pour cibler les liens sur la page.
Fonctionnement : Si vous choisissez "Liens uniquement" dans la configuration d'un déclencheur, l'événement sera déclenché uniquement lorsque l'utilisateur clique sur un élément de type lien (balise <a> en HTML).
Exemple d'utilisation : Cela peut être utile si vous souhaitez suivre spécifiquement les clics sur les liens sortants vers des pages externes.
b. Déclencheur "Tous les éléments" :
Définition : Ce type d'événement cible tous les types d'éléments interactifs sur la page, y compris les liens, les boutons, les formulaires, etc.
Fonctionnement : Si vous choisissez "Tous les éléments," l'événement sera déclenché lorsque l'utilisateur interagit avec n'importe quel élément interactif sur la page, que ce soit un lien, un bouton, ou un autre élément.
Exemple d'utilisation : Si vous voulez suivre toutes les interactions utilisateur sur la page, qu'elles concernent les liens, les boutons, ou d'autres éléments interactifs, vous choisiriez "Tous les éléments."
La principale différence réside dans la portée des éléments ciblés. "Liens uniquement" se concentre spécifiquement sur les balises <a> (liens), tandis que "Tous les éléments" inclut tous les éléments interactifs sur la page. Le choix dépend de l'objectif spécifique de votre suivi d'événements. Si vous avez besoin de suivre spécifiquement les liens, utilisez "Liens uniquement". Si vous souhaitez suivre toutes les interactions, optez pour "Tous les éléments".
4. Configurer le déclencheur pour spécifier les conditions de déclenchement (par exemple, le clic sur un bouton particulier)
Si l'id du bouton n'est pas présent, il faut prendre la classe la plus proche, donc seletionner Click Classes
⚠ ATTENTION : avec Click Classes il faut utiliser uniquement "Contient" ou "Est égal à"
Si vous n'avez aucun de deux elements, vous pouvez utiliser "Click Elements"
⚠ ATTENTION : Click Elements retourne un objet HTML --> Il faut donc l'utiliser uniquement avec "Correspond au sélecteur CSS" (matches CSS selector)
 |
| Click Classes Trigger |
 |
| Click Element Trigger |
Pour tout savoir sur les sélecteurs CSS pour Tag Manager :
Exemple_Trouver le sélecteur CSS d'un slider pour Tag Manager
Trouver le sélecteur CSS d'un slider dépend de la structure HTML spécifique de votre page et du script utilisé pour implémenter le slider. Voici quelques étapes générales pour vous aider à trouver le sélecteur CSS d'un slider :
- Inspecter l'Élément avec les Outils de Développement
- Faites un clic droit sur le slider que vous souhaitez inspecter.
- Sélectionnez "Inspecter" ou "Inspecter l'élément" dans le menu contextuel.
- Utilisez les outils de développement du navigateur pour explorer la structure HTML de la page.
- Recherchez les selecteurs qui encapsulent le slider, souvent des éléments div avec des classes spécifiques.
Certains sliders ont des classes ou des IDs spécifiques qui peuvent être utilisés comme sélecteurs CSS. Recherchez des noms de classe comme "slider," "carousel," ou quelque chose de similaire.
Une fois que vous avez identifié le conteneur du slider, inspectez les balises enfants pour voir si elles ont des classes ou des IDs spécifiques.
Les balises enfants peuvent être les diapositives individuelles du slider.
Si le slider utilise un script externe, recherchez le code source de la page pour trouver des indices sur la structure du slider et les classes utilisées.
Certains navigateurs ont des extensions, comme "SelectorGadget" pour Chrome, qui vous permettent de sélectionner facilement des éléments et de générer des sélecteurs CSS.
Si le slider est basé sur une bibliothèque ou un plugin tiers, consultez la documentation pour obtenir des informations sur la manière de le cibler avec des sélecteurs CSS.
En résumé, il n'y a pas de méthode universelle pour trouver le sélecteur CSS d'un slider, car cela dépend de la mise en œuvre spécifique sur votre site. L'inspection des éléments et l'analyse de la structure HTML sont généralement les étapes clés pour trouver le sélecteur approprié.
5. Configurer les Variables
- Étape 1 : Si nécessaire, configurez des variables pour capturer des informations spécifiques, comme le texte du bouton.
- Étape 2 : Allez dans "Variables" dans GTM pour créer de nouvelles variables au besoin.
6. Associer la Balise, le Déclencheur et les Variables
- Étape 1 : Allez dans "Balises" dans GTM.
- Étape 2 : Associez la balise que vous avez créée au déclencheur approprié.
- Étape 3 : Configurez les variables au besoin.
7. Test et Débogage
- Étape 1 : Utilisez le mode de prévisualisation dans GTM pour tester votre configuration.
8. Publication
Étape 1 : Une fois que tout est correct, publiez les modifications dans GTM.
9. Vérification dans Google Analytics 4
Étape 1 : Allez dans votre compte Google Analytics 4 pour vérifier les événements de suivi des clics.
Ces étapes peuvent varier en fonction de la spécificité de votre cas d'utilisation, mais elles fournissent une base générale pour le suivi des clics via Google Tag Manager.
Ces étapes peuvent varier en fonction de la spécificité de votre cas d'utilisation, mais elles fournissent une base générale pour le suivi des clics via Google Tag Manager.