Dernière mise à jour: janvier 19, 2023
Disponible avec le ou les abonnements suivants, sauf mention contraire :
Marketing Hub
Enterprise
|
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 :
- Installez et utilisez l'extension Événement Chrome pour les événements cliqués simples tels que les liens hypertextes et les images.
- Créez manuellement l'événement à l'aide d'un identifiant, d'une classe ou d'un sélecteur jQuery pour plus de contenu complexe, tel que des CTA.
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
- Dans votre compte HubSpot, cliquez sur l'icône Paramètres dans la barre de navigation principale.
- 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 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 .
- Dans la boîte de dialogue, sélectionnez Élément cliqué.
- 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
- 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é.
- 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.
- 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.
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 saisircta--primary,cta--mediumouhomepage-salesdans 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.
- 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
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']
En savoir plus sur lessélecteurs pris en charge par .
