Création de conditions pour les règles basées sur un événement

Les conditions déterminent à quel moment une règle basée sur un événement est déclenchée.

  1. Sélectionnez le type d’interaction dont vous souhaitez effectuer le suivi (clics de souris ou envois de formulaire, par exemple).

    Pour plus d’informations, voir Types d'événement.

  2. Activez les options suivantes si besoin est :

    Élément Description
    Différer l’activation du lien Activez cette option si l’événement active un lien et si vous souhaitez retarder le lien afin que l’événement ait suffisamment de temps pour se déclencher.
    Appliquer directement le gestionnaire d’événements à l’élément Permet d’appliquer le gestionnaire d’événements à l’élément spécifique qui est ciblé. Ce paramètre est lié au concept de propagation d’événements et de couche dans un navigateur.

    Par exemple, si vous cliquez sur une image à l’intérieur d’une balise d’ancrage telle que <a href="abc.html"><img src="xyz.png"/></a>, vous pouvez vous attendre à ce que le clic soit associé à la balise d’ancrage, car celle-ci se trouve dans le flux de la propagation d’événements. Lorsque vous examinez toutefois le clic dans les outils de développement, celui-ci peut affecter uniquement la balise <img>. Pour que l’événement soit géré correctement, vous devez associer le clic à la balise <img> et ne pas dépendre du navigateur pour que le clic soit propagé vers un élément parent. Un événement tel qu’un clic peut éventuellement être propagé vers la balise <body>. Il est important de comprendre la liaison actuelle de l’événement et de cibler spécifiquement ce dernier pour s’assurer du déclenchement correct de la règle.

    La propation d’événements signifie que l’événement est d’abord capturé et géré par l’élément interne puis propagé vers les éléments externes.

  3. Indiquez le nom de la balise dont vous souhaitez effectuer le suivi et les autres propriétés de la balise que vous souhaitez faire correspondre.

    Voir Utilisation du sélecteur CSS pour plus d’informations sur la recherche de la balise d’élément correcte.

  4. Sélectionnez d’autres types de condition ou de critère à lier à la règle, puis configurez-les.

  5. Indiquez vos préférences concernant la propagation d’événements.

    La propagation d’événements est un moyen de propager les événements dans le modèle DOM HTML.

    Problème Solution
    Vous souhaitez que les interactions liées sur les éléments enfants du sélecteur de règles que vous avez identifié déclenchent la règle. Autoriser la propagation des événements sur les éléments enfants
    Vous souhaitez empêcher la propagation d’événements lorsque l’élément enfant déclenche déjà son propre événement. Ne pas autoriser si l’élément enfant déclenche déjà un événement.
    Vous ne souhaitez pas que les événements du sélecteur de règles que vous avez identifié dépassent l’élément dans la hiérarchie des événements. Ne pas autoriser la propagation des événements vers les parents

Event types

Liste des types d'événement intégrés et de la manière dont chacun est défini.

