Klaviyo의 그룹 멤버십 API로 온사이트 콘텐츠를 개인화하는 방법

학습 내용

웹사이트에서 온사이트 개인화를 구현하는 데 사용할 수 있는 Klaviyo JavaScript 객체의 getGroupMembership 메서드를 사용하는 방법을 알아보세요. 이를 위해서는 Klaviyo 객체를 로드하고 확인할 리스트 또는 세그먼트 배열을 전달해야 하며, 그러면 온사이트 개인화에 활용할 수 있는 출력이 반환돼요.

시작하기 전에 알아야 할 것

사이트에 Klaviyo 온사이트 트래킹을 추가하면 '알려진 브라우저'의 검색 활동만 추적됩니다. 방문, 참여도가 높은, 식별 또는 '쿠키 지정'된 브라우저)입니다. Klaviyo의 온사이트 트래킹은 익명 브라우저를 추적하지 않습니다. Klaviyo가 온사이트 추적을 위해 사이트 방문자를 식별하는 방법에는 세 가지가 있습니다.

• 누군가 Klaviyo 이메일을 통해 웹사이트로 이동한 경우
• 누군가 Klaviyo 양식을 통해 구독한 경우
• 누군가 사이트에 로그인했고 트래킹이 설치되어 있다면

그룹 멤버십 API를 사용하는 방법에 대한 Klaviyo 동영상을 확인하세요.

Klaviyo.js를 설치하고 Klaviyo 객체를 로드하세요.

아직 설치하지 않았다면 먼저 Klaviyo.js를 설치해야 해요. Klaviyo.js는 Klaviyo의 활성 on Site JavaScript라고도 하며, klaviyo 객체를 자동으로 지원해요. Klaviyo 계정에 대한 연동을 활성화했거나 Klaviyo.js를 수동으로 설치했다면, klaviyo 객체를 시작하여 관련 호출을 수신하도록 할 수 있어요.

페이지 로드 시 즉시 klaviyo 객체를 사용하려면, 위에서 언급한 대로 Klaviyo.js를 설치하는 것 외에도 사이트에 아래 스니펫을 수동으로 설치하는 것을 권장해요. klaviyo 객체는 페이지당 한 번만 로드하면 돼요.

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

온사이트 개인화를 위해 klaviyo JavaScript 객체의 getGroupMembership 메서드를 사용하려면:

1. 코드에서 멤버십을 확인할 리스트 또는 세그먼트 ID를 선택해 주세요. 제한은 리스트 또는 세그먼트 50개예요.
2. Klaviyo 양식 또는 기타 방법을 통해 사이트에서 사용자를 식별해요.
3. 다음 형식으로 호출해 주세요. 멤버십 여부를 확인할 리스트 또는 세그먼트 ID 배열을 포함해야 해요:

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

제공되는 출력은 식별된 사용자가 속한 목록/세그먼트 ID 배열이며, 해당 ID가 입력 배열에 포함된 경우에 한해 반환돼요. 빈 배열이 반환되면 ID를 너무 많이 전달했거나, 사용자가 제공한 목록 또는 세그먼트에 아무 것도 속해 있지 않다는 뜻이에요.

반환된 세그먼트 및 리스트 멤버십 데이터를 사용해 Klaviyo의 고객 세그먼트를 기반으로 관련 제품, 콘텐츠 등을 사이트에 맞춤 설정할 수 있어요.

코드 예시

여기에는 여러 세그먼트 ID로 getGroupMembership API를 호출하는 방법을 보여주는 예시가 있습니다.

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

사이트 성능에 미치는 영향

그룹 멤버십 API는 사이트 성능에 미치는 영향이 최소예요. Klaviyo가 사이트에 로드하는 Javascript 파일(예: web_personalization.js)은 약 1.2KB에 불과하며 이 파일의 번들 요청은 메인 스레드를 차단하지 않으므로 어떤 페이지의 사용성에도 영향을 주지 않습니다.

고객 프로필을 기반으로 사이트를 맞춤 설정하기 위해 로드되는 데이터는 처음 요청된 후 브라우저에 캐시되므로, 추가 요청 시에는 백엔드 API 호출이 필요하지 않아요.

결과

이제 웹 개인화 도구에서 klaviyo JavaScript 객체를 사용하고, 세그먼트 또는 리스트 멤버십을 기반으로 사이트 내 콘텐츠를 개인화할 수 있어요.