Ciblage d'audience

Dernière mise à jour le 24 mars 202615 min de lecture

Table des matières

• En bref
• Générateur de segments
• Conditions de ciblage d'audience
• Ciblage d'audience JavaScript (pour experts)

En bref

Avec le ciblage d'audience, tu détermines quel groupe cible participe à ton expérience. Par exemple, tu peux cibler uniquement les utilisateurs qui arrivent sur ton site via une source spécifique, ou sélectionner les utilisateurs mobile, tablette ou desktop. Les options sont très polyvalentes.

Tu crées ton ciblage d'audience dans le Segment Builder. Tu peux utiliser JavaScript pour un ciblage plus complexe. Tu trouveras ici différents modèles JavaScript pour différents cas d'usage, que tu peux utiliser pour mettre en œuvre le ciblage souhaité.

Step-by-Step TutorialAudience TargetingStart tutorial

Générateur de segments

Avec le Segment Builder dans Audience Targeting, tu détermines quels groupes d'utilisateurs participent à ton expérimentation. Si tu ne fais aucun réglage, tous les visiteurs qui remplissent les conditions du Page Targeting participeront automatiquement.

Dans l'onglet « Audience targeting », utilise « Condition + » pour ajouter de nouvelles conditions selon lesquelles ton expérimentation sera diffusée. Sélectionne une condition dans la liste. Tu peux combiner plusieurs conditions entre elles - soit avec AND, soit avec OR.

Si tu as déjà des segments enregistrés, tu peux les reprendre comme audience targeting en un clic via « Saved segment + ».

Enregistre ton audience targeting via « Save Audience Targeting » afin qu'elle soit active pour l'expérimentation. Tu peux modifier l'audience targeting à tout moment.

Enregistrer des segments (facultatif)

Une fois que tu as créé ton audience, tu peux éventuellement l'enregistrer en tant que segment et la réutiliser plus tard dans d'autres expériences. Cela te permet de définir ton audience une seule fois puis de la sélectionner à nouveau en tant que segment, encore et encore.

Pour enregistrer un ciblage d'audience défini en tant que segment, ouvre le menu déroulant à côté de « Save audience targeting ». Sélectionne ensuite « Save targeting segment » pour enregistrer le ciblage en tant que segment.

Conditions de ciblage d'audience

Dans le ciblage d'audience, tu disposes de différentes méthodes pour diffuser ton expérimentation et créer des segments. Dans cette liste, tu trouveras un aperçu de toutes les méthodes de ciblage. Tu peux également les combiner entre elles - soit avec ET, soit avec OU.

