Targetizzazione del pubblico

Ultimo aggiornamento il 24 mar 202614 min di lettura

Indice

• In breve
• Generatore di Segmenti
• Condizioni di targeting del pubblico
• Targeting del pubblico con JavaScript (per esperti)

In breve

Con l'audience targeting, determini quale gruppo target partecipa al tuo esperimento. Ad esempio, puoi indirizzare solo gli utenti che arrivano sul tuo sito web tramite una fonte specifica oppure selezionare utenti mobile, tablet o desktop. Le opzioni sono molto versatili.

Crei il tuo audience targeting nel Segment Builder. Puoi usare JavaScript per targeting più complessi. Qui trovi vari template JavaScript per diversi casi d'uso, che puoi utilizzare per implementare il targeting desiderato.

Step-by-Step TutorialAudience TargetingStart tutorial

Generatore di Segmenti

Con il Segment Builder in Audience Targeting, determini quali gruppi di utenti partecipano al tuo esperimento. Se non imposti nulla, tutti i visitatori che soddisfano le condizioni del Page Targeting parteciperanno automaticamente.

Nella scheda „Audience targeting“, usa „Condition +“ per aggiungere nuove condizioni in base alle quali verrà eseguito il tuo esperimento. Seleziona una condizione dall'elenco. Puoi combinare più condizioni tra loro - con AND oppure OR.

Se hai già salvato dei segmenti, puoi adottarli come audience targeting con un clic tramite „Saved segment +“.

Salva il tuo audience targeting tramite „Save Audience Targeting“ in modo che sia attivo per l'esperimento. Puoi modificare l'audience targeting in qualsiasi momento.

Salvare i segmenti (opzionale)

Una volta creato il tuo audience, puoi opzionalmente salvarlo come segmento e riutilizzarlo in seguito in altri esperimenti. Questo ti permette di definire il tuo audience una sola volta e poi selezionarlo di nuovo come segmento ogni volta.

Per salvare un audience targeting definito come segmento, apri il dropdown accanto a „Save audience targeting“. Poi seleziona „Save targeting segment“ per salvare il targeting come segmento.

Condizioni di targeting del pubblico

Nel targeting del pubblico, hai a disposizione vari metodi per pubblicare il tuo esperimento e creare segmenti. In questo elenco trovi una panoramica di tutti i metodi di targeting. Puoi anche combinarli tra loro - sia con AND che con OR.

Metodo	Descrizione (incl. esempio)
Browser	Mostra un esperimento solo agli utenti di determinati browser per testare effetti specifici del browser o differenze di visualizzazione. Esempio: Gli utenti con il browser Safari partecipano all'esperimento.
Browser Language	Pubblica esperimenti in base alla lingua del browser impostata per mostrare le varianti nella lingua appropriata. Esempio: Gli utenti con la lingua del browser impostata su tedesco vedranno la versione tedesca.
Cookie	Fai il targeting degli esperimenti in base ai cookie esistenti per pubblicare varianti a seconda degli stati dell'utente. Esempio: Gli utenti con un cookie del carrello vedono un esperimento con offerte mirate per il carrello.
Device	Limita un esperimento a determinati tipi di dispositivo per testare varianti ottimizzate per ciascun dispositivo. Esempio: Gli utenti su dispositivi mobili partecipano all'esperimento.
Platform	Esegui un esperimento solo su determinate piattaforme/sistemi operativi per tenere conto delle differenze specifiche della piattaforma. Esempio: Gli utenti su Android partecipano all'esperimento.
Geolocation	Fai il targeting degli esperimenti in base alla posizione per testare varianti regionali o contenuti localizzati. Esempio: Gli utenti dalla Germania partecipano all'esperimento.
IP	Includi o escludi determinati IP in un esperimento, ad es. per il QA o per escludere l'accesso interno dai dati. Esempio: Gli utenti con l'IP 123.123.123.123 sono esclusi dall'esperimento.
Local Storage	Esegui un esperimento solo se è disponibile un determinato valore del local storage per utilizzare stati utente ricorrenti. Esempio: Gli utenti con il valore localStorage experiment=true partecipano all'esperimento.
Session Storage,	Fai il targeting di un esperimento utilizzando un valore del session storage che si applica solo alla sessione corrente. Esempio: Gli utenti con il valore sessionStorage experiment=true partecipano all'esperimento.
URL Query Parameter	Esegui un esperimento solo per gli utenti con determinati parametri URL per testare il traffico delle campagne in modo mirato. Esempio: Gli utenti con ?campaign=blackfriday partecipano all'esperimento.
URL referrer	Mostra un esperimento in base al referrer per testare gli utenti in modo diverso a seconda della fonte di traffico. Esempio: Gli utenti che provengono da google.com partecipano all'esperimento.
JavaScript	Usa JavaScript per un targeting del pubblico più complesso o se nessuno degli altri metodi è possibile. Il targeting è attivo se l'istruzione return restituisce true. Esempio: Gli utenti partecipano all'esperimento se è disponibile una voce specifica del data layer (Ulteriori esempi di applicazione JavaScript).

