Zielgruppen-Targeting

Zuletzt aktualisiert am 24. März 202613 Min. Lesezeit

Inhaltsverzeichnis

• Kurz gesagt
• Segment-Builder
• Bedingungen für Zielgruppen-Targeting
• JavaScript Zielgruppen-Targeting (für Experten)

Kurz gesagt

Mit Zielgruppen-Targeting bestimmst du, welche Zielgruppe an deinem Experiment teilnimmt. Du kannst zum Beispiel nur Nutzer ansprechen, die über eine bestimmte Quelle auf deine Website kommen, oder Mobile-, Tablet- oder Desktop-Nutzer auswählen. Die Möglichkeiten sind sehr vielseitig.

Du erstellst dein Zielgruppen-Targeting im Segment Builder. Für komplexeres Targeting kannst du JavaScript verwenden. Hier findest du verschiedene JavaScript-Vorlagen für unterschiedliche Anwendungsfälle, mit denen du dein gewünschtes Targeting umsetzen kannst.

Step-by-Step TutorialAudience TargetingStart tutorial

Segment-Builder

Mit dem Segment Builder im Audience Targeting bestimmst du, welche Nutzergruppen an deinem Experiment teilnehmen. Wenn du keine Einstellungen vornimmst, nehmen automatisch alle Besucher teil, die die Bedingungen aus dem Page Targeting erfüllen.

Im Tab „Audience targeting“ fügst du über „Condition +“ neue Bedingungen hinzu, nach denen dein Experiment ausgespielt wird. Wähle eine Bedingung aus der Liste aus. Du kannst mehrere Bedingungen miteinander kombinieren - entweder mit AND oder OR.

Wenn du bereits Segmente gespeichert hast, kannst du diese mit einem Klick über „Saved segment +“ als Audience Targeting übernehmen.

Speichere dein Audience Targeting über „Save Audience Targeting“, damit es für das Experiment aktiv ist. Du kannst das Audience Targeting jederzeit bearbeiten.

Segmente speichern (optional)

Sobald du deine Audience erstellt hast, kannst du sie optional als Segment speichern und später in anderen Experimenten wiederverwenden. So kannst du deine Audience einmal definieren und dann immer wieder als Segment auswählen.

Um ein definiertes Audience-Targeting als Segment zu speichern, öffne das Dropdown neben „Save audience targeting“. Wähle dann „Save targeting segment“, um das Targeting als Segment zu speichern.

Bedingungen für Zielgruppen-Targeting

Beim Zielgruppen-Targeting stehen dir verschiedene Methoden zur Verfügung, um dein Experiment auszuspielen und Segmente zu erstellen. In dieser Liste findest du eine Übersicht über alle Targeting-Methoden. Du kannst sie auch miteinander kombinieren - entweder mit UND oder ODER.

