Utilisation du sélecteur CSS

Utilisez sélecteur CSS pour sélectionner facilement et rapidement des éléments CSS à utiliser en tant que 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 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.

Pour plus d’informations, reportez-vous aux sections suivantes :

Exemple avec un élément unique

À 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.

L’exemple plus complexe décrit ci-après illustre l’utilisation du sélecteur CSS lorsque la page contient de nombreux éléments similaires comme des onglets dans la partie supérieure (Men’s, Women’s, Equipment, etc.).

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

  1. Accédez au widget Sélecteur CSS dans la gestion dynamique des balises en cliquant sur l’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 type d’événement Clic afin de déclencher la règle lorsque les utilisateurs cliquent sur le lien Sign In or Register (Se connecter ou s’inscrire).

  2. Indiquez l’URL du site web, puis cliquez sur Load (Charger).

    Remarque : Soyez le plus spécifique possible concernant la page web pour que le déclenchement soit le plus rapide possible. 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.

    Si cette règle était créée sans l’aide du sélecteur CSS, nous examinerions l’élément de page souhaité pour déterminer quelle feuille de style CSS utiliser. À l’aide du sélecteur CSS, cliquez sur l’élément de la page qui doit déclencher la règle.

  3. Cliquez sur Sign In or Register (Se connecter ou s’inscrire).

    Lorsque vous cliquez sur un élément de page que le sélecteur doit faire correspondre, il devient vert. Le sélecteur CSS crée ensuite un sélecteur CSS minimal pour cet élément.

    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 ? pour afficher des informations d’aide sur le sélecteur CSS.

  4. Cliquez sur Send to DTM (Envoyer à DTM) pour copier la feuille de style CSS dans le champ Balise d’élément ou sélecteur de la gestion dynamique des balises.

  5. Terminez de configurer la règle, comme le décrit la section Création de conditions pour les règles basées sur un événement.

    Sans avoir écrit de 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 sur le lien Sign In or Register (Se connecter ou s’inscrire).

Exemple avec des éléments similaires

Supposons à présent que vous souhaitez créer une règle qui se déclenche lorsque les utilisateurs cliquent sur l’onglet Men’s (Hommes) situé dans la partie supérieure du 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. Accédez au widget Sélecteur CSS dans la gestion dynamique des balises en cliquant sur l’icône lors de la création d’une règle.

  2. Indiquez l’URL du site web, puis cliquez sur Load (Charger).

  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. Le sélecteur CSS crée ensuite un sélecteur CSS minimal pour cet élément. En outre, le sélecteur surligne tous les éléments qui correspondent à l’élément en jaune. Les résultats du sélecteur CSS sont vastes. Toutefois, celui-ci vous permet par la suite de limiter votre sélection.

    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. Cliquez sur Send to DTM (Envoyer à DTM) pour copier la feuille de style CSS dans le champ Balise d’élément ou sélecteur de la gestion dynamique des balises.

  6. Terminez de configurer la règle, comme le décrit la section Création de conditions pour les règles basées sur un événement.

Limites du sélecteur CSS

Le sélecteur CSS est actuellement en version bêta et risque de ne pas fonctionner correctement pour certains sites en raison de limites techniques.