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

Czego się dowiesz?

Dowiedz się, jak korzystać z metody getGroupMembership obiektu JavaScript klaviyo, której można użyć do wdrożenia personalizacji na stronie internetowej. Wymaga to załadowania obiektu klaviyo i przekazania tablicy list lub segmentów do sprawdzenia, co zwróci wynik, który można wykorzystać do personalizacji na stronie internetowej.

Kilka słów na początek

Gdy dodasz do swojej witryny śledzenie onsite Klaviyo, śledzona jest tylko aktywność przeglądania „znanych przeglądarek” (tj. przeglądarek, które odwiedziły witrynę, były zaangażowani i zostały zidentyfikowane lub „ociasteczkowane”). Śledzenie onsite Klaviyo nie śledzi anonimowych przeglądarek. Istnieją 3 kluczowe sposoby, w jakie Klaviyo zidentyfikuje osobę odwiedzającą witrynę na potrzeby śledzenia onsite:

• 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 ktoś zalogował się w Twojej witrynie i masz zainstalowane śledzenie

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

Zainstaluj Klaviyo.js i załaduj obiekt Klaviyo

Najpierw trzeba zainstalować Klaviyo.js, jeśli jeszcze tego nie zrobiono. Klaviyo.js, znany również jako Active on Site JavaScript Klaviyo, automatycznie obsługuje obiekt klaviyo. Jeśli włączono integrację z kontem Klaviyo lub zainstalowano Klaviyo.js ręcznie, będzie można zainicjować obiekt klaviyo, aby nasłuchiwał odpowiednich wywołań.

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

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

1. W kodzie wybierz identyfikatory list lub segmentów, dla których chcesz sprawdzić członkostwo. Limit wynosi 50 list lub segmentów.
2. Identyfikuj użytkowników w swojej witrynie za pomocą formularza Klaviyo lub w inny sposób.
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'])

Wynikiem będzie tablica identyfikatorów list/segmentów, do których należy zidentyfikowany profil użytkownika, pod warunkiem że te identyfikatory znajdowały się w tablicy wejściowej. Jeśli zostanie zwrócona pusta tablica, oznacza to, że przekazano zbyt wiele identyfikatorów lub że użytkownik nie należy do żadnej z podanych list ani segmentów.

Możesz użyć zwróconych danych segmentu i członkostwa na liście, aby dostosować swoją witrynę za pomocą odpowiednich produktów, treści i nie tylko na podstawie segmentów klientów z Klaviyo.

Przykład kodu

Oto przykład pokazujący, jak wywołać API getGroupMembership z wieloma identyfikatorami segmentów.

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

Wpływ na wydajność witryny

Interfejs API członkostwa w grupie ma minimalny wpływ na wydajność Twojej witryny. Plik Javascript (tj. web_personalization.js), który Klaviyo ładuje w Twojej witrynie, ma tylko około 1,2 KB, a żądanie pakietu dla tego pliku nie blokuje głównego wątku, więc nie wpływa na użyteczność żadnych stron.

Dane wczytywane w celu dostosowania witryny na podstawie profilu klienta są buforowane w przeglądarce po pierwszym żądaniu, więc kolejne żądania nie wymagają wywołań API backendu.

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