Methode	Beschreibung (inkl. Beispiel)
Browser	Zeige ein Experiment nur für Nutzer bestimmter Browser an, um browserspezifische Effekte oder Darstellungsunterschiede zu testen. Beispiel: Nutzer mit dem Safari-Browser nehmen am Experiment teil.
Browser Language	Spiele Experimente basierend auf der eingestellten Browsersprache aus, um Varianten in der passenden Sprache anzuzeigen. Beispiel: Nutzer mit deutscher Browsersprache sehen die deutsche Version.
Cookie	Ziele Experimente basierend auf vorhandenen Cookies aus, um Varianten abhängig von Nutzerzuständen auszuspielen. Beispiel: Nutzer mit einem Warenkorb-Cookie sehen ein Experiment mit gezielten Warenkorb-Angeboten.
Device	Beschränke ein Experiment auf bestimmte Gerätetypen, um optimierte Varianten pro Gerät zu testen. Beispiel: Nutzer auf mobilen Geräten nehmen am Experiment teil.
Platform	Führe ein Experiment nur auf bestimmten Plattformen/Betriebssystemen aus, um plattformspezifische Unterschiede zu berücksichtigen. Beispiel: Nutzer auf Android nehmen am Experiment teil.
Geolocation	Ziele Experimente nach Standort aus, um regionale Varianten oder lokalisierte Inhalte zu testen. Beispiel: Nutzer aus Deutschland nehmen am Experiment teil.
IP	Schließe bestimmte IPs in ein Experiment ein oder aus, z. B. für QA oder um internen Zugriff aus den Daten auszuschließen. Beispiel: Nutzer mit der IP 123.123.123.123 werden vom Experiment ausgeschlossen.
Local Storage	Führe ein Experiment nur aus, wenn ein bestimmter Local-Storage-Wert vorhanden ist, um wiederkehrende Nutzerzustände zu nutzen. Beispiel: Nutzer mit dem localStorage-Wert experiment=true nehmen am Experiment teil.
Session Storage,	Ziele ein Experiment mithilfe eines Session-Storage-Werts aus, der nur für die aktuelle Sitzung gilt. Beispiel: Nutzer mit dem sessionStorage-Wert experiment=true nehmen am Experiment teil.
URL Query Parameter	Führe ein Experiment nur für Nutzer mit bestimmten URL-Parametern aus, um Kampagnen-Traffic gezielt zu testen. Beispiel: Nutzer mit ?campaign=blackfriday nehmen am Experiment teil.
URL referrer	Zeige ein Experiment abhängig vom Referrer an, um Nutzer je nach Traffic-Quelle unterschiedlich zu testen. Beispiel: Nutzer, die von google.com kommen, nehmen am Experiment teil.
JavaScript	Nutze JavaScript für komplexeres Zielgruppen-Targeting oder wenn keine der anderen Methoden möglich ist. Das Targeting ist aktiv, wenn das return-Statement true zurückgibt. Beispiel: Nutzer nehmen am Experiment teil, wenn ein bestimmter Data-Layer-Eintrag vorhanden ist (Weitere JavaScript-Anwendungsbeispiele).

JavaScript Zielgruppen-Targeting (für Experten)

Für komplexeres Zielgruppen-Targeting oder wenn dein Targeting mit den anderen Methoden im Segment Builder nicht umgesetzt werden kann, kannst du JavaScript verwenden. Das Targeting ist aktiv, wenn dein return-Statement true zurückgibt.

Nachfolgend findest du verschiedene Anwendungsbeispiele.

JavaScript-Anwendungsbeispiele

important

Hinweis: Du kannst einige dieser Anwendungsbeispiele auch einfach mit den anderen Targeting-Methoden im Segment Builder umsetzen.

Besucher und Verhalten

Sprache und Region

Sprich nur Nutzer an, die in ihrem Browser eine bestimmte Standardsprache eingestellt haben. Hier findest du alle unterstützten ISO-Sprachcodes.

Codebeispiel – Sprache Englisch

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/). 

Codebeispiel – Sprache Englisch & Region USA 

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

Neue / Wiederkehrende Besucher

Sprich nur Nutzer an, die deine Website bereits besucht haben oder an einem vorherigen Test teilgenommen haben. Alternativ kannst du auch Nutzer ansprechen, die noch nicht auf deiner Website waren oder nicht an dem Test teilgenommen haben.

Um Nutzer zu erkennen, die deine Website bereits besucht haben, ist es notwendig, zunächst ein separates Experiment zu erstellen, das ausschließlich dazu dient, diese Nutzer zu markieren. In deinem eigentlichen Experiment kannst du dann gezielt nur die Nutzer einschließen, die das vorherige Experiment gesehen haben oder nicht gesehen haben.

Füge den entsprechenden Code-Snippet in das Audience Targeting deines Experiments ein und trage die Experiment-ID des separaten Experiments in das Feld 'YOUR_EXPERIMENT_ID' ein.

Code-Beispiel - Retargeting eines Testteilnehmers aus einem bestimmten 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 - Nur neue Nutzer ansprechen