Targeting del pubblico con JavaScript (per esperti)

Per un targeting del pubblico più complesso o se il tuo targeting non può essere implementato con gli altri metodi nel Segment Builder, puoi usare JavaScript. Il targeting è attivo se la tua istruzione return restituisce true.

Di seguito trovi vari esempi di applicazione.

Esempi di applicazione JavaScript

important

Nota: puoi anche implementare facilmente alcuni di questi esempi di applicazione utilizzando gli altri metodi di targeting nel Segment Builder.

Visitatori e comportamento

Lingua e regione

Indirizza solo gli utenti che hanno impostato una lingua predefinita definita nel loro browser. Qui puoi trovare tutti i codici lingua ISO supportati.

Esempio di codice - Lingua inglese

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

Esempio di codice - Lingua inglese & Regione USA 

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

Visitatori nuovi / di ritorno

Indirizza solo gli utenti che hanno già visitato il tuo sito o che hanno partecipato a un test precedente. In alternativa, puoi anche indirizzare gli utenti che non sono ancora stati sul tuo sito o partecipanti al test.

Per riconoscere gli utenti che hanno già visitato il tuo sito web, è necessario prima creare un esperimento separato che viene utilizzato esclusivamente per contrassegnare questi utenti. Nel tuo esperimento effettivo, puoi quindi includere specificamente solo gli utenti che hanno visto o non hanno visto l'esperimento precedente.

Inserisci il relativo snippet di codice nel targeting dell'audience del tuo esperimento e inserisci l'ID esperimento dell'esperimento separato nel campo 'YOUR_EXPERIMENT_ID'.

Esempio di codice - retargeting del partecipante al test da un esperimento specifico - variante vista

const EXPERIMENT_ID = 'YOUR_EXPERIMENT_ID';

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

Esempio di codice - Targettizza solo i nuovi utenti

const EXPERIMENT_ID = 'YOUR_EXPERIMENT_ID';

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

Orario o giorno della visita

Targettizza solo gli utenti che si trovano sul tuo sito in un determinato orario o, ad esempio, in un determinato giorno della settimana. Ad esempio, puoi usare il seguente esempio se vuoi che il tuo esperimento inizi in un determinato giorno a un determinato orario.

Esempio di codice - Pianificazione dell'inizio del 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;

Targeting basato sugli eventi

Polling e JavaScript asincrono

Verifica le proprietà asincrone utilizzando le promise. Nell'esempio qui riportato, stiamo aspettando un elemento che non esiste ancora nella pagina. Una volta che l'elemento esiste, il targeting viene applicato.

Esempio di codice - Targetizza solo quando un elemento è presente nella pagina

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

Esempio di codice - Gestione del polling con le Promise

Questo avvia la query per 2 secondi, proprio come accadrebbe se venisse restituito false (senza promise).

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

Non avvia una query, oppure termina un loop di query esistente e salta questo esperimento

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

Voce del data layer

Per targetizzare solo gli utenti che hanno un determinato parametro o un determinato valore nel data layer, puoi navigare all'interno del data layer. Nell'esempio seguente, vengono targetizzati solo gli utenti che hanno precedentemente visualizzato un prodotto specifico con ID 1111 o ID 2222.

Esempio di codice - Data Layer Targeting

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

Targeting tecnico e per dispositivo

Browser

Targetizza solo gli utenti che usano un browser specifico.

Esempio di codice - Google Chrome

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

Targeting per dispositivo (desktop, tablet, mobile)

