Show Menu
SUJETS×

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 Event types .
  2. Activez les options suivantes si besoin est :
    Élément
    Description
    Retard du lien
    Activez cette option si le active un lien et que vous souhaitez que le lien retarde jusqu’à ce que le ait le temps de se déclencher.
    Appliquer gestionnaire de directement à 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 et de superposition 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 où le est réellement lié et de le pour s’assurer que la règle se déclenche correctement.
    La propagation signifie que le est d’abord capturé et géré par l’élément interne le plus important, puis propagé aux é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 de est une façon de de la propagation dans 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 indésirables lorsque l’élément enfant déclenche déjà ses propres de.
    N’autorisez pas si l’élément enfant déclenche déjà des .
    Ne souhaitez pas que le du sélecteur de règles que vous avez identifié dépasse l’élément lui-même dans la hiérarchie .
    Ne pas autoriser les à buller vers les parents

Event types

de l’ intégrée et de la manière dont chacune est définie.
Catégorie
Événement
Définition
Mouse (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.
Keyboard (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 reçu le focus (il n’est pas propagé).
flou
Un élément a perdu la cible d’action (ne se propage pas).
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
terminé
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 fournies de manière inattendue.
volumechange
Le volume a changé.
% terminé
Émet un à partir d’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 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 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 de planche est effectué sur un périphérique mobile.
Browser (Navigateur)
tab focus
est déclenché lorsque le contenu devient actif.
flou de tabulation
est déclenché lorsque le contenu perd la cible d’action.
Autre
personnalisé
Un 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 le du. Si l’élément se trouve dans le immédiatement au chargement de la page, la règle se déclenche immédiatement. Si l’élément se trouve dans le 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 durée pendant laquelle l’élément doit se trouver dans le avant le déclenchement de l’ de (la valeur par défaut est 1 seconde).
element existe
Lorsqu’un élément d’un sélecteur spécifié existe, soit parce qu’il se trouve dans le balisage de la page, soit parce qu’il est 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 du fragment) à la fin de l’URL ont changé. Le pushState ou hashchange peut être utilisé avec des applications monopages (SPA) dans lesquelles une page ne se recharge pas mais où son contenu change. Les cadres de développement courants qui peuvent être utilisés pour créer des applications monopages incluent Angular et React. Ce vous permet de créer des règles basées sur les sans compter sur les développeurs. Ces règles se déclenchent lorsque des fonctions courantes se produisent dans les applications monopages, telles que : Le chemin d’accès de l’URL a changé en fonction de l’utilisation de l’ pushState API d’historique HTML5. Pour plus d’informations sur l’utilisation pushState , voir Ajout et modification d’entrées d’historique sur Mozilla Developer Network. Le hachage a changé en raison de la modification des ou des emplacements de l’utilisateur sur la page. Pour plus d’informations sur l’utilisation hashchange , voir Hashchange sur Mozilla Developer Network.
temps passé
Valeur en secondes. Le du est déclenché une fois le nombre de secondes spécifié écoulé.
dataelementchanged
Un élément de date a changé. Ce 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 Outil ContextHub d’Adobe Experience Manager.

Utilisation du sélecteur CSS

Utilisez la CSS Selector méthode pour sélectionner rapidement et facilement des éléments CSS à utiliser comme déclencheurs pour les règles basées sur des 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 possibilité de de comportements ou d’interactions de page sur votre site Web. Toutefois, trouver les éléments CSS à inclure dans vos règles est parfois difficile et prend du temps.

Exemple avec un élément unique

Par exemple, nous souhaitons 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 illustré ci-dessous. Cet exemple est simple car le lien "Se connecter ou s’inscrire" ne comporte aucun élément similaire dans la page CSS.
L’exemple le plus complexe décrit ci-dessous illustre l’utilisation de la variable lorsqu’il existe de nombreux éléments similaires sur la page, tels que les onglets en haut (Men’s, Women’s, Equipment, etc.). CSS Selector

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 qui utilise le Click 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 .
    Soyez aussi spécifique à la page Web que possible pour . Gardez à l’esprit que les feuilles de style CSS peuvent changer d’une page à l’autre, selon votre site Web et son architecture. Il est utile d’essayer de voir à quelle fréquence votre feuille de style change.
    Le site Web est maintenant chargé dans un iFrame avec le widget Sélecteur CSS intégré. Placez le pointeur de la souris sur différents éléments pour vous faire une idée du fonctionnement de l’outil.
    Si nous créons cette règle sans utiliser le CSS Selector, nous examinerons l’élément de page souhaité pour déterminer la page CSS appropriée à utiliser. A l’aide de CSS Selector, il vous suffit de cliquer sur l’élément de la page sur lequel vous souhaitez déclencher la règle.
  3. Cliquez sur Sign In or Register .
    Lorsque vous cliquez sur un élément de page que vous souhaitez que le sélecteur corresponde, il devient vert. Le CSS Selector système génère alors un sélecteur CSS minimal pour cet élément.
    Remarquez le panneau situé dans la partie inférieure 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 semblable 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. Cliquez sur ? pour des informations sur l’aide CSS Selector.
  4. Cliquez sur Send to DTM pour copier le fichier CSS dans le Element Tag or Selector champ de la gestion dynamique des balises.
  5. Terminez la configuration de la règle, comme décrit dans Création de conditions pour les règles basées sur les .
    Sans écrire aucun code ni inspecter les éléments, nous avons créé une règle basée sur les 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 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 Hommes pour le sélectionner.
    Notez que de nombreux éléments de la page sont sélectionnés et sont surlignés en jaune. Le nombre entre Clear parenthèses est 28 dans cet exemple, 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 vous souhaitez que le sélecteur corresponde, il devient vert. Le CSS Selector système génère alors 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. Le CSS Selector large, puis vous permet de restreindre 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 désormais 1.
  5. Cliquez sur Send to DTM pour copier le fichier CSS dans le Element Tag or Selector champ de la gestion dynamique des balises.
  6. Terminez la configuration de la règle, comme décrit dans Création de conditions pour les règles basées sur les .

Limites du sélecteur CSS

La CSS Selector version bêta 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 comportant plusieurs liens vers des sites Web externes. Vous souhaitez effectuer le suivi du lien sur lequel l’utilisateur clique en renseignant dynamiquement une eVar avec le nom id de l’élément sur lequel l’utilisateur clique.
Exemple de lien : <a id='myFirstLink' href='www.exampleLink.com'>
Pour ce faire, créez une règle basée sur pour déclencher un clic 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 tirer parti de la fonction JavaScript this.getAttribute() en l’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. Toutefois, ces liens contiennent un attribut non standard loc que vous souhaitez définir dynamiquement sur une 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 pour déclencher un clic 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 getAttribute() format non standard, qui fonctionne dans les deux scénarios.
Cette fonctionnalité peut être utilisée dans les champs de règle de la gestion dynamique des balises, notamment :

Variables Analytics

  • Adobe Analytics:
    • Suivi des liens, Données de page, Hiérarchie
    • Variables globales et de
  • Google Analytics
    • Pages vues, , Variables personnalisées

Script personnalisé

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