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

예상 3분 읽기

업데이트 2025년 11월 18일 오전 12:00 EST

학습 내용

Klaviyo JavaScript 객체의 getGroupMembership 메서드를 사용해 식별된 방문자의 리스트 또는 세그먼트 멤버십을 확인하고, 그 결과를 활용해 웹사이트를 개인화하는 방법을 알아보세요. 이를 위해서는 Klaviyo 객체를 로드하고, 확인할 리스트 또는 세그먼트 ID 배열을 전달해야 해요.

Klaviyo 고급 데이터 플랫폼은 Klaviyo의 표준 마케팅 애플리케이션에 포함되어 있지 않으며, 관련 기능에 액세스하려면 구독이 필요합니다. 이 요금제를 구매하는 방법을 알아보려면 결제 가이드로 이동해 주세요.

시작하기 전에 알아야 할 것

이 기능은 Klaviyo 고급 데이터 플랫폼 고객만 사용할 수 있으며, klaviyo object를 통해서만 사용할 수 있어요. klaviyo JavaScript object와 수행할 수 있는 작업에 대해 자세히 알아보려면 Klaviyo object 소개를 읽어보세요.

웹사이트 코드에 액세스할 수 있어야 합니다. JavaScript, 스니펫 설치, 또는 사이트에 개인 설정을 적용하는 데 도움이 필요하면 개발자와 협업해 주세요.

그룹 멤버십 API를 사용하려면 Klaviyo가 방문자의 브라우저를 식별하고 이를 프로필과 일치시켜야 해요. 식별되지 않은 방문자에 대해서는 리스트 또는 세그먼트 멤버십을 반환할 수 없어요. Klaviyo가 방문자를 식별하는 일반적인 방법은 다음과 같아요:

누군가 Klaviyo 이메일을 통해 웹사이트로 이동한 경우
누군가 Klaviyo 양식을 통해 구독한 경우
사이트에서 사용자가 로그인할 때 Klaviyo에서 사용자를 식별하도록 사용자 지정 트래킹을 사용하는 경우

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

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

먼저, 아직 설치하지 않았다면 Klaviyo.js를 설치해 주세요. Klaviyo.js(또는 Klaviyo의 사이트 내 활성 JavaScript라고도 함)는 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 메서드를 사용하려면:

코드에서 멤버십을 확인할 리스트 또는 세그먼트 ID를 선택하세요. 호출당 총 최대 50개의 ID를 전달할 수 있습니다.
Klaviyo 양식 또는 다른 식별 방법을 통해 사이트 방문자를 식별해요. 코드에서 klaviyo.identify를 호출하는 경우, 멤버십을 확인하기 전에 완료될 때까지 기다려요.
다음 형식으로 호출해 주세요. 멤버십 여부를 확인할 리스트 또는 세그먼트 ID 배열을 포함해야 해요:


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

이 메서드는 Promise를 반환하며, 식별된 방문자가 속한 입력 배열의 ID만 포함된 배열로 resolve돼요. 아래에 나온 것처럼 .then()을 사용해 결과를 처리하거나, async 함수 안에서 await로 결과를 받아올 수 있어요. 빈 배열은 방문자가 제공한 어떤 리스트나 세그먼트에도 속하지 않거나, 방문자를 식별할 수 없거나, 50개를 초과하는 ID를 전달했거나, 요청이 실패했음을 의미할 수 있어요. 결과가 비어 있다는 사실만으로는 이러한 경우를 구분할 수 없어요.

반환된 목록 ID와 세그먼트 ID를 웹사이트 코드 또는 웹 개인화 도구에서 사용해 관련 제품, 콘텐츠 등을 선택하세요. 결과를 사용할 수 있게 된 뒤 페이지가 변경되도록 로직을 추가하고, 일치하는 ID가 반환되지 않는 경우에는 기본 콘텐츠가 표시되도록 유지하세요.

코드 예시

이 예시는 여러 세그먼트에서 멤버십 여부를 확인해요. 자리표시자 문자열을 세그먼트 ID로 바꿔 주세요. .then() 안의 코드 는 결과를 사용할 수 있게 된 후에 실행돼요. 표시된 위치에 사이트 개인화 코드를 추가해 주세요.


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