Catégorie Événement Définition
Souris click Un bouton de périphérique de pointage est enfoncé et relâché sur un élément.
mouseover Un périphérique de pointage est déplacé sur l’élément auquel est attaché l’écouteur ou sur l’un de ses enfants.
Clavier keypress Une touche est enfoncée et cette touche produit normalement une valeur de caractère (utilisez input à la place).
Forms focus Un élément a été activé (il n’est pas propagé).
flou Un élément a perdu la cible d’action (il n’est pas propagé).
submit Un formulaire est envoyé.
modifier Un élément perd la cible d’action et sa valeur change depuis qu’il est activé.
Vidéo HTML5 ended La lecture s’est arrêtée car la fin du média a été atteinte.
loadeddata La première image du support a terminé son chargement.
play La lecture a commencé.
pause La lecture est interrompue.
bloqué L’agent utilisateur tente de récupérer les données du média, mais les données ne sont pas disponibles de manière inattendue.
volumechange Le volume a changé.
% terminé Émet un événement selon un pourcentage spécifié du temps de lecture total. Par exemple, la saisie de 10 % indique que cette règle se déclenche uniquement lorsque 10 % de la durée totale de la vidéo a été lue.
time complete Émet un événement selon une durée de lecture spécifiée. Par exemple, la valeur 10 indique que cette règle se déclenche uniquement lorsque 10 secondes de la durée totale de lecture de la vidéo ont été lues.
Mobile orientation change L’orientation du périphérique (portrait/paysage) a changé.
zoomchange Lorsqu’un mouvement de pincement ou d’étirement est effectué sur un périphérique mobile.
Browser tab focus Le événement est déclenché lorsque le contenu devient actif.
flou de tabulation Le événement est déclenché lorsque le contenu n’est plus activé.
Autre custom Un événement personnalisé a été déclenché sur le modèle DOM. Select Custom from the Event Type drop-down list, then specify the custom event name. Pour plus d’informations, consultez CustomEvent sur le réseau développeur Mozilla.
enter viewport Lorsque l’élément entre d’abord dans la vue du visiteur. Si l’élément est en vue immédiatement au chargement de la page, la règle se déclenche immédiatement. Si l’élément se trouve dans la vue après le défilement, la règle se déclenche alors. Un délai facultatif peut être spécifié dans la règle qui détermine la vue de l’élément avant le déclenchement du événement (la valeur par défaut est de 1 seconde).
element exists Lorsqu’un élément d’un sélecteur spécifié existe, soit parce qu’il se trouve dans l’annotation de la page, soit parce qu’il a été dynamiquement injecté ultérieurement. Chaque règle ne se déclenche qu’une seule fois.
pushState ou hashchange Le chemin d’accès à l’URL ou le hachage (identifiant de fragment) à la fin de l’URL a été modifié. Le pushState ou hashchange événement peut être utilisé avec des applications monopages (SPA) dans lesquelles une page ne se recharge pas mais où son contenu change. Angular et React sont des cadres de développement courants qui peuvent être utilisés pour créer des applications monopages. Ce type d'événement vous permet de créer des règles basées sur un événement sans dépendre des développeurs. Ces règles se déclenchent lorsque des fonctions communes se produisent dans les applications monopages, telles que : Le chemin d’accès à l’URL a été modifié en fonction de l’utilisation de l’pushStateAPI d’historique HTML5. Pour plus d’informations sur l’utilisation pushState, voir Ajoute et modification des entrées d’historique sur Mozilla Developer Network. Le hachage a changé en raison de la modification des vues ou des emplacements de la page par l’utilisateur. Pour plus d’informations sur l’utilisation hashchange, voir Hashchange sur Mozilla Developer Network.
temps passé Valeur en secondes. Le événement est déclenché une fois le nombre de secondes spécifié écoulé.
dataelementchanged Un élément de date a été modifié. Ce événement vous permet de sélectionner un élément de données spécifique à utiliser comme déclencheur. Pour plus d’informations sur un cas d’utilisation possible, voir Ajouter l’outilAdobe Experience Manager ContextHub.

Utilisation du sélecteur CSS

Utilisez la méthode CSS Selector pour sélectionner rapidement et facilement des éléments CSS à utiliser comme déclencheurs pour les règles basées sur un événement sans quitter le créateur de règles de la gestion dynamique des balises.

L’un des plus grands avantages de la gestion dynamique des balises est la capacité de événement des comportements ou des interactions de page sur votre site Web. Cependant, il est parfois difficile et chronophage de trouver les éléments CSS à inclure dans vos règles.

Exemple avec un élément unique

Par exemple, nous voulons créer une règle qui se déclenche lorsque les utilisateurs cliquent sur le lien "Se connecter ou s’inscrire" sur notre site Web, comme le montre l’illustration suivante. Cet exemple est simple car le lien Se connecter ou s’inscrire ne contient aucun élément similaire dans la page CSS.

