Back to Blog

Cueilleur d’événements et sélecteurs CSS | Leçon #6

mars 23, 2018 | Alex Castro | | École de Smartlook

Maintenant que tu sais comment suivre les événements de tes utilisateurs en utilisant Smartlook, c’est facile de rassembler les données sur comment tes utilisateurs interagissent avec ton produit ou ton site Web. Et si on voulait savoir combien de visiteurs utilisent tes fonctionnalités spécifiques? Dans cette leçon, tu apprendras comment définir les événements d’une façon sélective en utilisant le sélecteur CSS.

Comment régler les événements par sélecteur CSS ?

Il y a deux façons de régler les événements par un sélecteur CSS:

D’abord, qu’est-ce que le sélecteur CSS?

Ton site Web est créé à la base de HTML, ce qui fait des blocs de construction (les éléments HTML, comme les images, les blocs de texte, les textes d’en-tête, les barres de navigations, les boutons etc.). Les pages Web sont aussi créées avec les CSS, ce qui définissent  l’apparence visuel de la mise en page (les styles).

Dans les CSS, les sélecteurs sont utilisés pour définir la cible des éléments HTML à laquelle on veut mettre du style. Pour appliquer les styles, les CSS sélecteurs sont définis comme les attributs des éléments HTML respectifs. Ici tu peux voir comment un sélecteur CSS peut avoir l’aire:

#sign-up-panel > div > div.button-with-note > a

Pourquoi devrais-tu mettre en place les événements par un CSS sélecter ?

Tu peux facilement installer un événement du clic pour suivre des clics sur un bouton ou un lien hypertexte avec un texte spécifique. Mais si tu disposes d’un site Web multilingue sur lequel un bouton a plusieurs différents textes à cause des traductions, ou si tu veux regarder des des éléments sans texte (p.ex. les boutons désignés par une icône), dans ce cas-là tu as besoin d’utiliser un sélecteur CSS pour choisir et suivre cet élément dans ta page.

Installation des événements par le Cueilleur d’événements

Utilise notre cueilleur d’événements pour récupérer un sélecteur CSS d’un élément dont l’activité tu veux suivre.

Dans le gestionnaire d’événements clique sur “Prélever un événement de la page”.

Insère l’URL de la page de laquelle tu prélèveras l’événement.

Sur la page tu verras un pop up sur lequel tu cliqueras pour activer le sélecteur.

Prélève un élément que tu veux suivre et règle un événement en même temps.

Tu peux ajuster la précision du sélecteur. De cette façon tu capteras les clics sur les éléments avec les attributs CSS en commun:

Coller le sélecteur CSS d’un élément manuellement

Comment se procurer un sélecteur CSS d’un élément?

How to get a CSS Selector of an element

Si tu utilises Google Chrome en tant que navigateur, tout ce que tu as à faire est un clic droit sur un bouton ou un élement (1) et sélecter Inspecter (2). 

Cela ouvrira les outils de développement de ton navigateur avec l’élément spécifique souligné. Un clic droit au-dessus de cet élément (1) et sélecte Copier (2), ensuite Copier sélecteur (3).

Le sélecteur CSS d’un bouton est maintenant copié dans ton presse-papiers. Tu peux le coller dans le champ des paramètres d’un événement (1), dénomme cet événement (2) et catégorise-le (3). Finis ce processus par enregistrement de cet événement (4), et tu es prêt d’y aller!

Tu verras tes données sur-le-champs! Et c‘est trop bien!

Tu n’arrives pas à suivre les événements à l’aide d’un sélecteur CSS?

Parfois, le bouton que tu veux suivre contient un sélecteur répétitif ou il faut suivre une fenêtre popup modale. Dans ce cas-là, installe tes propres événements personnalisés en utilisant notre API.

Dans cette leçon tu as appris comment:
  • Suivre les événements des clics d’une façon sélective à l’aide d’un sélecteur CSS
  • Se procurer d’un sélecteur CSS d’un élément de ta page Web
  • Mettre en place un événement dans Smartlook en définissant le avec le sélecteur CSS
  • Régler un événement en utilisant le sélecteur d’événements

Maintenant c‘est à toi!

Rend le suivi des événement plus spécifique avec un sélecteur CSS. Quel genre d’événement suis-tu à alde du sélecteur CSS ? Dis-nous le dans le commentaire.

Funnels pour l’analytique qualitative | Leçon #7

Discussion