Ignorer et passer au contenu principal
Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
Analytics Tools

Créer des événements d'élément cliqué

Dernière mise à jour: mars 25, 2022

Disponible avec :

Marketing Hub Entreprise

Un événement d'élément cliqué enregistre lorsqu'un visiteur anonyme ou un contact HubSpot clique sur un élément spécifique de votre site web. Par exemple, suivez les clics sur un CTA de démonstration gratuit ou un lien de téléchargement PDF. Les événements Élément cliqué peuvent être créés et suivis uniquement sur les pages sur lesquelles un code de suivi HubSpot est installé.

Remarque :

  • Les instructions contenues dans cet article concernent le nouvel outil d'événements comportementaux personnalisés, qui remplace l'outil précédent. Tous les événements créés dans l'outil hérité continueront de fonctionner et vous pourrez toujours les gérer et les analyser dans cet outil.
  • Les événements hérités ne peuvent pas être migrés vers l'outil de nouveaux événements. Il est recommandé de recréer vos événements hérités dans le nouvel outil, car de nouveaux événements personnalisés offrent plus de flexibilité par rapport aux propriétés d'événement. Par exemple, les événements hérités nécessitent que vous créiez plusieurs événements pour suivre des campagnes distinctes. Désormais, un seul événement comportemental personnalisé peut suivre plusieurs campagnes.

Les événements Élément cliqué peuvent être créés de deux façons :

Une fois que vous avez créé vos événements, découvrez comment les analyser dans l'outil d'analytics et de reporting. Vous pouvez également créer des événements d'URL visitée et des événements personnalisés.

Créer des événements Élément cliqué avec l'extension Chrome

Installer l'extension Événement Chrome

  • Depuis votre compte HubSpot, accédez à settings l'icône Paramètres dans l'angle supérieur droit.
  • Dans le menu latéral de gauche, accédez à Suivi et analytics Code de suivi.
  • Cliquez sur Installer l'extension Événement Chrome.
  • Cliquez sur Télécharger.
  • Vous serez redirigé vers l'extension HubSpot Analytics dans le magasin web de Google Chrome. Dans le coin supérieur droit, cliquez sur Ajouter à Chrome.

  • Dans la boîte de dialogue, cliquez sur Ajouter l'extension.
  • Une fois l'extension installée, elle apparaîtra comme une icône d'engrenage orange sprocket dans la barre d'outils du navigateur Chrome.

Créer un événement avec l'extension d'événement Chrome

  • Accédez à une page web contenant votre code de suivi HubSpot.
  • Dans la barre d'outils du navigateur Chrome, cliquez sur l'icône d'engrenage sprocket.
  • Dans la boîte de dialogue, sélectionnez Élément cliqué

    chrome-extension-create-clicked-element-event
  • Cliquez sur Suivant. Vous pourrez ensuite sélectionner un élément à suivre sur la page.
  • Cliquez sur un élément sur la page pour y créer un événement Élément cliqué. Dans l'exemple ci-dessous, l'événement Élément cliqué suivra les clics sur le lien des éléments clés.

  • Dans la boîte de dialogue, le sélecteur CSS de l'élément est généré automatiquement. Saisissez un nom pour l'événement, puis cliquez sur Créer un événement.

Remarque : en fonction de la complexité du code HTML et CSS du site, l'extension d'événement Chrome peut ne pas détecter un sélecteur CSS unique pour un élément. Dans ce cas, vous devez créer manuellement l'événement ou ajouter une balise d'identification unique à l'élément.

  • Après la création de l'événement, un message de confirmation apparaîtra. Cliquez sur Afficher l'événement dans HubSpot pour consulter le nouvel événement Élément cliqué dans le tableau de bord des événements.

HubSpot commencera alors à suivre l'élément. Découvrez comment analyser l'événement dans HubSpot.

