Onsite content personaliseren met de group membership API van Klaviyo

Wat je leert

Ontdek hoe je de methode getGroupMembership van het JavaScript-object Klaviyo gebruikt om te controleren of een geïdentificeerde bezoeker lid is van een lijst of segment, en gebruik de resultaten om je website te personaliseren. Hiervoor moet je het object Klaviyo laden en een array met lijst- of segment-ID's doorgeven om te controleren.

Voordat je van start gaat

Je hebt toegang nodig tot de code van je website. Werk samen met een developer als je hulp nodig hebt met JavaScript, het installeren van de snippets of het toepassen van personalisatie op je site.

Voor de API voor groepslidmaatschap moet Klaviyo de browser van de bezoeker identificeren en die koppelen aan een profiel. De API kan geen lidmaatschap van lijsten of segmenten teruggeven voor een niet-geïdentificeerde bezoeker. Veelvoorkomende manieren waarop Klaviyo een bezoeker identificeert zijn:

• Als iemand via een Klaviyo Email naar je website heeft doorgeklikt
• Als iemand zich heeft aangemeld via een Klaviyo-formulier
• Als je site aangepaste tracking gebruikt om iemand te identificeren bij Klaviyo wanneer ze inloggen

Bekijk Klaviyo’s video over het gebruik van de API voor groepslidmaatschap.

Installeer Klaviyo.js en laad het Klaviyo-object

Installeer eerst Klaviyo.js als je dat nog niet hebt gedaan. Klaviyo.js, ook bekend als Klaviyo’s actieve on Site JavaScript, ondersteunt het klaviyo -object. Als je e-commerce-integratie Klaviyo.js op je site heeft geïnstalleerd, hoef je het niet opnieuw te installeren. Installeer het anders handmatig voordat je het klaviyo -object gebruikt.

Om het klaviyo -object direct bij het laden van de pagina te gebruiken, raden we aan om het onderstaande snippet handmatig op je site te installeren (naast het installeren van Klaviyo.js zoals hierboven vermeld). Het klaviyo -object hoeft maar één keer per pagina te worden geladen.

Om het klaviyo -object te laden:

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

Controleer lijst- of segmentlidmaatschap

Om de getGroupMembership-methode van het JavaScript-object klaviyo te gebruiken voor personalisatie op de website:

1. Selecteer in je code de lijst- of segment-ID's waarvoor je het lidmaatschap wilt controleren. Je kunt per call in totaal maximaal 50 ID's doorgeven.
2. Identificeer de bezoeker op je site via een Klaviyo-formulier of een andere identificatiemethode. Als je klaviyo.identify in je code aanroept, wacht dan tot het is voltooid voordat je controleert of iemand lid is.
3. Doe een call in de volgende indeling, met een array van de lijst- of segment-ID's waarvoor je het lidmaatschap wilt controleren:

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

De methode retourneert een Promise die wordt voltooid met een array die alleen de ID’s bevat uit je invoerarray waar de geïdentificeerde bezoeker toe behoort. Gebruik .then() om met het resultaat te werken, zoals hieronder wordt weergegeven, of await het resultaat in een async-functie. Een lege array kan betekenen dat de bezoeker niet tot een van de lijsten of segmenten behoort die je hebt opgegeven, dat de bezoeker niet kon worden geïdentificeerd, dat je meer dan 50 ID’s hebt doorgegeven of dat de aanvraag is mislukt. Een leeg resultaat alleen maakt geen onderscheid tussen deze gevallen.

Gebruik de geretourneerde lijst- en segment-ID's in de code van je website of in een webpersonalisatietool om relevante producten, content en meer te kiezen. Voeg de logica toe die je pagina aanpast zodra het resultaat beschikbaar is, en houd standaardcontent beschikbaar wanneer er geen overeenkomende ID's worden geretourneerd.

Codevoorbeeld

In dit voorbeeld wordt gecontroleerd of iemand lid is van meerdere segmenten. Vervang de placeholder-strings door je segment-ID's. De code in .then() wordt uitgevoerd nadat het resultaat beschikbaar is; voeg je personalisatiecode voor je site toe waar aangegeven.

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

Impact op siteprestaties

Klaviyo laadt het webpersonalisatiescript asynchroon. Houd de standaardcontent van je site beschikbaar terwijl de lidmaatschapsaanvraag wordt afgerond, en pas daarna personalisatie toe zodra je het resultaat hebt ontvangen.

Lidmaatschapsreacties kunnen door de browser worden gecachet, zodat herhaalde aanvragen voor dezelfde bezoeker en ID’s de gecachete reactie opnieuw kunnen gebruiken. Een andere aanvraag of een verlopen cache kan een extra API-aanroep vereisen, dus het resultaat geeft niet gegarandeerd meteen een wijziging in lidmaatschap weer.

Resultaat

Je kunt nu het klaviyo -JavaScript-object gebruiken met webpersonalisatietools en om content op je site te personaliseren op basis van segment- of lijstlidmaatschap.

Extra hulpbronnen