Anleitung zum Personalisieren von Onsite-Inhalten mit der Gruppenmitgliedschafts-API von Klaviyo

Übersicht

Erfahre, wie du die Methode getGroupMembership des klaviyo -JavaScript-Objekts verwendest, die du nutzen kannst, um Onsite-Personalisierung auf deiner Website zu implementieren. Dazu musst du das klaviyo -Objekt laden und ein Array von Listen oder Segmenten zur Prüfung übergeben. Das gibt ein Ergebnis zurück, das du für die Onsite-Personalisierung nutzen kannst.

Bevor du anfängst

Wenn du das Onsite-Tracking von Klaviyo zu deiner Website hinzufügst, wird nur die Surfaktivität von „bekannten Browsern“ getrackt (d. h. Browsern, die die Website besucht, mit Engagement interagiert und identifiziert wurden oder „gecookiet“ sind). Das Onsite-Tracking von Klaviyo trackt keine anonymen Browser. Es gibt 3 wichtige Möglichkeiten, wie Klaviyo Website-Besucher*innen für das Onsite-Tracking identifiziert:

• Wenn jemand über eine Klaviyo Email auf deine Website geklickt hat
• Wenn sich jemand über ein Klaviyo-Formular angemeldet hat
• Wenn sich jemand auf deiner Website angemeldet hat und du Tracking installiert hast

Sieh dir unser Video von Klaviyo zur Verwendung der Gruppenmitgliedschafts-API an.

Klaviyo.js installieren und das Klaviyo-Objekt laden

Zuerst musst du Klaviyo.js installieren, falls du das noch nicht getan hast. Klaviyo.js, auch bekannt als Klaviyos Active on Site JavaScript, unterstützt das klaviyo Objekt automatisch. Wenn du eine Integrationen mit deinem Klaviyo Konto aktiviert oder Klaviyo.js manuell installiert hast, kannst du das klaviyo Objekt initiieren, damit es auf relevante Aufrufe wartet.

Um das klaviyo -Objekt sofort beim Laden der Seite zu verwenden, empfehlen wir, das unten stehende Snippet manuell auf deiner Website zu installieren (zusätzlich zur Installation von Klaviyo.js, wie oben erwähnt). Das klaviyo -Objekt muss nur einmal pro Seite geladen werden.

So lädst du das Klaviyo -Objekt:

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

So verwendest du die Methode getGroupMembership des klaviyo -JavaScript-Objekts für Onsite-Personalisierung:

1. Wähle in deinem Code die Listen- oder Segment-IDs aus, für die du die Mitgliedschaft prüfen möchtest. Das Limit liegt bei 50 Listen oder Segmenten.
2. Nutzer*innen auf deiner Website über ein Klaviyo Formular oder auf andere Weise identifizieren.
3. Führe einen Aufruf im folgenden Format aus, mit einem Array der Listen- oder Segment-IDs, deren Mitgliedschaft du prüfen möchtest:

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

Die bereitgestellte Ausgabe ist ein Array mit den Listen-/Segment-IDs, zu denen die identifizierte Nutzer*in gehört, vorausgesetzt, dass diese IDs im Eingabearray enthalten waren. Wenn ein leeres Array zurückgegeben wird, bedeutet das, dass du zu viele IDs übergeben hast oder dass die Nutzer*in zu keiner der von dir angegebenen Listen oder Segmente gehört.

Du kannst die zurückgegebenen Segment- und Listenzugehörigkeitsdaten verwenden, um deine Website mit relevanten Produkten, Inhalten und mehr zu personalisieren – basierend auf Kund*innensegmenten aus Klaviyo.

Codebeispiel

Hier ist ein Beispiel, das zeigt, wie die getGroupMembership-API mit mehreren Segment-IDs aufgerufen wird.

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

Auswirkungen auf die Performance der Website

Die API für Gruppenmitgliedschaften hat nur minimale Auswirkungen auf die Performance deiner Website. Die Javascript-Datei (d. h. web_personalization.js), die Klaviyo auf deiner Website lädt, ist nur etwa 1,2 KB groß, und die Bundle-Anfrage für diese Datei blockiert nicht den Main Thread, sodass sie die Benutzerfreundlichkeit keiner Seiten beeinträchtigt.

Die Daten, die geladen werden, um eine Website basierend auf dem Kund*innenprofil anzupassen, werden nach der ersten Anfrage im Browser zwischengespeichert, sodass zusätzliche Anfragen keine Backend-API-Aufrufe erfordern.

Ergebnis

Du kannst jetzt das klaviyo -JavaScript-Objekt mit Web-Personalisierungstools verwenden und Onsite-Inhalte basierend auf der Zugehörigkeit zu einem Segment oder einer Liste personalisieren.