const EXPERIMENT_ID = 'YOUR_EXPERIMENT_ID';

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

Uhrzeit oder Tag des Besuchs

Sprich nur Nutzer an, die sich zu einer bestimmten Uhrzeit oder zum Beispiel an einem bestimmten Wochentag auf deiner Seite befinden. Du kannst zum Beispiel das folgende Beispiel verwenden, wenn dein Experiment an einem bestimmten Tag zu einer bestimmten Uhrzeit starten soll.

Code-Beispiel - Testbeginn planen

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;

Event-Targeting

Polling und asynchrones JavaScript

Prüfe asynchrone Eigenschaften mithilfe von Promises. In diesem Beispiel warten wir auf ein Element, das auf der Seite noch nicht existiert. Sobald das Element existiert, wird das Targeting angewendet.

Codebeispiel – Nur targetieren, wenn ein Element auf der Seite ist

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

Codebeispiel – Polling mit Promises behandeln

Dies startet die Abfrage für 2 Sekunden, genauso wie es der Fall wäre, wenn false (ohne Promises) zurückgegeben würde.

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

Startet keine Abfrage oder beendet eine bestehende Abfrageschleife und überspringt dieses Experiment

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

Data-Layer-Eintrag

Um nur Nutzer anzusprechen, die einen bestimmten Parameter oder einen bestimmten Wert im Data Layer haben, kannst du durch den Data Layer navigieren. Im folgenden Beispiel werden nur Nutzer angesprochen, die zuvor ein bestimmtes Produkt mit ID 1111 oder ID 2222 angesehen haben.

Codebeispiel - Data-Layer-Targeting

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

Technisches Targeting und Geräte-Targeting

Browser

Erreiche nur Nutzer, die einen bestimmten Browser verwenden.

Code-Beispiel - Google Chrome

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

Device-Targeting (Desktop, Tablet, Mobile)

Zum Beispiel kannst du mit dem folgenden Code nur mobile Nutzer erreichen.

Code-Beispiel - Targeting: Nur mobile Geräte

return window.innerWidth < 768;

Code-Beispiel - Targeting: Nur Tablet-Geräte

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

Code-Beispiel - Targeting: Nur Desktop-Geräte

return window.innerWidth > 1023;

Plattform / Betriebssystem

Sprich nur Nutzer an, die ein bestimmtes Betriebssystem verwenden.

Codebeispiel - Android

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

Kampagnen- und Experimentverwaltung

Werbekampagne

Ziele nur Nutzer an, die von einer bestimmten Ad-Kampagne auf deine Website kommen.

Codebeispiel - UTM Source = ad_campaign

const AD_CAMPAIGN = 'YOUR_AD_CAMPAIGN_HERE';

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

Experiment oder Kampagnen-Booster nur einmal anzeigen

Wenn du verhindern möchtest, dass Nutzer ein Experiment oder einen Campaign Booster erneut sehen, nachdem sie es bereits gesehen haben, kannst du dies einfach mithilfe von Audience Targeting umsetzen.

Dazu verwenden wir den Session Storage für eine einmalige Ausspielung pro Sitzung oder den Local Storage für eine einmalige Ausspielung über mehrere Sitzungen hinweg. Beim ersten Ausspielen des Experiments wird ein entsprechender Eintrag im Storage erstellt und wir prüfen dann bei jedem weiteren Versuch, ob dieser Eintrag bereits existiert. Ist dies der Fall, wird das Experiment nicht erneut angezeigt.

Session Storage – einmalige Ausspielung pro Sitzung

Füge diesen Code über den Editor zum JavaScript deiner Variante hinzu. Am besten änderst du die Experiment-ID 1234 bei "experiment-seen-1234" auf die Experiment-ID deines Experiments.

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

Füge diesen Code dann zum Audience Targeting des Experiments hinzu. Dieser prüft, ob der Session-Storage-Eintrag bereits existiert, und führt das Experiment entsprechend aus oder blockiert es.

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