Créer manuellement l'événement à l'aide d'un identifiant, d'une classe ou d'un sélecteur jQuery

  • Depuis votre compte HubSpot, accédez à Reports > Analytics Tools.
  • Cliquez sur Événements comportementaux personnalisés.
  • Cliquez sur Créer un événement dans l'angle supérieur droit.
  • Dans le panneau de droite, saisissez un nom pour votre événement, puis sélectionnez Élément cliqué. 

    create-custom-clicked-element-event-type
  • Cliquez sur Suivant.
  • Sélectionnez la façon dont vous souhaitez identifier l'élément cliqué sur la page. Découvrez comment trouver des identifiants sur une page de site web.
    • HTML ID : entrez l' ID de l'élément que vous voulez suivre. Par exemple, si votre élément cliqué est configuré comme <button id="log-in">, vous saisiriez log-in.
    • Classe HTML : saisissez la classe de l'élément que vous souhaitez suivre. Par exemple, si votre élément cliqué est configuré comme <button class="bigCTA">, vous saisiriez bigCTA.
    • sélecteur jQuery : saisissez le sélecteur jQuery de l'élément que vous souhaitez suivre.
      create-custom-clicked-element-ID
  • Cliquez sur Suivant.
  • Par défaut, l'élément cliqué sera suivi sur toutes les pages sur lesquelles le code de suivi HubSpot est installé. Pour suivre uniquement les clics d'élément sur une page spécifique, sélectionnez Page spécifique, puis saisissez l'URL de la page.
  • Cliquez sur Enregistrer.

Après avoir créé l'événement, HubSpot commencera à suivre l'élément. Découvrez comment analyser l'événement dans HubSpot.

Comprendre et récupérer les sélecteurs d'élément

Vous pouvez identifier un élément par son ID HTML, sa classe HTML ou en utilisant un sélecteur jQuery.

Identifiant

Pour trouver et utiliser l'ID d'un élément :

  • Cliquez avec le bouton droit de la souris sur la page contenant l'élément que vous ciblez et sélectionnez Afficher le code source de la page ou Inspecter.
  • Cliquez sur l'élément. Vous devriez pouvoir voir l'attribut d'identifiant dans la ligne du code (par ex., id="unique-element-name").
  • Copiez la valeur ID et collez-la (par exemple, dans ce cas, unique-element-name) dans le champ HTML ID sans les guillemets. Par exemple, pour un élément qui comprend id="get-started-marketing-hub", vous devez saisir get-started-marketing-hub dans le champ.
jquery-selector-id-selector0
 

Classe

Un événement d'élément cliqué peut identifier un élément par son attribut de classe. 

Remarque :

  • lorsque plusieurs éléments d'une page partagent la même classe, seul le premier élément de la page sera pris en compte pour la réalisation de l'événement. Par conséquent, vous ne devez utiliser la classe comme identifiant que lorsqu'aucun autre élément de la page ne partage cette classe. Si l'élément n'a pas de classe unique, il est recommandé d'utiliser ID à la place.
  • Si vous ne pouvez pas mettre à jour le code source d'un élément pour ajouter une classe ou un ID unique, il est recommandé d'utiliser l'extension Chrome pour configurer l'événement à la place, car HubSpot attribuera un identifiant plus spécifique.

 

Pour trouver la classe d'un élément et l'utiliser pour l'événement :

  • Cliquez avec le bouton droit de la souris sur la page contenant l'élément que vous ciblez et sélectionnez Afficher le code source de la page ou Inspecter.
  • Cliquez sur l'élément. Vous devriez pouvoir voir l'attribut de classe dans la ligne du code (par ex., class="unique-element-name").
  • Copiez la valeur de la classe et collez-la dans le champ Classe HTML sans les guillemets. Par exemple, pour un élément qui inclut dans le champ  
    • Lorsqu'un élément possède plusieurs classes, vous pouvez utiliser n'importe laquelle de ses classes comme cible. Par exemple, si un élément comprend class="cta--primary cta--medium homepage-sales", vous pouvez saisir cta--primary, cta--medium ou homepage-sales dans le champ Classe HTML. Cependant, assurez-vous qu'aucun autre élément ne partage cette classe.
    • Pour joindre plusieurs classes, utilisez le format suivant : classe1.classe2.classe3.

sélecteur de classe html-simple0

Sélecteur jQuery

Vous pouvez également utiliser des sélecteurs jQuery complets pour cibler des éléments. C'est utile si l'élément que vous ciblez n'a pas d'ID ou de classe, ou si vous devez être plus précis

Par exemple, vous voulez créer un événement d'élément cliqué en utilisant un sélecteur jQuery pour l'élément suivant :

<a id="get-started-marketing-hub" class="cta--primary" href="https://www.hubspot.com/products/marketing/get-started" aria-label="Get started with Marketing Hub">Commencez</a>

Plutôt que d'utiliser l'ID ou la classe de l'élément, vous pouvez utiliser un sélecteur jQuery pour cibler la propriété href de l'élément en saisissant le texte suivant dans le champ du sélecteur jQuery :

[href='https://www.hubspot.com/products/marketing/get-started']

jquery-selector-field-with-value

En savoir plus sur lessélecteurs pris en charge par .