Retour au blog

Sélectionneur d’événements et sélecteur 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 des événements de 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 codé en HTML, lequel est fait de différents blocs (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 des CSS, ils définissent l’apparence visuelle 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 sélecteurs CSS 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 en utilisant le sélecter CSS ?

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 textes différents à cause des traductions, ou si tu veux regarder des éléments sans texte (p.ex. les boutons désignés par un 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 en utilisant le sélectionneur d’événements

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

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 pourras cliquer pour activer la sélection.

Prélève un élément que tu veux suivre et règle un événement en cours.

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 le sélecteur CSS d’un élément ?

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électionner Inspecter (2). 

Cela ouvrira les outils de développement de ton navigateur de l’élément spécifique souligné. Fait un clic droit sur 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), nomme cet événement (2) et catégorise-le (3). Finis ce processus par l’enregistrement de cet événement (4), et c’est terminé !

Ce qui est génial est que tu verras tes données sur-le-champ !  

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 pop up 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 de clics d’une façon sélective à l’aide d’un sélecteur CSS
  • Se procurer un sélecteur CSS d’un élément de ta page Web
  • Mettre en place un événement dans Smartlook en le définissant avec un sélecteur CSS
  • Régler un événement en utilisant le sélectionneur 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 à l’aide du sélecteur CSS ? Dis-le-nous dans les commentaires.

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

Discussion