Ad esempio, con il seguente codice puoi targetizzare solo gli utenti mobile.

Esempio di codice - Targeting: solo dispositivi mobili

return window.innerWidth < 768;

Esempio di codice - Targeting: solo dispositivi tablet

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

Esempio di codice - Targeting: solo dispositivi desktop

return window.innerWidth > 1023;

Piattaforma / OS

Targetizza solo gli utenti che utilizzano un sistema operativo specifico.

Esempio di codice - Android

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

Gestione di campagne ed esperimenti

Campagna pubblicitaria

Mostra il target solo agli utenti che arrivano al tuo sito da una specifica campagna pubblicitaria.

Esempio di codice - UTM Source = ad_campaign

const AD_CAMPAIGN = 'YOUR_AD_CAMPAIGN_HERE';

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

Mostra l'esperimento o il campaign booster solo una volta

Se vuoi impedire agli utenti di vedere di nuovo un esperimento o un campaign booster dopo che lo hanno già visto, puoi implementarlo facilmente con l'aiuto dell'audience targeting.

Per fare ciò, utilizziamo il session storage per un'unica riproduzione per sessione oppure il local storage per un'unica riproduzione su più sessioni. La prima volta che l'esperimento viene riprodotto, viene creata una voce corrispondente nello storage e successivamente verifichiamo se questa voce esiste già al tentativo successivo. In tal caso, l'esperimento non viene mostrato di nuovo.

Session Storage - riproduzione singola per sessione

Aggiungi questo codice al JavaScript della tua variante utilizzando l'editor. È preferibile modificare l'ID esperimento 1234 in "experiment-seen-1234" con l'ID esperimento del tuo esperimento.

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

Poi aggiungi questo codice all'audience targeting dell'esperimento. Questo verifica se la voce di session storage esiste già ed esegue o blocca l'esperimento di conseguenza.

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

Se la voce experiment-seen-1234 con il valore true esiste nel session storage, l'esperimento non viene più riprodotto.

Local Storage - Riproduzione unica su più sessioni

Aggiungi questo codice al JavaScript della tua variante utilizzando l'editor. È preferibile cambiare l'ID esperimento 1234 in "experiment-seen-1234" con l'ID esperimento del tuo esperimento.

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

Poi aggiungi questo codice all'audience targeting dell'esperimento. Questo verifica se la voce di Local Storage esiste già ed esegue o blocca l'esperimento di conseguenza.

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

Se la voce experiment-seen-1234 con il valore true esiste nel session storage, l'esperimento non viene più riprodotto.

Esclusione del traffico per gli esperimenti

Se non vuoi che tutti i visitatori della pagina target partecipino all'esperimento, puoi assegnare solo una parte dei visitatori a un esperimento utilizzando il seguente codice. Ad esempio, vuoi che solo il 30% dei visitatori della pagina diventi partecipante all'esperimento.

Importante: inserisci l'Experiment_ID corrispondente dell'esperimento in questione e sostituisci 1234 (riga 1).

Importante: se vuoi modificare la proporzione dei partecipanti, cambia il numero 10 (10%) in questo codice con la proporzione desiderata, ad es. 30 (30%). (riga 11)

Un visitatore viene ora assegnato all'esperimento oppure escluso in base alla probabilità impostata. Se viene assegnato, il valore "true" viene salvato nel local storage, e "false" se viene escluso. L'Audience Targeting riproduce l'esperimento solo se il valore "true" è presente nel Local Storage e l'utente viene quindi identificato come partecipante all'esperimento.

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

Puoi verificare se funziona come desiderato tramite la console per sviluppatori del browser. Per farlo, vai al tuo local storage nella scheda "Application". Una volta avviato l'esperimento e trovandoti sulla pagina in cui l'esperimento è in esecuzione, dovresti vedere quanto segue nel local storage, a seconda che tu faccia parte del gruppo di partecipanti o no:

Partecipanti:

• Chiave: experiment-participant Valore: true
• Dovrebbe essere visibile anche l'esperimento: Chiave: varify-experiment-1234 Valore: {"variationId":1234/Original, "timestamp":12456789}

Non è un partecipante:

• Chiave: experiment-participant Valore: false
• I valori per l'esperimento non dovrebbero essere presenti nel Local Storage