Wenn der Eintrag experiment-seen-1234 mit dem Wert true im Session Storage vorhanden ist, wird das Experiment nicht mehr ausgespielt.

Local Storage - Einmalige Ausspielung über mehrere Sitzungen

Füge diesen Code über den Editor zum JavaScript deiner Variante hinzu. Am besten änderst du die Experiment-ID 1234 bei „experiment-seen-1234“ auf die Experiment-ID deines Experiments.

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

Füge diesen Code dann zum Audience Targeting des Experiments hinzu. Dieser prüft, ob der Local-Storage-Eintrag bereits existiert, und führt das Experiment entsprechend aus oder blockiert es.

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

Wenn der Eintrag experiment-seen-1234 mit dem Wert true im Session Storage existiert, wird das Experiment nicht mehr ausgespielt.

Traffic-Ausschluss für Experimente

Wenn nicht alle Besucher der gezielten Seite am Experiment teilnehmen sollen, kannst du mit dem folgenden Code nur einen Teil der Besucher einem Experiment zuweisen. Zum Beispiel möchtest du, dass nur 30 % der Seitenbesucher zu Experiment-Teilnehmern werden.

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

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

Ein Besucher wird nun basierend auf der festgelegten Wahrscheinlichkeit entweder dem Experiment zugewiesen oder davon ausgeschlossen. Wenn er zugewiesen wird, wird der Wert „true“ im Local Storage gespeichert, und „false“, wenn er ausgeschlossen wird. Audience Targeting spielt das Experiment nur aus, wenn der Wert „true“ im Local Storage 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;
}

Du kannst über die Entwicklerkonsole des Browsers prüfen, ob es wie gewünscht funktioniert. Gehe dazu im Tab „Application“ zu deinem Local Storage. Sobald du das Experiment gestartet hast und dich auf der Seite befindest, auf der das Experiment läuft, solltest du je nachdem, ob du dich in der Teilnehmergruppe befindest oder nicht, Folgendes im Local Storage sehen:

Teilnehmer:

• Key: experiment-participant Value: true
• Das Experiment sollte ebenfalls sichtbar sein: Key: varify-experiment-1234 Value: {"variationId":1234/Original, "timestamp":12456789}

Kein Teilnehmer:

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

Wenn du erneut testen möchtest, ob es funktioniert, zum Beispiel um in die Gruppe der Teilnehmer zu gelangen, musst du die Einträge im Local Storage manuell 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 dann die Seite neu.

Gegenseitiger Ausschluss von Experimenten (Traffic-Verteilung konfigurierbar)

In manchen Fällen ist es notwendig, Teilnehmer, die einem bestimmten Experiment zugewiesen sind, von anderen Experimenten auszuschließen. Dies ist besonders relevant, wenn zwei oder mehr Experimente auf denselben Seiten einer Website durchgeführt werden. Damit soll verhindert werden, dass die Ergebnisse durch gegenseitige Beeinflussung der Experimente verfälscht werden.

Im folgenden Code findest du oben die beiden Konstanten EXPERIMENTS und ALLOCATIONS.

• EXPERIMENTSTrage die Experiment-IDs der betroffenen Experimente ein, die sich gegenseitig ausschließen sollen (zum Beispiel: 10201, 12345, 11456). Es müssen mindestens zwei Experiment-IDs eingetragen werden, die maximale Anzahl ist unbegrenzt.
• ALLOCATIONSHier definierst du die Traffic-Verteilung zwischen den Experimenten. Bei einer Eingabe von [25, 50, 25] wie im Beispiel unter EXPERIMENTS würden 25 % der Nutzer Experiment 10201 sehen, 50 % würden Experiment 12345 sehen und 25 % würden Experiment 11456 sehen.

