Aller au contenu principal

Créer une expérimentation multi-pages

Dernière mise à jour le 22 avr. 20262 min de lecture
Table des matières
Diagramme d'une expérimentation multi-pages : trois pages en ligne A avec un en-tête vert, les mêmes trois en ligne B avec un en-tête sombre

En bref​

Si tu veux effectuer des changements simultanés sur plusieurs pages au sein d'une expérimentation, tu as besoin d'une expérimentation multi-pages. Il existe deux façons de créer ce type d'expérimentation dans Varify.io :

  1. La méthode simpleCrée plusieurs expériences séparées et relie-les entre elles.
  2. La méthode avancéeUtilise une seule expérience et contrôle les variantes à l'aide de JavaScript. Cela nécessite toutefois de bonnes connaissances en JavaScript.

Les deux approches te permettent de réaliser des expériences multi-pages efficaces, selon ton savoir-faire technique et tes besoins.

1re option : créer plusieurs expériences (débutants + avancés)​

Le moyen le plus simple de créer une expérience multi-pages consiste à créer plusieurs expériences puis à les relier entre elles. Tu peux enregistrer les modifications souhaitées dans une expérience distincte pour chaque page. Une fois toutes les expériences créées, la connexion se fait en ajoutant un JavaScript dans Audience Targeting. Ainsi, les expériences sont coordonnées efficacement et peuvent être testées sur toutes les pages.

Comment mettre en œuvre une expérience multi-pages de manière optimale :

  1. Créer une expérience par page
    Créez une expérience distincte pour chaque site web sur lequel un changement doit avoir lieu.
  2. Définir l'expérience principale
    Déterminez quelle expérience est l'expérience principale. Dans l'expérience principale, les visiteurs deviennent des participants au test. L'expérience principale est l'expérience sur la page que les participants au test voient en premier.
  3. Insérer le code pour le ciblage d'audience
    Dans toutes les expériences qui font partie de l'expérience multi-pages, mais pas dans l'expérience principale, saisissez le code suivant dans le ciblage d'audience.
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;
}
  1. Personnaliser Experiment_ID Remplacez Experiment_ID dans le code par l'ID de l'expérience principale.
  2. Personnaliser targetVariationId Associez targetVariationId dans le code à l'ID de la variante de l'expérience principale.
  3. Ajuster la répartition du trafic Pour toutes les expériences sauf l'expérience principale, réglez la répartition du trafic sur 100 % de la variante.

2ème option : Créer une expérience et utiliser JavaScript (avancé)​

Il est possible de créer une expérience multi-pages sans créer plusieurs expériences. Cependant, cela nécessite des connaissances avancées en JavaScript, car la logique d'affichage des variantes est contrôlée par votre code. Vous trouverez ci-dessous un guide étape par étape :

Comment créer une expérience multi-pages avec une seule expérience

  1. Créer une nouvelle expérience
    1. ajouter votre JavaScript à la variante, qui est exécuté en fonction de la page appelée.

Exemple :

if (window.location.href.includes('/produktseite')) {
    // Änderungen für die Produktseite
    document.querySelector('.produkt-titel').innerText = 'Neue Variante';
} else if (window.location.href.includes('/checkout')) {
    // Änderungen für die Checkout-Seite
    document.querySelector('.checkout-banner').style.display = 'none';
}
  1. Enregistrer la variante
    1. pour le ciblage de page, ajouter toutes les pages/types de page à l'expérience sur lesquelles la variante doit être affichée
Sur cette page