L’exemple le plus complexe décrit ci-dessous illustre comment utiliser la variable CSS Selector lorsqu’il y a de nombreux éléments similaires sur la page, tels que les onglets en haut (Men’s, Women’s, Equipment, etc.).

Pour utiliser le sélecteur CSS :

  1. Accédez au CSS Selector widget dans la gestion dynamique des balises en cliquant sur l’ Target icône lors de la création d’une règle.

    Dans cet exemple, nous créons une règle basée sur un événement qui utilise le Click type d'événement pour déclencher la règle lorsque les utilisateurs cliquent sur le lien Se connecter ou s’inscrire.

  2. Spécifiez l’URL du site Web, puis cliquez sur Load.

    Remarque

    Soyez aussi précis que possible par rapport à la page Web que vous souhaitez en événement. Gardez à l’esprit que les feuilles de style CSS peuvent varier d’une page à l’autre, selon votre site Web et son architecture. Il est utile de tester pour voir à quelle fréquence votre feuille de style change.

    Le site Web est maintenant chargé dans un iFrame avec le widget Sélecteur CSS incorporé. Placez le pointeur de la souris sur différents éléments afin d’avoir une idée du fonctionnement de l’outil.

    Si nous créions cette règle sans utiliser le CSS Selector, nous examinerions l’élément de page souhaité pour déterminer la page CSS appropriée à utiliser. A l’aide de la CSS Selector, il vous suffit de cliquer sur l’élément de la page qui doit déclencher la règle.

  3. Cliquez sur Sign In or Register.

    Lorsque vous cliquez sur un élément de page que le sélecteur doit faire correspondre, il devient vert. Le CSS Selector système génère ensuite un sélecteur CSS minimal pour cet élément.

    Remarquez le panneau situé en bas qui contient des informations sur l’élément sélectionné et un bouton pour envoyer les informations à la gestion dynamique des balises.

    Le nombre entre parenthèses en regard de Clear indique le nombre d’éléments sélectionnés. Dans cet exemple, le lien "Se connecter ou s’inscrire" n’a rien de similaire sur la page spécifiée. Par conséquent, "1" s’affiche. Cliquez sur Clear pour supprimer les éléments sélectionnés. Cliquez sur Toggle Position pour déplacer le panneau vers le haut ou le bas de l’iFrame selon vos besoins. Click ? pour vue des informations sur le CSS Selectorfichier.

  4. Cliquez sur Send to DTM pour copier la page CSS dans le Element Tag or Selector champ de la gestion dynamique des balises.

  5. Terminez de configurer la règle comme décrit dans Création de conditions pour les règlesbasées sur un événement.

    Sans écrire aucun code ni examiner les éléments, nous avons créé une règle basée sur un événement qui se déclenche lorsque les utilisateurs cliquent Sign In or Register.

Exemple avec des éléments similaires