Bitte füge den folgenden Code in jedem der Experimente ein, die sich gegenseitig ausschließen sollen. Stelle sicher, dass du die Konstante EXPERIMENTS vor dem Start des Tests einträgst und dass genau derselbe Code für jedes Experiment eingefügt wird.

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;

Targeting der Original-Varianten-Teilnehmer eines Experiments in einem zweiten Experiment

important

Wichtiger Hinweis:
Möchtest du zwei verschiedene Anwendungsfall-Beispiele zusammen nutzen, bist dir aber unsicher, wie das geht? Zögere nicht, uns zu kontaktieren: https://varify.io/contact/

Um sicherzustellen, dass ein zweites Experiment nur den Nutzern angezeigt wird, die zuvor die Originalversion eines ersten Experiments gesehen haben, kann dies im Audience Targeting mit folgendem Code präzise gesteuert werden. Nutzern, die bereits die Variante des ersten Experiments gesehen haben, wird 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;

Es sei außerdem erwähnt, dass durch Anpassung des Codes auch Teilnehmer der Originalvariante ausgeschlossen und Teilnehmer der Variante eingeschlossen werden können. Der nächste Punkt zeigt dir, wie das geht.

Multi Page Experiments - Targeting einer bestimmten Variante - Teilnehmer eines Experiments in einem zweiten Experiment

Der beste Weg, um Multi Page Experiments einzurichten, ist wie folgt.

1. Erstelle ein Experiment für jede Website, auf der eine Änderung in der Variante stattfinden soll.

2. Definiere, welches das primäre Experiment ist. Das primäre Experiment ist das Experiment, auf dessen Seite deine Besucher zu Testteilnehmern werden sollen.

3. Füge den folgenden Code zum Audience Targeting in allen Experimenten des Multi Page Experiment außer dem Primary Experiment hinzu.

4. ändere die Experiment_ID auf die ID deines primären Experiments

5. ändere die targetVariationId auf die Variation ID deines primären Experiments.

6. setze für alle Experimente außer dem primären Experiment die Traffic-Verteilung auf 100% der 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;
}

Traffic-Quelle und Inhalt

Referrer-URL

Zielt nur auf Nutzer ab, die deine ursprüngliche Website von einem bestimmten Referrer (Quelle) aus besucht haben.

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

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

return document.referrer === REFERRER_URL;

Traffic-Quelle

Zielt nur auf Nutzer ab, die von einer bestimmten Traffic-Quelle kommen, wie z. B. 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;

Cookie-Targeting

Prüfe, ob deine Nutzer einen Cookie-Eintrag haben, und definiere nur diese Nutzer 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

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

Codebeispiel - Session-Storage-Wert ist gesetzt

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

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

Codebeispiel - Local-Storage-Wert ist gesetzt

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

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

Abfrageparameter

Ziele nur Nutzer an, die deine Website mit einem bestimmten Abfrageparameter besuchen. Diesen Anwendungsfall kannst du zum Beispiel nutzen, um deine Variante zu testen. In diesem Beispiel wird die Variante mit dem URL-Abfrageparameter ?varify-testing=true aufgerufen.

Codebeispiel - ?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;

JavaScript-Variable mit spezifischem Wert

Du kannst den folgenden Code im Audience Targeting verwenden, um festzulegen, dass ein Experiment nur ausgespielt wird, wenn eine JavaScript-Variable einen bestimmten Wert hat.

Wichtig: Ersetze „myVariable“ durch den entsprechenden Variablennamen und „myValue“ durch den entsprechenden Variablenwert. (Achte auch darauf, ob der Wert ein String, Integer, Boolean usw. ist, und passe die Prüfung gegebenenfalls an).

return window.myVariable === 'myValue';

CSS-Klassenselektor

Möchtest du ein Experiment nur dann abspielen oder blockieren, wenn ein Element mit einer bestimmten CSS-Klasse auf der Seite vorhanden ist? Die folgenden Codebeispiele helfen dir dabei.

Ersetze CSS_CLASS_NAME einfach durch den entsprechenden Klassennamen, auf den du das Experiment ausrichten möchtest.