Méthode	Description (avec exemple)
Browser	Afficher une expérimentation uniquement pour les utilisateurs de certains navigateurs afin de tester des effets ou des différences d'affichage spécifiques au navigateur. Exemple : Les utilisateurs avec le navigateur Safari participent à l'expérimentation.
Browser Language	Diffuser des expérimentations en fonction de la langue du navigateur définie afin d'afficher les variantes dans la langue appropriée. Exemple : Les utilisateurs avec la langue de navigateur allemande verront la version allemande.
Cookie	Cibler des expérimentations en fonction des cookies existants afin de diffuser des variantes selon les états des utilisateurs. Exemple : Les utilisateurs avec un cookie de panier d'achat voient une expérimentation avec des offres ciblées de panier d'achat.
Device	Limiter une expérimentation à certains types d'appareils afin de tester des variantes optimisées par appareil. Exemple : Les utilisateurs sur appareils mobiles participent à l'expérimentation.
Platform	N'exécuter une expérimentation que sur certaines plateformes/systèmes d'exploitation afin de tenir compte des différences spécifiques à la plateforme. Exemple : Les utilisateurs sur Android participent à l'expérimentation.
Geolocation	Cibler des expérimentations selon la localisation afin de tester des variantes régionales ou du contenu localisé. Exemple : Les utilisateurs d'Allemagne participent à l'expérimentation.
IP	Inclure ou exclure certaines IP d'une expérimentation, par exemple pour l'AQ ou pour exclure les accès internes des données. Exemple : Les utilisateurs avec l'IP 123.123.123.123 sont exclus de l'expérimentation.
Local Storage	N'exécuter une expérimentation que si une certaine valeur de stockage local est disponible afin d'utiliser des états d'utilisateurs récurrents. Exemple : Les utilisateurs avec la valeur localStorage experiment=true participent à l'expérimentation.
Session Storage,	Cibler une expérimentation à l'aide d'une valeur de stockage de session qui ne s'applique qu'à la session en cours. Exemple : Les utilisateurs avec la valeur sessionStorage experiment=true participent à l'expérimentation.
URL Query Parameter	Exécuter une expérimentation uniquement pour les utilisateurs ayant certains paramètres d'URL afin de tester le trafic de campagne de manière ciblée. Exemple : Les utilisateurs avec ?campaign=blackfriday participent à l'expérimentation.
URL referrer	Afficher une expérimentation en fonction du référent afin de tester les utilisateurs différemment selon la source du trafic. Exemple : Les utilisateurs qui viennent de google.com participent à l'expérimentation.
JavaScript	Utiliser JavaScript pour un ciblage d'audience plus complexe ou si aucune des autres méthodes n'est possible. Le ciblage est actif si l'instruction return renvoie true. Exemple : Les utilisateurs participent à l'expérimentation si une entrée spécifique du data layer est disponible (autres exemples d'application JavaScript).

Ciblage d'audience JavaScript (pour experts)

Pour un ciblage d'audience plus complexe ou si ton ciblage ne peut pas être implémenté avec les autres méthodes du Segment Builder, tu peux utiliser JavaScript. Le ciblage est actif si ton instruction return renvoie true.

Vous trouverez ci-dessous divers exemples d'application.

Exemples d'application JavaScript

important

Remarque : Tu peux également implémenter facilement certains de ces exemples d'application à l'aide des autres méthodes de ciblage dans le Segment Builder.

Visiteurs et comportement

Langue et région

Cible uniquement les utilisateurs ayant défini une langue par défaut spécifique dans leur navigateur. Tu trouveras ici tous les codes de langue ISO pris en charge.

Exemple de code - Langue anglais

return navigator.language.startsWith('en');
``` Only target users who are in a specific country. Here you can find all supported [ISO County Codes](/iso-country-codes/). 

Exemple de code - Langue anglais & Région USA 

```javascript showLineNumbers
return navigator.language.startsWith('en-US');

Nouveaux visiteurs / Visiteurs récurrents

Cible uniquement les utilisateurs ayant déjà visité ton site ou ayant participé à un test précédent. Tu peux également, à l'inverse, cibler les utilisateurs qui ne se sont pas encore rendus sur ton site ou n'ont pas participé au test.

Pour pouvoir reconnaître les utilisateurs ayant déjà visité ton site web, il est nécessaire de créer au préalable une expérience distincte utilisée exclusivement pour marquer ces utilisateurs. Dans ton expérience réelle, tu peux alors inclure spécifiquement uniquement les utilisateurs ayant vu ou n'ayant pas vu l'expérience précédente.

Insère l'extrait de code correspondant dans le ciblage d'audience de ton expérience et saisis l'ID de l'expérience distincte dans le champ « YOUR_EXPERIMENT_ID ».

Exemple de code - reciblage d'un participant au test à partir d'une expérience spécifique - variante vue

const EXPERIMENT_ID = 'YOUR_EXPERIMENT_ID';

const storageValue = localStorage.getItem(`varify-experiment-${EXPERIMENT_ID}`);
return JSON.parse(storageValue)?.variationId === Number(EXPERIMENT_ID);

Exemple de code - Cibler uniquement les nouveaux utilisateurs

const EXPERIMENT_ID = 'YOUR_EXPERIMENT_ID';

return !localStorage.getItem(`varify-experiment-${EXPERIMENT_ID}`);

Heure ou jour de la visite

Cible uniquement les utilisateurs présents sur ton site à un certain moment ou, par exemple, à un jour donné de la semaine. Par exemple, tu peux utiliser l'exemple suivant si tu veux que ton expérience démarre à un jour et une heure précis.

Exemple de code - Planification du démarrage du test

const currentDate = new Date();
const specificDate = new Date('2024-01-01T10:00:00'); // ISO format for 10:00 on 01.01.2024

return currentDate > specificDate;

Ciblage par événement

Polling et JavaScript asynchrone

Vérifiez les propriétés asynchrones en utilisant des promises. Dans l'exemple ici, nous attendons un élément qui n'existe pas encore sur la page. Une fois que l'élément existe, le ciblage s'applique.

Exemple de code - Cibler uniquement lorsqu'un élément est sur la page

return new Promise(resolve => {
    window.varify.helpers.waitFor('.class', () => resolve(true))
})

Exemple de code - Gérer le polling avec des Promises

Cela démarre la requête pendant 2 secondes, comme ce serait le cas si false (sans promises) était retourné.

return new Promise((resolve, reject) => {
    resolve(false)
});

Ne démarre pas de requête, ou termine une boucle de requête existante et ignore cette expérience

return new Promise((resolve, reject) => {
    reject()
});

Entrée du data layer

Pour cibler uniquement les utilisateurs ayant un certain paramètre ou une certaine valeur dans le data layer, tu peux naviguer dans 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 - Ciblage par Data Layer

return dataLayer?.some(item => item?.ecommerce?.checkout?.products?.[0]?.id==='1111' || item?.ecommerce?.checkout?.products?.[0]?.id==='2222');

Ciblage technique et par appareil

Navigateur

Cible uniquement les utilisateurs qui utilisent un navigateur spécifique.

Exemple de code - Google Chrome

return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

Ciblage des appareils (ordinateur de bureau, tablette, mobile)

Par exemple, avec le code suivant tu peux cibler uniquement les utilisateurs mobiles.

Exemple de code - Ciblage : appareils mobiles uniquement

return window.innerWidth < 768;

Exemple de code - Ciblage : appareils tablettes uniquement

return window.innerWidth > 768 && window.innerWidth < 1024;

Exemple de code - Ciblage : appareils de bureau uniquement

return window.innerWidth > 1023;

Plateforme / OS

Cible uniquement les utilisateurs qui utilisent un système d'exploitation spécifique.

Exemple de code - Android

return /Android/i.test(navigator.userAgent);

Gestion des campagnes et des expériences

Campagne publicitaire

Cible uniquement les utilisateurs qui viennent sur ton site depuis une campagne publicitaire spécifique.

Exemple de code - UTM Source = ad_campaign

const AD_CAMPAIGN = 'YOUR_AD_CAMPAIGN_HERE';

return new URL(window.location).searchParams.get('utm_source') === AD_CAMPAIGN;

Afficher une seule fois l'expérience ou le booster de campagne

Si tu veux empêcher les utilisateurs de revoir une expérience ou un booster de campagne après l'avoir déjà vu, tu peux facilement le mettre en place à l'aide du ciblage d'audience.

Pour cela, nous utilisons le session storage pour un affichage unique par session, ou le local storage pour un affichage unique sur plusieurs sessions. Lors du premier affichage de l'expérience, une entrée correspondante est créée dans le storage, puis nous vérifions si cette entrée existe déjà lors de la tentative suivante. Si c'est le cas, l'expérience n'est pas affichée à nouveau.

Session Storage - affichage unique par session

Ajoute ce code au JavaScript de ta variante à l'aide de l'éditeur. Il est préférable de remplacer l'ID d'expérience 1234 dans « experiment-seen-1234 » par l'ID de ton expérience.

window.varify.helpers.onDomLoaded(() => {
  sessionStorage.setItem('experiment-seen-1234', 'true');
});

Ajoute ensuite ce code au ciblage d'audience de l'expérimentation. Cela vérifie si l'entrée du session storage existe déjà et exécute ou bloque l'expérimentation en conséquence.

// Check if 'experiment-seen-1234' is not in session storage
return sessionStorage.getItem('experiment-seen-4374') === null;

Si l'entrée experiment-seen-1234 avec la valeur true existe dans le session storage, l'expérimentation n'est plus diffusée.

Local Storage - Diffusion unique sur plusieurs sessions

Ajoute ce code au JavaScript de ta variante à l'aide de l'éditeur. Il est préférable de remplacer l'ID d'expérimentation 1234 dans « experiment-seen-1234 » par l'ID de ton expérimentation.

window.varify.helpers.onDomLoaded(() => {
  localStorage.setItem('experiment-seen-1234', 'true');
});

Ajoute ensuite ce code au ciblage d'audience de l'expérimentation. Cela vérifie si l'entrée du Local Storage existe déjà et exécute ou bloque l'expérimentation en conséquence.

// Check if 'experiment-seen-1234' is not in local storage
return localStorage.getItem('experiment-seen-4374') === null;

Si l'entrée experiment-seen-1234 avec la valeur true existe dans le session storage, l'expérience n'est plus jouée.

Exclusion du trafic pour les expériences

Si tu ne veux pas que tous les visiteurs de la page ciblée participent à l'expérience, tu peux alors n'assigner qu'une partie des visiteurs à une expérience à l'aide du code suivant. Par exemple, tu veux que seulement 30 % des visiteurs de la page deviennent participants à l'expérience.

Important : saisis l'Experiment_ID correspondant de l'expérience concernée et remplace 1234 (ligne 1).

Important : si tu veux ajuster la proportion de participants, modifie le nombre 10 (10 %) dans ce code par la proportion souhaitée, par exemple 30 (30 %). (ligne 11)

Un visiteur est désormais soit assigné à l'expérience, soit exclu de l'expérience en fonction de la probabilité définie. S'il est assigné, la valeur "true" est enregistrée dans le local storage, et "false" s'il est exclu. Audience Targeting ne joue l'expérience que si la valeur "true" se trouve dans le Local Storage et que l'utilisateur est donc identifié comme participant à l'expérience.

const EXPERIMENT_ID = 1234;
const STORAGE_KEY_PREFIX = 'varify-experiment-';
const specificStorageKey = STORAGE_KEY_PREFIX + EXPERIMENT_ID;
const PARTICIPANT_KEY = 'experiment-participant';

// Retrieve the existing isInAudience value if it exists
const storedIsInAudience = localStorage.getItem(PARTICIPANT_KEY);

// If the isInAudience value is not set, determine it and store it
if (storedIsInAudience === null) {
    const isInAudience = Math.floor(Math.random() * 100) < 10;
    console.log("99");
    localStorage.setItem(PARTICIPANT_KEY, isInAudience ? 'true' : 'false');
} 

// Check if the specific experiment ID entry exists in localStorage
const isExperimentStored = localStorage.getItem(specificStorageKey) !== null;

if (!isExperimentStored) {
    if (localStorage.getItem(PARTICIPANT_KEY) === 'true') {

        // Set the PARTICIPANT_KEY to true once the specificStorageKey is set
        localStorage.setItem(PARTICIPANT_KEY, 'true');

        // Return true
        console.log("true");
        return true;
    } else {
        // If the participant is not in the audience, return false
        console.log("false");
        return false;
    }
} else {
    // If the specific experiment ID entry exists, return true
    console.log("true");
    return true;
}

Tu peux vérifier si cela fonctionne comme souhaité via la console développeur du navigateur. Pour cela, va dans ton local storage dans l'onglet "Application". Une fois que tu as démarré l'expérience et que tu te trouves sur la page où l'expérience est en cours, tu devrais voir ce qui suit dans le local storage, selon que tu fais partie du groupe de participants ou non :

Participants :

• Clé : experiment-participant Valeur : true
• L'expérience devrait également être visible : Clé : varify-experiment-1234 Valeur : {"variationId":1234/Original, "timestamp":12456789}

Ne participe pas :

• Clé : experiment-participant Valeur : false
• Les valeurs pour l'expérience ne doivent pas se trouver dans le Local Storage

Si tu veux tester à nouveau si cela fonctionne, par exemple pour intégrer le groupe des participants, tu dois supprimer manuellement les entrées dans le Local Storage. Pour ce faire, clique sur l'icône avec le cercle barré à droite du filtre pour supprimer toutes les entrées du Local Storage, puis recharge la page.

Exclusion mutuelle des expériences (répartition du trafic configurable)

Dans certains cas, il est nécessaire d'exclure les participants assignés à une expérience particulière d'autres expériences. Ceci est particulièrement pertinent lorsque deux expériences ou plus sont menées sur les mêmes pages d'un site web. Cela permet d'éviter que les résultats ne soient faussés par une influence mutuelle entre les expériences.

Dans le code suivant, vous trouverez les deux constantes en haut, EXPERIMENTS et ALLOCATIONS.

• EXPERIMENTSSaisissez les ID des expériences concernées qui doivent s'exclure mutuellement (par exemple : 10201, 12345, 11456). Au moins deux ID d'expérience doivent être saisis, le nombre maximum est illimité.
• ALLOCATIONSVous définissez ici la répartition du trafic entre les expériences. Avec une saisie de [25, 50, 25] comme dans l'exemple sous EXPERIMENTS, 25 % des utilisateurs verraient l'expérience 10201, 50 % verraient l'expérience 12345 et 25 % verraient l'expérience 11456.

Veuillez insérer le code suivant dans chacune des expériences qui doivent être mutuellement exclusives. Assurez-vous d'entrer la constante EXPERIMENTS avant de démarrer le test et que exactement le même code est inséré pour chaque expérience.

const EXPERIMENTS = [205, 206, 207, 208]; // Participating experiments in this cluster
const ALLOCATIONS = [25, 25, 25, 25]; // Has to sum up to 100 and be the same length as EXPERIMENTS
const PARTICIPANT_KEY = 'experiment-participant-1'; // should be unique per experiment-cluster
const STORAGE = window.localStorage; // or window.sessionStorage

const storedIsInAudience = STORAGE.getItem(PARTICIPANT_KEY);
if (storedIsInAudience === null) {
  let randomNumber = Math.floor(Math.random() * 100);
  const selectedExperiment = EXPERIMENTS.find((_, index) => {
    const allocation = ALLOCATIONS[index];
    if (randomNumber < allocation) {
      return true;
    }
    randomNumber -= allocation;
    return false;
  });

  STORAGE.setItem(PARTICIPANT_KEY, selectedExperiment);
}

const specificStorageKey = `varify-experiment-${experimentId}`;
const isExperimentStored = STORAGE.getItem(specificStorageKey) !== null;
if (isExperimentStored) {
  console.log('true');
  return true;
}
if (STORAGE.getItem(PARTICIPANT_KEY) === experimentId.toString()) {
  console.log('true');
  return true;
}
console.log('false');
return false;

Cibler les participants de la variante originale d'une expérience dans une seconde expérience

important

Remarque importante :
Tu veux utiliser deux exemples de cas d'usage différents ensemble, mais tu ne sais pas comment faire ? N'hésite pas à nous contacter : https://varify.io/contact/

Pour garantir qu'une deuxième expérience ne soit montrée qu'aux utilisateurs ayant déjà vu la version originale d'une première expérience, cela peut être contrôlé précisément dans le ciblage d'audience à l'aide du code suivant. Les utilisateurs ayant déjà vu la variante de la première expérience ne verront pas la deuxième expérience.

Important : l'ID d'expérience « 1234 » à la ligne 1 doit être remplacé par l'ID d'expérience correspondant de la première expérience pour laquelle seuls les participants de la variante originale doivent voir la deuxième expérience.

const EXPERIMENT_ID = 1234;
const STORAGE_KEY_PREFIX = 'varify-experiment-';
const specificStorageKey = STORAGE_KEY_PREFIX + EXPERIMENT_ID;

// Retrieve the value for specificStorageKey
const storedValue = localStorage.getItem(specificStorageKey);

if (storedValue) {
    // Parse the stored JSON string
    const storedData = JSON.parse(storedValue);

    // Check if variationId is null
    if (storedData.variationId === null) {
        //console.log('True - variationId is null');
        return true;
    }
}

// Default return if condition is not met
//console.log('False - variationId is not null or specificStorageKey does not exist');
return false;

Il convient également de mentionner qu'en adaptant le code, les participants de la variante originale peuvent aussi être exclus et les participants de la variante inclus. Le point suivant te montre comment procéder.

Expériences multi-pages - Ciblage d'une variante spécifique - Participants d'une expérience dans une seconde expérience

La meilleure façon de configurer des Multi Page Experiments est la suivante.

1. crée une expérience par site web sur lequel un changement de variante doit avoir lieu.

2. définis quelle est l'expérience primaire. L'expérience primaire est l'expérience sur la page de laquelle tes visiteurs doivent devenir participants au test.

3. ajoute le code suivant dans Audience Targeting dans toutes les expériences du Multi Page Experiment, sauf dans l'expérience primaire.

4. remplacez l'Experiment_ID par l'ID de votre expérience principale

5. remplacez le targetVariationId par l'ID de variation de votre expérience principale.

6. pour toutes les expériences sauf l'expérience principale, réglez la répartition du trafic sur 100 % de la variante

const EXPERIMENT_ID = 13013; // Change this to the experiment ID you're interested in
const STORAGE_KEY_PREFIX = 'varify-experiment-';
const specificStorageKey = STORAGE_KEY_PREFIX + EXPERIMENT_ID;
const targetVariationId = 17347; // The specific variation ID to check for

// Retrieve the value for specificStorageKey
const storedValue = localStorage.getItem(specificStorageKey);

if (storedValue) {
    // Parse the stored JSON string
    const storedData = JSON.parse(storedValue);

    // Check if the current user has the specific variation ID
    if (storedData.variationId === targetVariationId) {
        console.log('User has the specific variation ID');
        return true;
    } else {
        console.log('User does not have the specific variation ID');
        return false;
    }
} else {
    console.log('No data found for this experiment ID');
    return false;
}

Source de trafic et contenu

URL de référence

Cible uniquement les utilisateurs ayant visité ton site web initial depuis un référent (source) spécifique.

Exemple de code - Referrer = https://www.google.com/

const REFERRER_URL = 'https://www.google.com/'

return document.referrer === REFERRER_URL;

Source de trafic

Cible uniquement les utilisateurs provenant d'une source de trafic spécifique, comme les newsletters.

Exemple de code - Newsletter

const QUERY_PARAM_KEY = 'source'
const QUERY_PARAM_VALUE = 'newsletter'

const params = new URLSearchParams(window.location.search);
return params.get(QUERY_PARAM_KEY) === QUERY_PARAM_VALUE;

Ciblage par cookie

Vérifie si tes utilisateurs ont une entrée de cookie et définis uniquement ces utilisateurs comme participants au test.

Exemple de code - le cookie est défini

const COOKIE_KEY = 'YOUR_COOKIE_KEY_HERE';
const COOKIE_VALUE = 'YOUR_COOKIE_VALUE_HERE';

const cookies = document.cookie.split(/\s*;\s*/)
  .map(cookie => cookie.split('='));

return Object.fromEntries(cookies)[COOKIE_KEY] === COOKIE_VALUE;

Ciblage par Session & Local Storage

Vérifie si tes utilisateurs ont une entrée correspondante dans le Session ou le Local Storage et définis uniquement ces utilisateurs comme participants au test.

Exemple de code - La valeur Session Storage est définie

const STORAGE_KEY = 'YOUR_SESSION_STORAGE_KEY';
const STORAGE_VALUE = 'YOUR_SESSION_STORAGE_VALUE';

return sessionStorage.getItem(STORAGE_KEY) === STORAGE_VALUE;

Exemple de code - La valeur Local Storage est définie

const STORAGE_KEY = 'YOUR_LOCAL_STORAGE_KEY';
const STORAGE_VALUE = 'YOUR_LOCAL_STORAGE_VALUE';

return localStorage.getItem(STORAGE_KEY) === STORAGE_VALUE;

Paramètres de requête

Cible uniquement les utilisateurs qui visitent ton site web à l'aide d'un paramètre de requête spécifique. Tu peux utiliser ce cas d'usage, par exemple, pour tester ta variante. Dans cet exemple, la variante est appelée avec le paramètre de requête d'URL ?varify-testing=true.

Exemple de code - ?varify-testing=true

const QUERY_PARAM_KEY = 'varify-testing'
const QUERY_PARAM_VALUE = 'true'

const params = new URLSearchParams(window.location.search);
return params.get(QUERY_PARAM_KEY) === QUERY_PARAM_VALUE;

Variable JavaScript avec une valeur spécifique

Tu peux utiliser le code suivant dans Audience Targeting pour spécifier qu'une expérience n'est jouée que si une variable JavaScript a une certaine valeur.

Important : remplace « myVariable » par le nom de variable correspondant et « myValue » par la valeur de variable correspondante. (Note également si la valeur est une chaîne de caractères, un entier, un booléen, etc. et adapte la vérification si nécessaire).

return window.myVariable === 'myValue';

Sélecteur de classe CSS

Tu souhaites uniquement jouer ou bloquer une expérience si un élément avec une classe CSS spécifique est présent sur la page ? Les exemples de code suivants t'aideront.

Remplacez CSS_CLASS_NAME simplement par le nom de classe correspondant sur lequel vous souhaitez cibler l'expérience.

Afficher l'expérience si la classe CSS existe

//Include experiement when CSS class exists on page
const className = 'CSS_CLASS_NAME';
return (document.querySelector('.' + className) !== null);

Ne pas afficher l'expérience si la classe CSS existe

//Exclude experiement when CSS class exists on page
const className = 'CSS_CLASS_NAME';
return !(document.querySelector('.' + className) !== null);

Combiner des exemples d'application JavaScript entre eux

Tu peux facilement combiner différents scénarios d'application entre eux. Pour cela, tu enregistres d'abord les valeurs de retour des exemples d'application dans tes propres variables. Tu peux ensuite lier ces variables dans une valeur de retour générale avec un opérateur logique (AND, OR), qui garantit ensuite que l'audience targeting affiche ou bloque l'expérience.

La question ici est de savoir si les conditions de ciblage d'audience des cas d'usage liés doivent être remplies en même temps (ET), ou s'il suffit qu'une seule condition soit remplie (OU). Tu trouveras des exemples ci-dessous.

Toutes les conditions doivent être remplies (ET)

Un cas d'usage classique pour cet exemple serait qu'une expérience ne doit être diffusée que pour les utilisateurs mobiles. Cependant, tu souhaites également effectuer le contrôle qualité via le session storage.

L'expérience ne doit être diffusée que si le session storage de QA existe ET que la largeur d'affichage correspond à un appareil mobile.

//Audience Targeting for QA with Session Storage
const STORAGE_KEY = 'varify-test';
const STORAGE_VALUE = 'true';
let isValueMatched = sessionStorage.getItem(STORAGE_KEY) === STORAGE_VALUE;

//Audience Targeting for mobile users
let mobileWidth = window.innerWidth < 768;

// //Combined with AND operator. Return true if both variables are true.
return isValueMatched && mobileWidth;

• Dans l'exemple d'application pour le QA avec session storage, le return crée une variable (let isValueMatched =)
• De même pour le return du code de ciblage d'audience mobile (let mobileWidth =)
• Tu peux définir les noms de variables toi-même, mais ils doivent être différents
• Une nouvelle ligne avec « return » a été ajoutée, dans laquelle les deux variables sont liées avec une condition ET -> &&

L'expérimentation n'est affichée que si les deux variables ont la valeur true.

Une condition doit être remplie (OR)

Parfois, cependant, tu souhaites aussi combiner des scénarios de ciblage d'audience où toutes les conditions ne doivent pas être remplies. Dans ce cas, les variables sont liées avec un opérateur OR.

Un exemple serait si tu souhaites diffuser une expérimentation uniquement aux visiteurs d'une certaine campagne ou d'un certain référent. Pour cela, les deux scénarios doivent être liés avec un OR.

//Audience Targeting for Specific Campaign
const AD_CAMPAIGN = 'YOUR_AD_CAMPAIGN_HERE';
let specificCampaign = new URL(window.location).searchParams.get('utm_source') === AD_CAMPAIGN;

//Audience Targeting for Specific Referrer
const REFERRER_URL = 'https://www.google.com/'
let specificReferrer = document.referrer === REFERRER_URL;

//Combined with OR operator
return specificCampaign || specificCampaign;

• À partir du return du scénario de campagne, une variable (let specificCampaign =) créée
• À partir du return du scénario de référent, la variable (let specificReferrer =) créée
• Une nouvelle requête return a été créée à partir des deux variables avec un opérateur OR || créé

Si au moins une des deux variables contient la valeur true, l'expérience est jouée.

Explication technique

N'importe quel JavaScript peut être défini dans le champ Audience Targeting, qui sera exécuté pour déterminer si le ciblage s'applique. Tant que la valeur de retour falsy est exécutée, le JavaScript est rechargé après chaque exécution. 100 ms exécutées jusqu'à ce que 2000 ms soient atteintes. Après cela, l'exécution est annulée et l'utilisateur ne tombe pas dans le ciblage d'audience. Il est possible de vérifier des propriétés asynchrones en utilisant un retour Promise.

Si une expérience doit être jouée sans ciblage d'audience, tu dois laisser la valeur par défaut (return true;) comme indiqué dans la capture d'écran.

Remarque : Varify décline toute responsabilité quant au fonctionnement du code et des informations.
Il est de la responsabilité de l'utilisateur de tester le code minutieusement et de l'implémenter correctement.