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).
    For more information, see Event Types .
  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.
    For example, when you click an image inside an anchor tag like <a href="abc.html"><img src="xyz.png"/></a> , you might expect the click to be associated with the anchor tag, because the tag is in the bubble stream. However, when you inspect the click in the developer tools, the click may actually affect only the <img> tag. To ensure that the event is handled correctly, associate the click with the <img> tag and do not depend on the browser to bubble up the click to a parent element. An event like a click can potentially bubble up to <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.
    See Using the CSS Selector for information about finding the correct element tag.
  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

Cette section contient la liste des types d’événement intégrés et décrit comment chaque type est défini.
Catégorie
Evénement
Définition
Souris
click
Le bouton d’un périphérique de pointage est enfoncé et relâché sur un élément.
mouseover
Un périphérique de pointage est placé sur l’élément auquel est attaché le détecteur ou sur l’un de ses enfants.
Clavier
keypress
Une touche est enfoncée. Celle-ci produit normalement une valeur de caractère (utilisez input à la place).
Formulaires
focus
Un élément est activé (il n’est pas propagé).
blur
Un élément est désactivé (il n’est pas propagé).
submit
Un formulaire est envoyé.
change
Un élément est désactivé et sa valeur a changé depuis qu’il a été activé.
Vidéo HTML5
ended
La lecture s’est arrêtée parce que la fin du fichier multimédia a été atteinte.
loadeddata
La première image du fichier multimédia a terminé de se charger.
play
La lecture a commencé.
pause
La lecture est interrompue.
stalled
L’agent utilisateur tente de récupérer les données multimédia, mais celles-ci n’arrivent pas.
volumechange
Le volume a changé.
% complete
Émet un événement selon un pourcentage spécifié de la durée totale de lecture. Par exemple, une valeur de 10 % indique que cette règle se déclenche uniquement lorsque 10 % de la durée totale de la vidéo ont été lus.
time complete
Émet un événement selon une durée spécifiée de temps de lecture. Par exemple, une valeur de 10 indique que cette règle se déclenche uniquement lorsque 10 secondes de la durée totale de la vidéo ont élé lues.
Mobile
orientationchange
L’orientation de l’appareil (portrait/paysage) a changé.
zoomchange
Lorsqu’un mouvement de pincement ou d’étirement est effectué sur un appareil mobile.
Navigateur
tab focus
L’événement est déclenché lorsque le contenu est activé.
tab blur
L’événement est déclenché lorsque le contenu n’est plus activé.
Les autres
personnalisé
Un événement personnalisé a été déclenché dans le modèle DOM. Select Custom from the Event Type drop-down list, then specify the custom event name. Pour plus d’informations, voir CustomEvent sur Mozilla Developer Network.
enters viewport
Lorsque l’élément apparaît dans l’affichage du visiteur. Si l’élément est dans l’affichage lors du chargement de la page, la règle se déclenche immédiatement. Si l’élément se trouve dans l’affichage après l’avoir fait défiler, la règle se déclenche alors. Un délai facultatif peut être spécifié dans la règle afin de déterminer combien de temps l’élément doit être dans l’affichage avant que l’événement se déclenche (la valeur par défaut est 1 seconde).
element exists
Lorsqu'un élément d'un sélecteur spécifié existe, soit parce qu'il figure dans l'annotation de page, soit lors de l'injection dynamique par la suite. 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 changé. L’événement pushState ou hashchange peut être utilisé avec des applications monopages dans lesquelles la page n’est pas rechargée mais voit son contenu changer. Angular et React font partie des infrastructures de développement courantes qui peuvent être utilisées pour créer des applications monopages. Ce type d’événement permet de créer des règles basées sur un événement sans l’aide de développeurs. Ces règles se déclenchent lorsque des fonctions courantes se produisent dans les applications monopages : Le chamin d’accès à l’URL a changé selon l’utilisation de l’API pushState HTML5 History. Pour plus d’informations sur l’utilisation de pushState , voir Adding and Modifying History Entries (en anglais) sur Mozilla Developer Network. Le hachage a changé en raison du changement par l’utilisateur des affichages ou des emplacements sur la page. Pour plus d’informations sur l’utilisation de hashchange , voir Hashchange sur Mozilla Developer Network.
time passed
Valeur exprimée en secondes. L’événement est déclenché lorsque le nombre de secondes spécifiées se sont écoulées.
dataelementchanged
Un élément de date a changé. Cet événement permet de sélectionner un élément de données spécifique à utiliser comme déclencheur. For more information on a possible use case, see Add Adobe Experience Manager ContextHub Tool .

Using the CSS selector

Use the CSS Selector to quickly and easily select CSS elements to use as triggers for event-based rules without leaving the DTM rule builder.
L’un des pricipaux avantages de la gestion dynamique des balises est la possibilité de déclencher des comportements ou des interactions de page sur votre site web. Trouver les éléments CSS souhaités à inclure dans les règles peut toutefois être difficile et prendre du temps.

Example with unique element

À titre d’exemple, nous souhaitons créer une règle qui se déclenche lorsque les utilisateurs cliquent sur le lien Sign In or Register (Se connecter ou s’inscrire) sur le site web, comme illustré ci-dessous. Cet exemple est relativement simple, car le lien Sign In or Register (Se connecter ou s’inscrire) ne dispose pas d’éléments similaires dans les feuilles CSS.
The more complex example described below illustrates how to use the CSS Selector when there are many similar elements on the page, such as the tabs along the top ("Men's," "Women's," "Equipment," and so forth).

