Ciblage de page
En bref
Grâce au ciblage de page, tu peux déterminer sur quelles pages de ton site web une expérience est affichée. Dans les paramètres de l'expérience, tu trouveras différentes options sous « Page targeting » pour contrôler la diffusion selon des règles. Un ciblage de page correctement configuré est également une condition préalable pour démarrer une expérience.
Options de ciblage de page
À l'aide des règles dans Page Targeting, tu détermines sur quelles pages ou quels types de pages les visiteurs deviennent des participants à l'expérience. Plusieurs méthodes sont à ta disposition pour identifier les pages de manière unique. Une expérience n'est diffusée que si les conditions définies sont remplies.
Il est également possible de relier plusieurs règles entre elles et d'utiliser des conditions AND et OR.
| Méthode | Quand cela a du sens |
|---|---|
| Règles URL | Si les pages peuvent être clairement distinguées par domaine, chemin ou paramètres, ou si seule une URL spécifique doit être ciblée. |
| Regex | Si plusieurs URLs similaires doivent être couvertes par un seul modèle. |
| Sélecteur CSS | Si tu veux cibler plusieurs pages qui ne peuvent pas être clairement distinguées via des règles URL, mais qui partagent un élément unique. |
| JavaScript | Si tu as besoin de conditions complexes allant au-delà de l'URL et du DOM, par ex. logique, états ou entrées DataLayer. |
Tu peux utiliser des règles pour définir les pages ou types de pages sur lesquels tes visiteurs deviennent des participants à l'expérience. Tu as plusieurs options pour identifier les pages.
L'utilisation du CSS Selector est utile si tu souhaites cibler plusieurs pages, mais que celles-ci ne peuvent pas être clairement identifiées via des règles d'URL.
Tu peux utiliser JavaScript pour définir des règles de ciblage plus complexes. Par exemple, tu as aussi la possibilité de vérifier des entrées DataLayer spécifiques.
Correspondance d'URL
Avec URL Match, tu utilises des règles d'URL pour définir les pages sur lesquelles ton expérience s'affiche. Tu peux combiner plusieurs règles d'URL et définir lesquelles doivent s'appliquer et lesquelles doivent être exclues.
Lier plusieurs règles d'URL
Tu peux créer plusieurs règles d'URL en même temps et les lier entre elles. Utilise le symbole plus pour ajouter d'autres règles. Utilise « correspond » ou « ne correspond pas » pour préciser si l'expérience doit être diffusée sur les URL spécifiées ou en être exclue.
Si tu veux représenter des règles plus complexes, tu peux combiner plusieurs correspondances d'URL. Par exemple, tu peux spécifier qu'une expérience s'affiche sur https://www.demo.de, sauf sur https://www.demo.de/impressum.
type de correspondance
À droite du champ de saisie, tu peux spécifier le type de correspondance de ta condition de ciblage. Selon la sélection, l'URL dans le champ de saisie situé à côté est vérifiée selon différentes conditions. Tu as le choix entre les conditions suivantes :
- Correspondance simple
- Correspondance exacte
- Contient
- Regex
Les conditions de ciblage avec des exemples d'application sont expliquées plus en détail ci-dessous.
Correspondance simple
Avec Simple Match, toutes les URL saisies sont ciblées, y compris les paramètres d'URL associés.
Dans l'exemple suivant, tu peux voir quelles variantes d'URL sont considérées comme des correspondances pour l'URL www.demo.de dans le ciblage de page « Simple Match » :
| URL | Le ciblage s'applique |
|---|---|
| www.demo.de | ✅ s'applique |
| www.demo.de#about | ✅ s'applique |
| www.demo.de?color=red | ✅ s'applique |
| www.demo.de/category | ❌ ne s'applique pas |
| www.demo.com | ❌ ne s'applique pas |
| subdomain.demo.de | ❌ ne s'applique pas |
Si tu veux cibler plusieurs pages, types de page ou sous-domaines en même temps, tu peux utiliser une regex pour cela. Le ciblage est également possible via un sélecteur CSS, par exemple si un élément spécifique est présent sur la page. Continue la lecture.
Correspondance exacte
Utilise la condition « Correspondance exacte » si le ciblage de page ne doit s'appliquer qu'à une URL spécifique, c'est-à-dire sans paramètres d'URL.
Dans l'exemple suivant, tu peux voir quelles variantes d'URL sont considérées comme correspondances pour l'URL www.demo.de dans le ciblage de page « Correspondance exacte » :
| URL | Le ciblage s'applique |
|---|---|
| www.demo.de | ✅ s'applique |
| www.demo.de#about | ❌ ne s'applique pas |
| www.demo.de?color=red | ❌ ne s'applique pas |
| www.demo.de/category | ❌ ne s'applique pas |
| www.demo.com | ❌ ne s'applique pas |
| subdomain.demo.de | ❌ ne s'applique pas |
Contient
Vous utilisez la condition de ciblage de page « Contient » si vous souhaitez cibler plusieurs pages d'un groupe spécifique. La condition préalable est que les pages puissent être délimitées à l'aide d'une structure d'URL cohérente. Par exemple, si vous souhaitez uniquement tester des pages produits, vous pouvez utiliser « Contient » avec « /products/ » pour cibler exactement ces pages. L'expression spécifiée doit apparaître au moins une fois intégralement dans l'URL.
Bien entendu, « Contient » peut également être utilisé pour cibler l'ensemble du site web (comme https://www.demo.com) — par exemple, pour un test A/A. Pour ce faire, il suffit de saisir le domaine de votre site.
Dans l'exemple suivant, vous pouvez voir différentes variantes d'URL où le ciblage de page « /products/ » s'applique.
| URL | Le ciblage s'applique |
|---|---|
| www.demo.com | ❌ ne s'applique pas |
| www.demo.com/products | ❌ ne s'applique pas |
| www.demo.com/products/t-shirts | ✅ s'applique |
| www.demo.com/products/pants | ✅ s'applique |
| www.demo.com/blog/products-reviews | ❌ ne s'applique pas |
| www.demo.com/blog/products/tests | ✅ s'applique |
Expressions régulières (Regex)
Les expressions régulières te permettent de cibler tes tests A/B sur des pages individuelles spécifiques ou des groupes de pages. Dans de nombreux cas, cette méthode est plus précise que les conditions de ciblage présentées ci-dessus.
Cette option s'adresse principalement aux utilisateurs avancés qui ont déjà de l'expérience avec les regex ou qui souhaitent définir des règles très précises. Pour te faciliter la prise en main, nous avons créé ce guide sur le ciblage de pages avec regex. Dans de nombreux cas, il suffit de copier l'un de nos exemples et de simplement remplacer ta propre URL.
Pour valider tes expressions régulières, tu peux utiliser des éditeurs de regex comme regexr.com.
Exemple de création d'une regex
Sur Plomo-o-Plata, sur toutes les pages de détail produit de la catégorie Outlet Sale, les prix soldés seront affichés en rouge. Les pages de détail produit des autres catégories doivent rester inchangées.
En utilisant une regex dans le ciblage d'URL, tu as la possibilité de mapper explicitement cette condition de ciblage.
À titre d'exemple, voici une URL qui se trouve dans la catégorie Outlet Sale.
Die Struktur der URLs ist für alle Produktdetailseiten, die in dieser Kategorie zu finden sind, gleich:
https://plomo-o-plata.de/collections/plomo-o-plata-outlet-sale/products/…
In der Tabelle Useful use cases findest du vordefinierte Regexes, die du anhand dieses Beispiels auf deine Website-URL-Struktur anwenden kannst. In unserem Fall trifft Use Case 3 zu.
-> Targeting aller Seiten, die nach dem Pfad www.demo.de/category/ sind.
-> ^.*www.demo.de/category/.+
Nous allons d'abord sur https://regexr.com/ et transférons le cas d'usage similaire.
Nous pouvons maintenant utiliser ce cas d'usage comme guide et l'appliquer à notre exemple de Plomo-o-Plata.
Sur la capture d'écran, tu peux voir comment nous avons personnalisé la regex pour notre cas d'usage. Étant donné que l'URL de Plomo-o-Plata comportait deux répertoires supplémentaires par rapport au cas d'usage, ils ont été ajoutés de manière analogue à l'exemple du cas d'usage. Un autre outil très utile pour définir des regex est : https://www.autoregex.xyz/ Ici, tu peux définir en anglais quels types de pages doivent être ciblés. L'outil convertit cette spécification en regex.
Cas d'usage utiles
| Cas d'usage | Exemple de page | Expression régulière |
|---|---|---|
| Cibler exactement une page | www.demo.de/product-list | ^.*www\.demo\.de\/product-list$ |
| Cibler exactement une page, ancres, paramètres et « / » optionnel inclus | www.demo.de/?utm_source=google_cpc | ^.*www\.demo\.de(#.*|\/#.*|$|\/$|\/\?.*) |
| Cibler toutes les pages situées dans le chemin www.demo.de/category/ | www.demo.de/category/product | ^.*www\.demo\.de\/category\/.+ |
| Ciblage global d'une page sans « www. » | demo.de/ | ^.*demo.de\/.* |
| Ciblage global sur l'ensemble du domaine www.demo.de/ | www.demo.de/ | ^.*www\.demo.de\/.* |
| Ciblage sur un sous-domaine blog.demo.de/ | blog.demo.de/category/article | ^.*blog\.demo.de\/. |
| Ciblage sur un domaine entier, sous-domaines inclus demo.de/ | blog.demo.de/category/article www.demo.de/category/product | ^.*demo.de\/.* |
| Ciblage sur deux catégories de produits spécifiques | www.demo.de/shirts/product www.demo.de/pants/product | ^.*www\.demo.de\/(shirts|pants)\/.* |
Sélecteur CSS
Cible uniquement les pages ou types de pages sur lesquels un élément spécifique avec un sélecteur CSS unique est présent. Cela est particulièrement utile si les pages ne peuvent pas être distinguées de manière fiable via des règles d'URL. Exemple : tu souhaites cibler toutes les pages de détail produit de ta boutique, mais la structure de l'URL ne contient pas de référence claire comme « /products/ ». Dans ce cas, tu peux utiliser un élément qui n'apparaît que sur les pages de détail produit, par exemple le bouton « Add to cart ». Tu enregistres ensuite le sélecteur CSS de cet élément dans Page Targeting.
La façon la plus simple de trouver un sélecteur CSS adapté se fait directement dans l'éditeur visuel Varify : ouvre une page appropriée, clique sur l'élément qui n'apparaît que sur ce type de page et copie le sélecteur CSS affiché. Tu peux ensuite l'insérer dans Page Targeting sous « CSS Selector ».
JavaScript
Pour un ciblage de page plus complexe, tu peux utiliser JavaScript. Cela te permet également de rechercher n'importe quelle balise ou attribut dans le DOM de ton site web. JavaScript permet aussi de vérifier les données provenant des variables du data layer.
Exemple d'application - Entrée de data layer
Pour cibler uniquement les utilisateurs ayant un certain paramètre ou une certaine valeur dans le data layer, tu peux naviguer à travers le data layer. Dans l'exemple suivant, seuls les utilisateurs ayant déjà consulté un produit spécifique avec l'ID 1111 ou l'ID 2222 sont ciblés.
Exemple de code - Data Layer Targeting
return dataLayer?.some(item => item?.ecommerce?.checkout?.products?.[0]?.id==='1111' || item?.ecommerce?.checkout?.products?.[0]?.id==='2222');
Paramètres avancés
Nettoyage de l'expérience lors du changement d'URL
Les sites web qui rechargent le contenu de manière dynamique - comme les applications monopages (SPA) ou les boutiques en ligne qui proposent plusieurs variantes de produit sur la page de détail du produit - se comportent différemment des pages statiques traditionnelles. Avec les pages statiques, tout le contenu est entièrement rechargé à chaque changement d'URL. Avec les SPA et les sites web dynamiques similaires, en revanche, seul le contenu qui change est mis à jour.
Comportement lors des changements d'URL
Par défaut, Varify effectue une réinitialisation de l'affichage des variantes à chaque changement d'URL, c'est-à-dire que toutes les variations sur la page sont réinitialisées, l'URL est vérifiée à nouveau et toutes les variations applicables à la nouvelle URL sont réappliquées.
Désactivation de la fonction standard
La désactivation de la fonction « Cleanup Experiment on URL change » peut être particulièrement utile sur les pages produit des boutiques en ligne où l'on peut sélectionner différentes variantes de produit comme les couleurs. Avec une telle sélection, l'URL peut changer pour refléter la couleur sélectionnée. Cependant, s'il existe une variation qui concerne un contenu qui ne change pas (par exemple, le bouton « Ajouter au panier »), il ne serait pas souhaitable de supprimer et de réappliquer cette variation. Cela pourrait entraîner des effets indésirables tels qu'un scintillement de l'écran.
Réappliquer l'expérience en cas de changement du DOM
Lorsque le paramètre est activé, le DOM du site web est surveillé en permanence pour garantir que l'optimisation de la variante reste active. Si l'optimisation est écrasée par des scripts ou des éléments de page du site web, le système le détecte et réapplique l'optimisation. Cela peut se produire, par exemple, lors du filtrage de certaines variantes de produits.
Si le paramètre est désactivé, l'optimisation n'est appliquée qu'une seule fois - aucune surveillance continue n'a lieu.