Les objectifs de clic sur un élément se déclenchent lorsque les visiteurs cliquent sur des éléments de page spécifiques. Parfait pour suivre les boutons CTA, la navigation et les liens externes.
Quand utiliser les objectifs de clic
Idéal pour suivre :
- Boutons d'appel à l'action (CTA)
- Clics sur les menus de navigation
- Liens de téléchargement
- Liens externes
- Boutons de lecture vidéo
- Tout élément cliquable
Créer des objectifs de clic
Les objectifs se trouvent sur le tableau de bord de chaque site Web, sous l'onglet Journeys.
Ouvrir l'onglet Journeys
Depuis le tableau de bord de votre site web, ouvrez l'onglet Journeys et sélectionnez le sous-onglet Objectifs.
Ajouter un objectif
Cliquez sur Ajouter un objectif, puis choisissez Clic sur un élément comme type d'objectif.
Nommer l'objectif
Donnez-lui un nom clair, par exemple « Bouton d'inscription » ou « CTA de tarification ».
Entrer un sélecteur CSS
Dans le champ Sélecteur CSS, entrez le sélecteur qui identifie l'élément à suivre.
Valeur de suivi (optionnel)
Activez Suivre la valeur monétaire si vous souhaitez associer une valeur de revenu à chaque completion.
Créer
Cliquez sur Créer pour enregistrer l'objectif.
Sélecteurs CSS
Qu'est-ce qu'un sélecteur CSS ?
Un modèle qui identifie les éléments HTML :
<button id="signup-btn" class="cta primary">
S'inscrire
</button>
Sélecteurs pour ce bouton :
#signup-btn(par ID).cta(par classe)button.primary(par balise et classe)
Sélecteurs courants
| Sélecteur | Correspond à |
|---|---|
#my-id | Élément avec id="my-id" |
.my-class | Éléments avec class="my-class" |
button | Tous les éléments button |
a.download | Liens avec class="download" |
[data-action] | Éléments avec attribut data-action |
Trouver le bon sélecteur
Méthode 1 : Inspecteur du navigateur
- Cliquez avec le bouton droit sur l'élément
- Choisissez « Inspecter »
- Trouvez l'élément dans DevTools
- Cherchez un id ou une classe unique
Méthode 2 : Tester dans la console
- Ouvrez la console du navigateur (F12)
- Tapez :
document.querySelector('your-selector') - Si l'élément s'affiche, le sélecteur fonctionne
Meilleures pratiques des sélecteurs
Utiliser les IDs quand disponibles
Option la plus fiable :
<button id="cta-signup">S'inscrire</button>
Sélecteur : #cta-signup
Utiliser des classes spécifiques
Si pas d'ID, utilisez une classe descriptive :
<button class="btn btn-primary cta-main">Commencer</button>
Sélecteur : .cta-main
Éviter les sélecteurs génériques
| Mauvais | Problème |
|---|---|
button | Correspond à tous les boutons |
.btn | Trop commun |
a | Tous les liens |
| Bon | Pourquoi |
|---|---|
#signup-cta | ID unique |
.cta-signup | Classe spécifique |
[data-goal="signup"] | Créé à cet effet |
Ajouter des attributs de données
Demandez aux développeurs d'ajouter des attributs traçables :
<button data-goal="signup" class="btn">S'inscrire</button>
Sélecteur : [data-goal="signup"]
Exemples courants
Boutons CTA
| Objectif | Sélecteur |
|---|---|
| CTA principal | #hero-cta |
| CTA secondaire | .cta-secondary |
| CTA tarification | .pricing-cta |
Navigation
| Objectif | Sélecteur |
|---|---|
| Lien tarification | a[href="/pricing"] |
| Lien contact | nav a[href="/contact"] |
| Se connecter | .nav-signin |
Téléchargements
| Objectif | Sélecteur |
|---|---|
| Tout téléchargement | a[download] |
| Téléchargements PDF | a[href$=".pdf"] |
| Fichier spécifique | a[href="/files/guide.pdf"] |
Liens externes
| Objectif | Sélecteur |
|---|---|
| Liens externes | a[target="_blank"] |
| Liens d'affiliation | a[href*="partner.com"] |
| Liens sociaux | .social-links a |
Sélecteurs avancés
Sélecteurs d'attributs
| Modèle | Correspond à |
|---|---|
[attr] | A un attribut |
[attr="value"] | Correspondance exacte |
[attr*="value"] | Contient |
[attr^="value"] | Commence par |
[attr$="value"] | Se termine par |
Combinateurs
| Modèle | Correspond à |
|---|---|
div button | Bouton dans div |
div > button | Bouton enfant direct |
button:first-child | Premier bouton |
button:not(.disabled) | Non désactivé |
Exemples
/* Liens vers des sites externes */
a[href^="http"]:not([href*="mysite.com"])
/* Boutons soumettre non désactivés */
button[type="submit"]:not(:disabled)
/* Liens de téléchargement dans la zone de contenu */
.content a[href$=".pdf"]
Comment les clics sont comptés
Un objectif de clic se complète une fois par session de visiteur. Zenovay enregistre le premier clic correspondant dans une session et ignore les clics ultérieurs sur le même élément au cours de cette session, de sorte qu'un visiteur qui clique deux fois compte comme une conversion. Le même visiteur revenant dans une nouvelle session peut compléter l'objectif à nouveau.
Si vous souhaitez suivre un clic spécifique uniquement sur certaines pages, limitez-le au niveau du sélecteur en combinant le sélecteur de clic avec un parent qui n'existe que sur ces pages, ou utilisez un objectif de correspondance d'URL pour les conversions basées sur les pages.
Éléments dynamiques
Éléments ajoutés après le chargement de la page
Le suivi des clics est attaché au niveau du document, il fonctionne donc pour les éléments qui apparaissent après le chargement initial de la page, y compris le contenu rendu par les frameworks JavaScript.
Test des éléments dynamiques
- Chargez la page
- Attendez que l'élément s'affiche
- Cliquez sur l'élément
- Vérifiez que l'objectif se déclenche
Dépannage
Les clics ne sont pas suivis
Vérifier le sélecteur :
// Dans la console du navigateur
document.querySelector('your-selector')
// Doit renvoyer l'élément
Vérifier la visibilité de l'élément :
- L'élément est-il visible lors du clic ?
- Est-il caché ou couvert par un autre élément ?
Mauvais éléments correspondent
Rendez le sélecteur plus spécifique :
- Ajouter un contexte parent
- Utiliser une classe plus unique
- Ajouter un attribut de données
Éléments chargés avec délai
Si l'élément se charge après la page :
- La plupart des cas fonctionnent automatiquement
- Testez complètement
- Considérez un objectif d'événement personnalisé si les problèmes persistent
Meilleures pratiques
Planifier vos sélecteurs
Avant l'implémentation :
- Identifier les CTAs clés
- Assurer des identifiants uniques
- Documenter les sélecteurs
- Tester sur toutes les pages
Travailler avec les développeurs
Demandez :
- Des IDs uniques sur les CTAs clés
- Des attributs de données pour le suivi
- Des conventions de nommage cohérentes
Tester complètement
- Cliquez vous-même sur l'élément
- Vérifiez la vue en temps réel
- Vérifiez que l'objectif a été enregistré
- Testez aussi sur mobile