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
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)
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;
Cookie Targeting
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
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
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
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
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
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
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
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
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
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
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
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)
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
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.