Come personalizzare i contenuti sul sito con l'API di appartenenza ai gruppi di Klaviyo

Cosa imparerai

Scopri come utilizzare il metodo getGroupMembership dell’oggetto JavaScript klaviyo per verificare l’appartenenza di una persona visitatrice identificata a una lista o a un segmento e usare i risultati per personalizzare il tuo sito web. Questo richiede di caricare l’oggetto klaviyo e di passare un array di ID di liste o segmenti da verificare.

Prima di iniziare

Ti servirà accedere al codice del tuo sito web. Collabora con una persona sviluppatrice se ti serve aiuto con JavaScript, l’installazione degli snippet o l’applicazione della personalizzazione al tuo sito.

L’API di appartenenza al gruppo richiede che Klaviyo identifichi il browser del visitatore e lo associ a un profilo. Non può restituire l’appartenenza a una lista o a un segmento per un visitatore non identificato. I modi più comuni in cui Klaviyo identifica un visitatore includono:

• Nel caso in cui qualcuno faccia clic su un link in una Klaviyo Email che porta al tuo sito web
• Se qualcuno si è iscritto tramite un modulo di Klaviyo
• Se il tuo sito utilizza un tracciamento personalizzato per identificare qualcuno in Klaviyo quando accede

Guarda il video di Klaviyo sull’uso dell’API di appartenenza al gruppo.

Installa Klaviyo.js e carica l'oggetto Klaviyo

Per prima cosa, installa Klaviyo.js se non l'hai già fatto. Klaviyo.js, noto anche come Active on Site JavaScript di Klaviyo, supporta l'oggetto klaviyo. Se la tua integrazione e-commerce ha installato Klaviyo.js sul tuo sito, non devi installarlo di nuovo. In caso contrario, installalo manualmente prima di utilizzare l'oggetto klaviyo.

Per utilizzare l'oggetto klaviyo immediatamente al caricamento della pagina, ti consigliamo di installare manualmente lo snippet qui sotto sul tuo sito (oltre a installare Klaviyo.js come indicato sopra). L'oggetto klaviyo deve essere caricato solo una volta per pagina.

Per caricare l’oggetto Klaviyo:

 
!(function () {
  if (!window.klaviyo) {
    window._klOnsite = window._klOnsite || [];
    try {
      window.klaviyo = new Proxy(
        {},
        {
          get: function (n, i) {
            return "push" === i
              ? function () {
                  var n;
                  (n = window._klOnsite).push.apply(n, arguments);
                }
              : function () {
                  for (
                    var n = arguments.length, o = new Array(n), w = 0;
                    w < n;
                    w++
                  )
                    o[w] = arguments[w];
                  var t =
                      "function" == typeof o[o.length - 1] ? o.pop() : void 0,
                    e = new Promise(function (n) {
                      window._klOnsite.push(
                        [i].concat(o, [
                          function (i) {
                            t && t(i), n(i);
                          },
                        ]),
                      );
                    });
                  return e;
                };
          },
        },
      );
    } catch (n) {
      (window.klaviyo = window.klaviyo || []),
        (window.klaviyo.push = function () {
          var n;
          (n = window._klOnsite).push.apply(n, arguments);
        });
    }
  }
})();

Verifica l'appartenenza a un elenco o segmento

Per utilizzare il metodo getGroupMembership dell’oggetto JavaScript Klaviyo per la personalizzazione onsite:

1. Nel tuo codice, seleziona gli ID dell'elenco o del segmento per cui vuoi verificare l'appartenenza. Puoi includere fino a 50 ID in totale per chiamata.
2. Identifica la persona che visita il tuo sito tramite un modulo Klaviyo o un altro metodo di identificazione. Se chiami klaviyo.identify nel tuo codice, attendi che venga completato prima di verificare l'iscrizione.
3. Effettua una chiamata nel seguente formato, con un array degli ID di lista o segmento per cui vuoi verificare l'appartenenza:

klaviyo.getGroupMembership(['listID1', 'listID2', 'listID3'])

Il metodo restituisce una Promise che si risolve in un array contenente solo gli ID del tuo array di input a cui il visitatore identificato appartiene. Usa .then() per lavorare con il risultato, come mostrato di seguito, oppure attendi il risultato all'interno di una funzione async. Un array vuoto può significare che la persona che visita il sito non appartiene ad alcuna delle liste o dei segmenti forniti, che non è stato possibile identificare la persona che visita il sito, che hai passato più di 50 ID oppure che la richiesta non è andata a buon fine. Un risultato vuoto, da solo, non distingue questi casi.

Usa gli ID di elenchi e segmenti restituiti nel codice del tuo sito web o in uno strumento di personalizzazione web per scegliere prodotti, contenuti e altro ancora pertinenti. Aggiungi la logica che modifica la pagina dopo che il risultato è disponibile e mantieni i contenuti predefiniti disponibili quando non vengono restituiti ID corrispondenti.

Esempio di codice

Questo esempio verifica l'appartenenza a più segmenti. Sostituisci le stringhe segnaposto con gli ID dei tuoi segmenti. Il codice all'interno di .then() viene eseguito dopo che il risultato è disponibile; aggiungi il codice di personalizzazione del tuo sito dove indicato.

klaviyo.getGroupMembership([
  'VIPSegmentID',
  'UnEngagedSegmentID',
  'DogLoversSegmentID'
]).then((customerSegments) => {
  if (customerSegments.includes('VIPSegmentID')) {
    // Add code to display your VIP content here.
  }
});

Impatto sulle prestazioni del sito

Klaviyo carica lo script di personalizzazione web in modo asincrono. Mantieni disponibile il contenuto predefinito del tuo sito mentre la richiesta di iscrizione viene completata, quindi applica la personalizzazione dopo aver ricevuto il risultato.

Le risposte di membership possono essere memorizzate nella cache dal browser, consentendo alle richieste ripetute per lo stesso visitatore e gli stessi ID di riutilizzare la risposta memorizzata nella cache. Una richiesta diversa o una cache scaduta possono richiedere un'altra chiamata API, quindi non è garantito che il risultato rispecchi immediatamente una modifica della membership.

Risultato

Ora puoi usare l'oggetto JavaScript Klaviyo con gli strumenti di personalizzazione web e per personalizzare i contenuti on-site in base all'appartenenza a un segmento o a una lista.

Risorse aggiuntive