Supposons maintenant que vous souhaitiez créer une règle qui se déclenche lorsque les utilisateurs cliquent sur l’onglet Men’s (Hommes) en haut ou sur votre site Web. La différence entre cet exemple et l’exemple simple décrit ci-dessus réside dans le fait que l’onglet Men’s (Hommes) contient de nombreux éléments similaires sur la page.

  1. Accédez au CSS Selector widget dans la gestion dynamique des balises en cliquant sur l’ Target icône lors de la création d’une règle.

  2. Spécifiez l’URL du site Web, puis cliquez sur Load.

  3. Cliquez sur l'onglet Men's (Hommes) pour le sélectionner.

    Notez que de nombreux éléments de la page sont sélectionnés et sont surlignés en jaune. Dans cet exemple, 28 éléments sont placés entre Clear parenthèses, ce qui signifie qu’il y a 28 éléments sur la page qui utilisent la balise "a".

    Nous voulons déclencher la règle lorsque les utilisateurs cliquent sur le lien Men’s (Hommes), nous devons donc désélectionner les autres éléments similaires.

    Placez le pointeur de la souris sur un élément en surbrillance similaire (par exemple "Femmes") et vous remarquerez qu’une zone rouge s’affiche autour de l’élément.

    Lorsque vous cliquez sur un élément de page que le sélecteur doit faire correspondre, il devient vert. Le CSS Selector système génère ensuite un sélecteur CSS minimal pour cet élément. En outre, le sélecteur met en surbrillance tout ce qui correspond à cet élément en jaune. Les CSS Selector débuts sont larges et vous permettent ensuite de limiter votre sélection.

    Cliquez sur un élément en surbrillance pour le rejeter (rouge) ou sur un élément non surligné pour l’ajouter (vert). Grâce à ce processus de sélection et de rejet, vous pouvez trouver le sélecteur CSS idéal pour vos besoins. Appuyez sur la touche Maj tout en déplaçant la souris pour sélectionner des éléments à l’intérieur d’autres éléments sélectionnés.

  4. Cliquez sur l’élément avec la zone rouge (Femmes) pour le désélectionner, ainsi que tous les autres éléments similaires.

    Notez que le nombre entre parenthèses en regard de Clear est maintenant 1.

  5. Cliquez sur Send to DTM pour copier la page CSS dans le Element Tag or Selector champ de la gestion dynamique des balises.

  6. Terminez de configurer la règle comme décrit dans Création de conditions pour les règlesbasées sur un événement.

Limites du sélecteur CSS

La version CSS Selector est en version bêta et peut ne pas fonctionner correctement pour certains sites en raison de limitations techniques.

Remplissage dynamique des variables

Vous pouvez affecter dynamiquement des attributs d’élément à des variables.

Pour affecter dynamiquement des attributs d’élément à des variables, utilisez la syntaxe suivante :

%this.attributeName%

Supposons, par exemple, que vous ayez une page de résultats de recherche avec plusieurs liens vers des sites Web externes. Vous souhaitez effectuer un suivi sur le lien sur lequel les utilisateurs cliquent en renseignant dynamiquement un eVar avec le nom id de l’élément sur lequel ils cliquent.

Exemple de lien : <a id='myFirstLink' href='www.exampleLink.com'>

Pour ce faire, créez une règle basée sur un événement qui se déclenche en cliquant sur les liens de la page. Puis, dans la Analytics section de la règle, définissez l'eVar sur %this.id%.

Pour les attributs non standard, vous pouvez également exploiter la fonction JavaScript this.getAttribute() en la enveloppant dans des caractères "%", comme suit :

%this.getAttribute(attributeName)%

Supposons, par exemple, que vous ayez une page de résultats de recherche similaire à celle de l’exemple précédent. Cependant, ces liens contiennent un attribut non standard, loc que vous souhaitez définir dynamiquement sur un eVar en fonction du lien sur lequel l’utilisateur a cliqué.

Exemple de lien : <a id='myFirstLink' loc='top' href='www.exampleLink.com'>

Pour ce faire, créez une règle basée sur un événement qui se déclenche en cliquant sur les liens de la page. Puis, dans la Analytics section de la règle, définissez l'eVar sur %this.get Attribute(loc)%.

Si vous ne savez pas si l’attribut souhaité est standard ou non, consultez w3schools.com pour en savoir plus sur les attributs HTML standard. Cependant, en cas de doute, vous pouvez utiliser le format non standard, qui fonctionne dans l’un ou l’autre des scénarios. getAttribute()

Cette fonctionnalité peut être utilisée dans les champs des règles de la gestion dynamique des balises, notamment :

Variables Analytics

  • Adobe Analytics:

    • Suivi des liens, Données de page, Hiérarchie
    • Variables et Événements globaux
  • Google Analytics

    • Pages vues, Événements, Variables personnalisées

Script personnalisé

Les attributs standard peuvent également être référencés à l’aide de JavaScript standard dans du code personnalisé.

Sur cette page