Se vuoi testare di nuovo se funziona, ad esempio per entrare nel gruppo dei partecipanti, devi eliminare manualmente le voci nel Local Storage. Per fare questo, clicca sull'icona con il cerchio barrato a destra del filtro per eliminare tutte le voci nel Local Storage e poi ricarica la pagina.

Esclusione reciproca degli esperimenti (distribuzione del traffico configurabile)

In alcuni casi, è necessario escludere i partecipanti assegnati a un determinato esperimento da altri esperimenti. Questo è particolarmente rilevante quando vengono condotti due o più esperimenti sulle stesse pagine di un sito web. Questo serve a evitare che i risultati vengano distorti dall'influenza reciproca tra gli esperimenti.

Nel seguente codice troverai le due costanti in alto EXPERIMENTS e ALLOCATIONS.

• EXPERIMENTSInserisci gli ID degli esperimenti interessati che devono essere mutuamente esclusivi (ad esempio: 10201, 12345, 11456). Devono essere inseriti almeno due ID di esperimento, il numero massimo è illimitato.
• ALLOCATIONSQui definisci la distribuzione del traffico tra gli esperimenti. Con un input di [25, 50, 25] come nell'esempio sotto EXPERIMENTS, il 25% degli utenti vedrebbe l'esperimento 10201, il 50% vedrebbe l'esperimento 12345 e il 25% vedrebbe l'esperimento 11456.

Inserisci il seguente codice in ciascuno degli esperimenti che devono essere mutuamente esclusivi. Assicurati di inserire la costante EXPERIMENTS prima di avviare il test e che venga inserito esattamente lo stesso codice per ogni esperimento.

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;

Targetizzare i partecipanti alla variante originale di un esperimento in un secondo esperimento

important

Nota importante:
Vuoi utilizzare insieme due diversi esempi di casi d'uso, ma non sei sicuro di come farlo? Non esitare a contattarci: https://varify.io/contact/

Per garantire che un secondo esperimento venga mostrato solo agli utenti che hanno già visto la versione originale di un primo esperimento, questo può essere controllato con precisione nel targeting del pubblico utilizzando il codice seguente. Agli utenti che hanno già visto la variante del primo esperimento non verrà mostrato il secondo esperimento.

Importante: l'ID esperimento "1234" nella riga 1 deve essere sostituito con l'ID esperimento corrispondente del primo esperimento per il quale solo i partecipanti della variante originale devono vedere il secondo esperimento.

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;

Va inoltre menzionato che, modificando il codice, è possibile escludere i partecipanti della variante originale e includere i partecipanti della variante. Il punto successivo mostra come farlo.

Esperimenti Multi Page - Targeting di una variante specifica - Partecipanti di un esperimento in un secondo esperimento

Il modo migliore per configurare gli Esperimenti Multi Page è il seguente.

1. crea un esperimento per ogni sito web su cui deve avvenire un cambiamento nella variante.

2. definisci qual è l'esperimento primario. L'esperimento primario è l'esperimento sulla pagina in cui i tuoi visitatori dovrebbero diventare partecipanti al test.

3. aggiungi il seguente codice all'Audience Targeting in tutti gli esperimenti del Multi Page Experiment tranne l'Esperimento Primario.

4. cambia Experiment_ID con l'ID del tuo esperimento primario

5. cambia targetVariationId con l'ID della variazione del tuo esperimento primario.

6. per tutti gli esperimenti eccetto quello primario, imposta la distribuzione del traffico al 100% della 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;
}

Fonte di traffico e contenuto

URL di riferimento

Indirizza solo gli utenti che hanno visitato il tuo sito web iniziale da un referrer (fonte) specifico.

Esempio di codice - Referrer = https://www.google.com/

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

return document.referrer === REFERRER_URL;

Fonte di traffico

Indirizza solo gli utenti che provengono da una fonte di traffico specifica, come le newsletter.

Esempio di codice - 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;

Targeting basato sui cookie

Verifica se i tuoi utenti hanno una voce cookie e definisci solo questi utenti come partecipanti al test.

Esempio di codice - il cookie è impostato

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;

Targeting basato su Session e Local Storage

Verifica se i tuoi utenti hanno una voce corrispondente nel Session o Local Storage e definisci solo questi utenti come partecipanti al test.

Esempio di codice - Il valore di Session Storage è impostato

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

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

Esempio di codice - Il valore di Local Storage è impostato

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

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