Experiment anzeigen, wenn CSS-Klasse vorhanden ist

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

Experiment nicht anzeigen, wenn CSS-Klasse vorhanden ist

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

Beispiele für JavaScript-Anwendungen miteinander kombinieren

Du kannst verschiedene Anwendungsszenarien einfach miteinander kombinieren. Dazu speicherst du zunächst die Rückgabewerte der Anwendungsbeispiele in eigenen Variablen. Anschließend kannst du diese Variablen in einem allgemeinen Rückgabewert mit einem logischen Operator (AND, OR) verknüpfen, der dann dafür sorgt, dass Audience Targeting das Experiment anzeigt oder blockiert.

Die Frage hierbei ist, ob die Zielgruppen-Targeting-Bedingungen der verknüpften Use Cases gleichzeitig erfüllt sein müssen (AND) oder ob es ausreicht, wenn nur eine Bedingung erfüllt ist (OR). Beispiele hierzu findest du weiter unten.

Alle Bedingungen müssen erfüllt sein (UND)

Ein klassischer Anwendungsfall für dieses Beispiel wäre, dass ein Experiment nur für mobile Nutzer ausgespielt werden soll. Du möchtest jedoch die QA auch über den Session Storage durchführen.

Das Experiment sollte nur ausgespielt werden, wenn die QA-Session-Storage existiert UND die Anzeigebreite einem Mobilgerät entspricht.

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

• Im Anwendungsbeispiel für QA mit Session Storage erstellt der return eine Variable (let isValueMatched =)
• Ebenso für den Return des Mobile-Audience-Targeting-Codes (let mobileWidth =)
• Die Variablennamen kannst du selbst festlegen, sie müssen jedoch unterschiedlich sein
• Es wurde eine neue Zeile mit "return" hinzugefügt, in der die beiden Variablen mit einer UND-Bedingung verknüpft werden -> &&

Das Experiment wird nur angezeigt, wenn beide Variablen den Wert true haben.

Eine Bedingung muss erfüllt sein (ODER)

Manchmal möchtest du jedoch auch Zielgruppen-Targeting-Szenarien kombinieren, bei denen nicht alle Bedingungen erfüllt sein müssen. In diesem Fall werden die Variablen mit einem ODER-Operator verknüpft.

Ein Beispiel wäre, wenn du ein Experiment nur Besuchern einer bestimmten Kampagne oder eines bestimmten Referrers ausspielen möchtest. Dazu müssen die beiden Szenarien mit einem ODER verknüpft werden.

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

• Aus dem return des Kampagnen-Szenarios wurde eine Variable (let specificCampaign =) erstellt
• Aus dem return des Referrer-Szenarios wurde die Variable (let specificReferrer =) erstellt
• Aus beiden Variablen wurde eine neue Return-Abfrage mit einem ODER-Operator || erstellt

Wenn mindestens eine der beiden Variablen den Wert true enthält, wird das Experiment ausgespielt.

Technische Erklärung

Im Feld Audience Targeting kann beliebiges JavaScript definiert werden, das ausgeführt wird, um zu bestimmen, ob das Targeting zutrifft. Solange der Rückgabewert falsy ist, wird das JavaScript nach jeder Ausführung erneut geladen. 100ms wird ausgeführt, bis 2000ms erreicht sind. Danach wird abgebrochen und der Nutzer fällt nicht unter das Audience Targeting. Es kann auf asynchrone Eigenschaften geprüft werden, indem ein Promise zurückgegeben wird.

Soll ein Experiment ohne Audience Targeting ausgespielt werden, muss der Standardwert (return true;) wie im Screenshot gezeigt beibehalten werden.

Hinweis: Varify übernimmt keine Verantwortung für die Funktionalität des Codes und der Informationen.
Es liegt in der Verantwortung des Nutzers, den Code gründlich zu testen und ihn korrekt zu implementieren.