• Audience Targeting

    Kurz & Knapp

    Mit dem Audience Targeting definierst du, welche Zielgruppe Teil deines Experiments sein soll. Du kannst beispielsweise nur User targeten, die deine Webseite von einer bestimmten Quelle aus besuchen. Ebenfalls kannst du beispielsweise nur Mobile, Tabllet oder Desktop Traffic targeten. Die Anwendungsfälle sind nahezu grenzenlos.

    Das Audience Targeting kann mit Hilfe von JavaScript durchgeführt werden. Für die einzelnen Anwendungsfälle stellen wir dir hier auch entsprechende Templates bereit, mit denen du dein präferiertes Targeting umsetzen kannst.

    Technische Erklärung

    Im Audience Targeting Feld kann beliebiges JavaScript definiert werden, welches ausgeführt wird, um festzustellen ob das Targeting zutrifft. So lange der Rückgabewert falsy ist wird nach jeder Ausführung das JavaScript nochmal nach 100ms ausgeführt, so lange bis 2000ms erreicht sind. Danach wird abgebrochen und der User fällt nicht in dem Audience Targeting. Es kann auf asynchrone Eigenschaften geprüft werden indem man ein Promise zurückgibt.

    Übersicht exemplarischer Anwendungsbeispiele

    Anwendungsbeispiele

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Ad Campaign

    Targete nur User, die von einer speziellen Ad Campaign auf deine Seite kommen.

    Code Beispiel - UTM Source = ad_campaign

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

    Browser

    Targete nur User, die einen speziellen Browser nutzen.

    Code Beispiel - Google Chrome

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

    Endgeräte Targeting (Desktop, Tablet, Mobile)

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Mit nachfolgendem Code kannst du beispielsweise nur Mobile User targeten.

    Code Beispiel - Targeting: Nur Mobile Endgeräte

    				
    					return window.innerWidth < 768;
    				
    			

    Code Beispiel - Targeting: Nur Tablet Endgeräte

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

    Code Beispiel - Targeting: Nur Desktop Endgeräte

    				
    					return window.innerWidth > 1023;
    				
    			
    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Prüfe, ob deine User einen Cookie Eintrag haben und definiere nur diese User als Testteilnehmer. 

    Code Beispiel - Cookie ist gesetzt

    				
    					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;
    				
    			

    Session & Local Storage Targeting

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Prüfe, ob deine User im Session oder Local Storage einen entsprechenden Eintrag haben und definiere nur diese User als Testteilnehmer. 

    Code Beispiel - Session Storage Wert ist gesetzt

    				
    					const STORAGE_KEY = 'YOUR_SESSION_STORAGE_KEY';
    const STORAGE_VALUE = 'YOUR_SESSION_STORAGE_VALUE';
    
    return sessionStorage.get(STORAGE_KEY) === STORAGE_VALUE;
    				
    			

    Code Beispiel - Local Storage Wert ist gesetzt

    				
    					const STORAGE_KEY = 'YOUR_LOCAL_STORAGE_KEY';
    const STORAGE_VALUE = 'YOUR_LOCAL_STORAGE_VALUE';
    
    return localStorage.get(STORAGE_KEY) === STORAGE_VALUE;
    				
    			

    Event Targeting

    Polling und asynchrones JavaScript

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Prüfe auf asynchrone Eigenschaften, indem du Promises einsetzt. In dem Beispiel hier warten wir auf ein Element, was bisher noch nicht auf der Seite existiert. Sobald das Element existiert, trifft das Targeting zu.

    Code Beispiel - Targete erst dann, wenn ein Element auf der Seite ist

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

    Sprache

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Targete nur User, die eine definierte Standardsprache in ihrem Browser gesetzt haben.

    Code Beispiel - Sprache Englisch

    				
    					return navigator.language.startsWith('en');
    				
    			

    New / Returning Visitors

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Targete nur User, die schon mal deine Seite besucht oder in einem vorherigen Test vorher waren. Alternativ kannst du auch User targeten, die noch nicht auf deiner Seite oder Testteilnehmer waren.

    Code Beispiel - Retargeting Testteilnehmer aus bestimmtem Experiment - Variante gesehen

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

    Code Beispiel - Targetiere nur neue User

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

    Platform / OS

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Targete nur User, die ein bestimmtes Betriebssystem nutzen.

    Code Beispiel - Android

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

    Query Parameter

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Targete nur User, die deine Webseite über einen bestimmten Query Parameter aufrufen. Diesen Anwendungsfall kannst du beispielsweise einsetzen, um deine Variante zu testen. In diesem Beispiel wird die Variante mit dem URL Query Parameter ?varify-testing=true aufgerufen.

    Code Beispiel - ?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;
    				
    			

    Referrer URL

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Targete nur User, die deine initial aufgerufene Webseite von einem bestimmten Referrer (Quelle), aufgerufen haben.

    Code Beispiel - Referrer = https://www.google.com/

    				
    					const REFERRER_URL = 'https://www.google.com/'
    
    return document.referrer === REFERRER_URL;
    				
    			

    Traffic Ausschluss bei Experimenten

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Wenn nicht alle Besucher der targetierten Seite am Experiment teilnehmen sollen, dann kannst du mit Hilfe des nachfolgenden Codes nur einen Teil der Besucher einem Experiment zuweisen. Beispielsweise möchtest du nur, dass 10% der Seitenbesucher zu Experimentteilnehmer werden.

    Wichtig: Trage die entsprechende Experiment_ID des betroffenen Experiments ein und ersetze 1234. (Zeile 1)

    Wichtig: Möchtest du den Anteil der Teilnehmer anpassen, ändere die Zahl 10 (10%) in diesem Code auf den gewünschten Anteil, z.B. 30 (30%). (Zeile 11)

    Ein Besucher wird jetzt anhand der der eingestellten Wahrscheinlichkeit entweder dem Experiment zugeordnet oder davon ausgeschlossen. Ist er zugeordnet, wir der Wert “true” im Local Storage gespeichert und “false” wenn er ausgeschlossen wird. Das Audience Targeting spielt das Experiment nur ab, wenn im Local Storage der Wert “true” steht und der Nutzer somit als Experimentteilnehmer identifiziert wird.

    				
    					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;
    }
    				
    			

    Ob es wie gewünscht funktioniert, kannst du über die Entwicklerkonsole des Browsers checken. Gehe dazu im Tab “Application” in deinen Local Storage. Hast du das Experiment gestartet und befindest dich auf der Seite, auf der das Experiment läuft, solltest du folgendes im Local Storage sehen, je nachdem, ob du in der Teilnehmergruppe bist oder nicht:

    Teilnehmer:

    • Key: experiment-participant Value: true
    • außerdem sollte das Experiment sichtbar sein: Key: varify-experiment-1234 Value: {“variationId”:1234/Original,”timestamp”:12456789}

    Nicht Teilnehmer:

    • Key: experiment-participant Value: false
    • Werte für das Experiment sollten nicht im Local Storage zu finden sein

    Möchtest du erneut testen ob es funktioniert, um beispielsweise in die Gruppe der Teilnehmer zu kommen, musst du manuell die Einträge im Local Storage löschen. Klicke dazu auf das Symbol mit dem durchgestrichenen Kreis rechts neben dem Filter, um alle Einträge im Local Storage zu löschen und lade anschließend die Seite neu.

    Zeit oder Tag des Besuchs

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Targete nur User, die ab einem bestimmten Zeitpunkt oder beispielsweise an einem gewissen Wochentag auf deiner Seite sind. Das folgende Beispiel kannst du beispielsweise einsetzen, wenn du möchtest, dass dein Experiment erst an einem gewissen Tag zu einer bestimmten Zeit gestartet wird.

    Code Beispiel - Terminplanung Teststart

    				
    					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;
    				
    			

    Traffic Quelle

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Targete nur User, die von einer bestimmten Traffic Quelle kommen, beispielsweise Newsletter.

    Code Beispiel - 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;
    				
    			

    Campaign Booster nur einmal anzeigen

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Mit den Varify Campaign Boostern hast du die Möglichkeit, ganz einfach Banner oder Benachrichtigungen auf deiner Webseite zu integrieren. Standardmäßig werden diese bei jedem Seitenaufruf entsprechend des Page Targetings ausgespielt.

    Es kann jedoch vorkommen, dass du möchtest, dass bestimmte Elemente der Campaign Booster nur einmal angezeigt werden. Zum Beispiel soll eine Notification oder ein Exit Intent Banner nur einmal für die Nutzer sichtbar sein. Um das zu machen, kannst du das Audience Targeting und etwas JavaScript verwenden.

    Füge den folgenden JavaScript-Code im Editor zu deinem Campaign Booster-Variante hinzu:

    				
    					window.varify.helpers.isInView('.varify-exitIntent-header', () => {
        sessionStorage.setItem('exit-intent', true);
    });
    				
    			

    Durch dieses Skript wird im Browser des Nutzers ein Session Storage-Eintrag erstellt, sobald das Campaign Booster-Element einmal angezeigt wurde.

    Im Audience Targeting des Experiments fügst du den folgenden Code hinzu:

    				
    					const hasNotSeenExitIntent = !JSON.parse(sessionStorage.getItem('exit-intent'));
    
    return hasNotSeenExitIntent;
    				
    			

    Dieser Code überprüft, ob bereits ein Session Storage-Eintrag vorhanden ist. Falls ja, beispielsweise weil der Nutzer bereits eine Benachrichtigung gesehen hat, wird der Nutzer durch das Audience Targeting ausgeschlossen, und das Campaign Booster-Element wird nicht erneut angezeigt.

    Da hier die Ausschlussüberprüfung anhand eines Werts im Session Storage erfolgt, wird das Campaign Booster-Element dem Nutzer in der nächsten Browsersitzung erneut einmal angezeigt.

    Falls du möchtest, dass der Ausschluss über den Local Storage erfolgt, kannst du dieselbe Vorgehensweise verwenden, jedoch mit den folgenden Code-Elementen:

    JavaScript im Editor:

    				
    					window.varify.helpers.isInView('.varify-exitIntent-header', () => {
        localStorage.setItem('exit-intent', true);
    });
    				
    			

    JavaScript im Audience Targeting:

    				
    					const hasNotSeenExitIntent = !JSON.parse(localStorage.getItem('exit-intent'));
    
    return hasNotSeenExitIntent;
    				
    			

    Dadurch wird das Campaign Booster-Element auch Sessionübergreifend nach dem ersten mal nicht erneut ausgespielt.

    Gegenseitiger Ausschluss von Experimenten (Traffic Verteilung konfigurierbar)

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    In manchen Fällen ist es notwendig, Teilnehmer, die einem bestimmten Experiment zugeordnet sind, von einem anderen Experiment auszuschließen. Dies ist besonders relevant, wenn zwei Experimente auf denselben Seiten einer Webseite durchgeführt werden. Hierbei soll vermieden werden, dass die Ergebnisse durch die wechselseitige Beeinflussung der Experimente verfälscht werden. Es muss daher gewährleistet sein, dass Nutzer, die an einem der Experimente teilnehmen, das andere nicht einsehen können.

    Um dies zu erreichen, können bestimmte Codes in das Audience Targeting jedes Experiments eingefügt werden.

    Die hier bereitgestellten Codes weisen Nutzer mit einer Wahrscheinlichkeit von 50 Prozent einem der beiden Experimente zu und schließen gleichzeitig das jeweils andere Experiment für den Nutzer aus. Diese Verteilung kann angepasst werden, wie im Folgenden erklärt wird.

    In eines der Experimente sollte folgender Code im Audience Targeting implementiert werden:

    				
    					const PARTICIPANT_KEY = 'experiment-participant';
    // Retrieve the existing isInAudience value if it exists
    const storedIsInAudience = localStorage.getItem(PARTICIPANT_KEY);
    console.log('storedIsInAudience:', storedIsInAudience);
    if (storedIsInAudience === 'false') {
    return true;
    } else {
    return false;
    }
    				
    			

    Für das zweite Experiment ist es erforderlich, den folgenden Code einzufügen:

    Es ist wichtig zu beachten, dass die Beispiel-Experiment-ID 1234, die in der ersten Zeile des Codes steht, durch die tatsächliche ID des Experiments ersetzt werden muss, in dem dieser Code verwendet wird.

    Des Weiteren ist zu berücksichtigen, dass dieser Code standardmäßig auf eine 50:50 Verteilung der Nutzer zwischen den beiden Experimenten eingestellt ist. Falls eine andere Verteilung gewünscht wird, kann dies durch Anpassung des Wertes 50 in Zeile 9 des Codes (const isInAudience = Math.floor(Math.random() * 100) < 50;) erfolgen. Ändert man beispielsweise die 50 in 75, so werden 75% der Nutzer dem aktuellen Experiment zugeordnet und nur 25% dem anderen Experiment.

    				
    					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) < 50;
    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;
    }
    				
    			

    Targeting der Originalvarianten-Teilnehmer eines Experiments in einem zweiten Experiment

    Wichtiger Hinweis:

    Möchtest du zwei verschiedene Anwendungsbeispiele miteinander verknüpfen, bist dir jedoch unsicher über das Vorgehen? Zögere nicht, uns zu kontaktieren: https://varify.io/kontakt/

    Um sicherzustellen, dass ein zweites Experiment nur für diejenigen Nutzer ausgespielt wird, die zuvor die Originalvariante eines ersten Experiments gesehen haben, kann dies mithilfe des folgenden Codes im Audience Targeting präzise gesteuert werden. Nutzer, die die Variante des ersten Experiments bereits gesehen haben, bekommen das zweite Experiment nicht angezeigt.

    Wichtig: Die Experiment ID “1234” in Zeile 1 muss durch die entsprechende Experiment ID des ersten Experiments ersetzt werden, für das nur die Teilnehmer der Originalvariante das zweite Experiment sehen sollen.

    				
    					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;
    				
    			

    Zudem soll erwähnt sein, dass durch Anpassung des Codes auch Teilnehmer der Originalvariante ausgeschlossen und die Varianten-Teilnehmer eingeschlossen werden können.

  • Erste Schritte

    Tracking & Auswertung

    Targeting

    Advanced

    Funktionsübersicht