Jak personalizować treści na stronie za pomocą API członkostwa w grupach Klaviyo

Czego się dowiesz?

Dowiedz się, jak używać metody getGroupMembership obiektu JavaScript Klaviyo, aby sprawdzić, czy zidentyfikowany użytkownik należy do listy lub segmentu, i wykorzystać wyniki do personalizacji Twojej witryny internetowej. Wymaga to załadowania obiektu Klaviyo i przekazania tablicy identyfikatorów list lub segmentów do sprawdzenia.

Kilka słów na początek

Potrzebny będzie dostęp do kodu Twojej strony. Jeśli potrzebujesz pomocy z JavaScriptem, instalacją fragmentów kodu lub wdrożeniem personalizacji na stronie, skonsultuj się z programistą.

API członkostwa w grupie wymaga, aby Klaviyo zidentyfikowało przeglądarkę użytkownika i dopasowało ją do profilu. Nie może zwrócić informacji o członkostwie na liście lub w segmencie dla niezidentyfikowanego użytkownika. Typowe sposoby, w jakie Klaviyo identyfikuje użytkownika, obejmują:

• Jeśli ktoś kliknął link w wiadomości Klaviyo Email, aby przejść na Twoją stronę internetową
• Jeśli ktoś zasubskrybował za pomocą formularza Klaviyo
• Jeśli Twoja strona używa niestandardowego śledzenia, aby identyfikować kogoś w Klaviyo, gdy się loguje

Zobacz film Klaviyo o korzystaniu z API członkostwa w grupie.

Zainstaluj Klaviyo.js i załaduj obiekt Klaviyo

Najpierw zainstaluj Klaviyo.js, jeśli jeszcze tego nie zrobiłeś. Klaviyo.js, znany również jako JavaScript Klaviyo aktywni on Site, obsługuje obiekt Klaviyo. Jeśli Twoja integracja e-commerce zainstalowała na Twojej stronie Klaviyo.js, nie musisz instalować go ponownie. W przeciwnym razie zainstaluj go ręcznie przed użyciem obiektu klaviyo.

Aby używać obiektu Klaviyo natychmiast po załadowaniu strony, zalecamy ręczną instalację poniższego fragmentu kodu w witrynie (oprócz zainstalowania pliku Klaviyo.js, jak wspomniano powyżej). Obiekt Klaviyo trzeba załadować tylko raz na stronę.

Aby załadować obiekt 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);
        });
    }
  }
})();

Sprawdź członkostwo w liście lub segmencie

Aby użyć metody getGroupMembership obiektu JavaScript Klaviyo do personalizacji na stronie:

1. W swoim kodzie wybierz identyfikatory list lub segmentów, dla których chcesz sprawdzić członkostwo. Możesz przekazać łącznie maksymalnie 50 identyfikatorów na jedno wywołanie.
2. Zidentyfikuj osobę odwiedzającą Twoją stronę za pomocą formularza Klaviyo lub innej metody identyfikacji. Jeśli w swoim kodzie wywołujesz klaviyo.identify, poczekaj na zakończenie tego procesu, zanim sprawdzisz członkostwo.
3. Wykonaj wywołanie w następującym formacie, z tablicą identyfikatorów listy lub segmentu, dla których chcesz sprawdzić członkostwo:

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

Ta metoda zwraca Promise, który rozwiązuje się do tablicy zawierającej tylko te identyfikatory z Twojej tablicy wejściowej, do których należy zidentyfikowany użytkownik. Użyj .then(), aby pracować z wynikiem, jak pokazano poniżej, albo użyj await dla wyniku wewnątrz funkcji async. Pusta tablica może oznaczać, że użytkownik nie należy do żadnej z podanych list lub segmentów, że nie udało się zidentyfikować użytkownika, że przekazano ponad 50 identyfikatorów albo że żądanie się nie powiodło. Sam pusty wynik nie pozwala rozróżnić tych przypadków.

Użyj zwróconej listy oraz identyfikatorów segmentów w kodzie swojej witryny lub narzędziu do personalizacji w sieci, aby wybierać odpowiednie produkty, treści i nie tylko. Dodaj logikę, która zmienia stronę po udostępnieniu wyniku, i pozostaw domyślne treści dostępne, gdy nie zostaną zwrócone żadne pasujące identyfikatory.

Przykład kodu

Ten przykład sprawdza przynależność do wielu segmentów. Zastąp ciągi zastępcze identyfikatorami swoich segmentów. Kod wewnątrz .then() uruchamia się po udostępnieniu wyniku; dodaj kod personalizacji swojej witryny w wskazanym miejscu.

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

Wpływ na wydajność witryny

Klaviyo ładuje skrypt personalizacji internetowej asynchronicznie. Zachowaj domyślną treść witryny dostępną podczas przetwarzania żądania członkostwa, a następnie zastosuj personalizację po otrzymaniu wyniku.

Odpowiedzi członkostwa mogą być buforowane przez przeglądarkę, co pozwala, aby powtarzające się żądania dla tego samego odwiedzającego i identyfikatorów ponownie wykorzystywały zbuforowaną odpowiedź. Inne żądanie lub wygasły cache może wymagać kolejnego wywołania API, więc nie ma gwarancji, że wynik od razu odzwierciedli zmianę członkostwa.

Rezultat

Możesz teraz używać obiektu JavaScript Klaviyo z narzędziami do personalizacji stron internetowych oraz do personalizowania treści na stronie na podstawie przynależności do segmentu lub listy.

Dodatkowe źródła