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

Cosa imparerai

Scopri come usare il metodo getGroupMembership dell'oggetto JavaScript di klaviyo, che può essere utilizzato per implementare la personalizzazione sul sito nel tuo sito web. Questo richiede il caricamento dell'oggetto klaviyo e il passaggio di un array di liste o segmenti da controllare, che restituirà un output che puoi sfruttare per la personalizzazione sul sito.

Prima di iniziare

Quando aggiungi il tracciamento sul sito di Klaviyo al tuo sito, viene tracciata solo l'attività di navigazione dei "browser noti" (ovvero browser che hanno visitato, coinvolti e sono stati identificati o "con cookie"). Il tracciamento sul sito di Klaviyo non traccia i browser anonimi. Esistono 3 modi principali in cui Klaviyo identificherà un visitatore del sito per il tracciamento sul sito:

• 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 qualcuno ha effettuato l'accesso al tuo sito e hai installato il tracciamento

Guarda il video di Klaviyo sull'utilizzo dell'API per l'appartenenza a un gruppo.

Installa Klaviyo.js e carica l'oggetto Klaviyo

Per prima cosa devi installare Klaviyo.js, se non l'hai già fatto. Klaviyo.js, noto anche come JavaScript Active on Site di Klaviyo, supporta automaticamente l'oggetto Klaviyo. Se hai attivato integrazioni con il tuo account Klaviyo o hai installato Klaviyo.js manualmente, potrai avviare l'oggetto Klaviyo per ascoltare le chiamate pertinenti.

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

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

1. Nel tuo codice, seleziona gli ID di elenco o segmento per cui vuoi verificare l'appartenenza. Il limite è di 50 elenchi o segmenti.
2. Identifica gli utenti sul tuo sito tramite un modulo Klaviyo o in altri modi.
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'])

L'output fornito sarà un array degli ID di elenchi/segmenti a cui appartiene l'utente identificato, a condizione che quegli ID fossero nell'array di input. Se viene restituito un array vuoto, significa che hai inserito troppi ID oppure che l'utente non appartiene ad alcun elenco o segmento tra quelli forniti.

Puoi usare i dati di appartenenza a segmenti e liste restituiti per personalizzare il tuo sito con prodotti, contenuti e altro ancora pertinenti in base ai segmenti dei clienti di Klaviyo.

Esempio di codice

Ecco un esempio che mostra come chiamare l'API getGroupMembership con più ID segmento.

const customerSegments = await klaviyo.getGroupMembership([
  VIPSegmentID,
  UnEngagedSegmentID,
  DogLoversSegmentID
]);

Impatto sulle prestazioni del sito

L’API di appartenenza al gruppo ha un impatto minimo sulle prestazioni del tuo sito. Il file Javascript (ad es. web_personalization.js) che Klaviyo carica sul tuo sito è di circa 1,2 KB e la richiesta bundle per questo file non blocca il thread principale, quindi non influisce sull’usabilità delle pagine.

I dati caricati per personalizzare un sito in base al profilo cliente vengono memorizzati nella cache del browser dopo la prima richiesta, quindi le richieste aggiuntive non richiedono chiamate API di backend.

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