Pour utiliser le sélecteur CSS, procédez comme suit :

  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
    In this example, we are creating an event-based rule that uses the Click event type to trigger the rule when users click the "Sign in or Register" link.
  2. Specify the website's URL, then click Load .
    Soyez aussi spécifique que possible à la page Web que vous souhaitez déclencher. Sachez que les feuilles de style CSS peuvent changer d’une page à l’autre, selon le site web et son architecture. Il est utile d’effectuer des tests pour déterminer à quel fréquence la feuille de style change.
    Le site web est à présent chargé dans un iFrame avec le widget Sélecteur CSS incorporé. Placez le pointeur sur différents éléments pour découvrir comment l’outil fonctionne.
    If we were creating this rule without using the CSS Selector, we would inspect the desired page element to determine the proper CSS to use. Using the CSS Selector, simply click the element on the page that we want to trigger the rule.
  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. The CSS Selector then generates a minimal CSS selector for that element.
    Notez le panneau 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 chiffre entre parenthèses en regard de l’option Clear (Effacer) indique le nombre d’éléments sélectionnés. Dans cet exemple, le chiffre 1 est affiché, car le lien Sgn In or Register (Se connecter ou s’incrire) est unique. Cliquez sur Clear (Effacer) pour supprimer les éléments sélectionnés. Cliquez sur Toggle Position (Changer de position) pour déplacer le panneau en haut ou en bas de l’iFrame selon vos besoins. Cliquez sur ? to view help information about the CSS Selector.
  4. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  5. Finish configuring the rule as described in Create conditions for event-based rules .
    Without writing any code or inspecting elements, we have created an event-based rule that triggers when users click Sign In or Register .

Example with similar elements

Supposons maintenant que vous souhaitiez créer une règle qui se déclenche lorsque les utilisateurs cliquent sur l'onglet Men's (Hommes) dans la partie supérieure ou sur votre site Web. La différence entre cet exemple et celui présenté plus haut est que l’onlet Men’s (Hommes) possède de nombreux éléments similaires sur la page.
  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
  2. Specify the website's URL, then click Load .
  3. Cliquez sur l’onglet Men’s (Hommes) pour le sélectionner.
    Vous pouvez remarquer que de nombreux éléments sont sélectionnés dans la page et qu’ils sont surlignés en jaune. Dans cet exemple, le chiffre entre parenthèses situé en regard de l’option Clear (Effacer) est 28, ce qui indique que 28 éléments de la page utilisent une balise "a".
    Nous souhaitons 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.
    Pointez sur un élément surligné similaire (par exemple Women’s) pour qu’il soit placé dans un cadre rouge.
    Lorsque vous cliquez sur un élément de page que le sélecteur doit faire correspondre, il devient vert. The CSS Selector then generates a minimal CSS selector for that element. En outre, le sélecteur surligne tous les éléments qui correspondent à l’élément en jaune. The CSS Selector starts out broad and then lets you narrow your selection.
    Cliquez sur un élément surligné pour le refuser (rouge) ou sur un élément non surligné pour l’ajouter (vert). Grâce à ces sélections et refus, vous pouvez obtenir le sélecteur CSS qui répond exactement à vos besoins. Si vous appuyez sur la touche Maj tout en déplaçant la souris, vous pouvez sélectionner des éléments à l’intérieur d’autres éléments sélectionnés.
  4. Cliquez sur l’élément dans le cadre rouge (Women’s) pour le désélectionner ainsi que tous les autres éléments similaires.
    Notez que le chiffre entre parenthèses situé en regard de l’option Clear (Effacer) est à présent égal à 1.
  5. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  6. Finish configuring the rule as described in Create conditions for event-based rules .

CSS Selector limitations

The CSS Selector is in Beta and might not work well for some sites due to technical limitations.

Dynamically populate 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%

Par exemple, supposons que vous avez une page des résultats de la recherche avec plusieurs liens vers des sites web externes. Vous souhaitez effectuer le suivi des liens sur lesquels les utilisateurs ont cliqué en renseignant dynamiquement une eVar avec id de l’élément sur lequel les utilisateurs ont cliqué.
Example Link: <a id='myFirstLink' href='www.exampleLink.com'>
Pour réaliser cette opération, créez une règle basée sur un événement qui se déclenche lorsque les utilisateurs cliquent sur les liens de la page. Puis, dans la section Analytics de la règle, définissez l’eVar sur %this.id% .
For non-standard attributes, you can similarly leverage the JavaScript function this.getAttribute() by wrapping it in '%' characters, as follows:
%this.getAttribute(attributeName)%

Par exemple, supposons que vous avez une page des résultats de la recherche similaire à celle de l’exemple précédent. Néanmoins, ces liens contiennent un attribut non normalisé, loc , que vous souhaitez définir dynamiquement sur une eVar en fonction du lien sur lequel les utilisateurs ont cliqué.
Example link: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>
Pour réaliser cette opération, créez une règle basée sur un événement qui se déclenche lorsque les utilisateurs cliquent sur les liens de la page. Puis, dans la section Analytics de la règle, définissez l’eVar sur %this.get Attribute(loc)% .
Si vous n’êtes pas certain si l’attribut de votre choix est normalisé ou non, reportez-vous au site w3schools.com pour en savoir plus sur les attributs HTML normalisés. En cas de doute, vous pouvez utiliser le format non normalisé getAttribute() qui fonctionne dans tous les scénarios.
Cette fonctionnalité peut être utilisée dans les champs de règle de la gestion dynamique des balises, notamment :

Analytics variables

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

Custom script

Les attributs normalisés peuvent également être référencés en utilisant JavaScript dans le code personnalisé.