Parametri di query

Rivolgiti solo agli utenti che visitano il tuo sito web utilizzando un parametro di query specifico. Puoi usare questo caso d'uso, ad esempio, per testare la tua variante. In questo esempio, la variante viene richiamata con il parametro di query URL ?varify-testing=true.

Esempio di codice - ?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;

Variabile JavaScript con valore specifico

Puoi usare il seguente codice in Audience Targeting per specificare che un esperimento venga eseguito solo se una variabile JavaScript ha un determinato valore.

Importante: sostituisci "myVariable" con il nome della variabile corrispondente e "myValue" con il valore della variabile corrispondente. (Nota anche se il valore è una stringa, un intero, un booleano, ecc. e modifica il controllo se necessario).

return window.myVariable === 'myValue';

Selettore di classe CSS

Vuoi eseguire o bloccare un esperimento solo se nella pagina è presente un elemento con una classe CSS specifica? I seguenti esempi di codice ti saranno utili.

Sostituisci CSS_CLASS_NAME semplicemente con il nome della classe corrispondente su cui vuoi indirizzare l'esperimento.

Mostra l'esperimento se la classe CSS esiste

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

Non mostrare l'esperimento se la classe CSS esiste

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

Combina esempi di applicazioni JavaScript tra loro

Puoi combinare facilmente diversi scenari applicativi tra loro. Per farlo, prima salvi i valori di ritorno degli esempi applicativi in variabili proprie. Puoi quindi collegare queste variabili in un valore di ritorno generale con un operatore logico (AND, OR), che assicura che l'audience targeting mostri o blocchi l'esperimento.

La domanda qui è se le condizioni di targeting del pubblico dei use case collegati debbano essere soddisfatte contemporaneamente (AND), oppure se sia sufficiente che venga soddisfatta una sola condizione (OR). Di seguito trovi alcuni esempi al riguardo.

Tutte le condizioni devono essere soddisfatte (AND)

Un classico use case per questo esempio sarebbe che un esperimento debba essere eseguito solo per gli utenti mobile. Tuttavia, vuoi anche effettuare il QA tramite il session storage.

L'esperimento deve essere eseguito solo se esiste il session storage per il QA E la larghezza del display corrisponde a un dispositivo 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;

• Nell'esempio applicativo per il QA con session storage, il return crea una variabile (let isValueMatched =)
• Lo stesso vale per il return del codice di audience targeting mobile (let mobileWidth =)
• Puoi definire tu stesso i nomi delle variabili, ma devono essere diversi
• È stata aggiunta una nuova riga con "return", in cui le due variabili vengono collegate con una condizione AND -> &&

L'esperimento viene mostrato solo se entrambe le variabili hanno il valore true.

Deve essere soddisfatta una condizione (OR)

A volte, tuttavia, vuoi anche combinare scenari di targeting del pubblico in cui non tutte le condizioni devono essere soddisfatte. In questo caso, le variabili vengono collegate con un operatore OR.

Un esempio potrebbe essere se vuoi mostrare un esperimento solo ai visitatori di una determinata campagna o referrer. Per fare ciò, i due scenari devono essere collegati con 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;

• Dal return dello scenario campagna, viene creata una variabile (let specificCampaign =)
• Dal return dello scenario referrer, viene creata la variabile (let specificReferrer =)
• Da entrambe le variabili viene creata una nuova query return con un operatore OR ||

Se almeno una delle due variabili contiene il valore true, l'esperimento viene eseguito.

Spiegazione tecnica

Nel campo Audience Targeting può essere definito qualsiasi codice JavaScript, che verrà eseguito per determinare se il targeting si applica. Finché viene restituito un valore falsy, il JavaScript viene ricaricato dopo ogni esecuzione. Viene eseguito ogni 100ms fino al raggiungimento di 2000ms. Dopodiché viene annullato e l'utente non rientra nell'audience targeting. È possibile verificare proprietà asincrone utilizzando un ritorno Promise.

Se un esperimento deve essere eseguito senza audience targeting, è necessario lasciare il valore predefinito (return true;) come mostrato nello screenshot.

Attenzione: Varify non si assume alcuna responsabilità per la funzionalità del codice e delle informazioni.
È responsabilità dell'utente testare a fondo il codice e implementarlo correttamente.