Google Tag Manager를 사용해 Klaviyo 온사이트 트래킹을 추가하는 방법

학습 내용

Klaviyo의 온사이트 트래킹 스니펫을 Google 태그 매니저를 사용해 사이트에 추가하는 방법을 알아보세요. 일부 사이트 소유자는 사이트에 추가해야 하는 모든 타사 웹 스니펫을 관리하는 단일 지점으로 Google 태그 매니저를 사용합니다. Klaviyo의 온사이트 트래킹도 이 범주에 포함되며, Google 태그 매니저를 통해 추가하고 관리할 수 있습니다.

시작하기 전에 알아야 할 것

Google 태그 매니저 설정

이미 Google 태그 매니저 계정을 만들었다면 이 단계는 건너뛰고 태그 만들기 섹션으로 이동할 수 있어요.
1. Google 태그 매니저 계정을 만드세요.
2. 설치 스크립트를 사이트에 추가하세요.

Google Tag Manager 사용이 처음이라면 계정을 설정하고 사이트에 설치 스크립트를 추가하는 방법에 대한 문서를 확인해 보세요.

새 태그 만들기

1. 사이트의 워크스페이스에서 Klaviyo Active on Site 트래킹을 위한 새 트리거를 만드세요. Active on Site 및 Viewed Product 트래킹에는 별도의 트리거를 만드는 것을 권장해요. 이는 Viewed Product 트래킹은 제품 페이지에서만 트리거되는 반면, 활성 on Site 트래킹은 사이트의 모든 페이지에서 트리거되어야 하기 때문이에요.
2. 태그 유형으로 사용자 지정 HTML을 선택하세요.

3. Klaviyo에서 사이트에서 활성 스니펫을 찾으려면 계정 메뉴를 클릭하고 연동.
을(를) 선택해 주세요.4. 여기에서 오른쪽 상단에 있는 웹 추적 설정 버튼을 클릭해 주세요.

6. Google Tag Manager에서 Klaviyo 사이트에서 활성 스니펫을 HTML 상자에 붙여넣으세요.

7. 모든 페이지의 페이지 조회에서 트리거가 실행되도록 설정하세요. 이렇게 하면 고객이 사이트에서 페이지를 볼 때마다 Active on Site 스니펫이 실행됩니다.

8. 새 태그를 저장하세요. 이로써 Google 태그 매니저를 사용하여 사이트에서 활성 트래킹 스니펫을 추가하는 작업이 완료됩니다.

같은 방법으로 Viewed Product 스니펫도 추가할 수 있어요. 트리거가 제품이 포함된 페이지만 실행되도록 수정하세요. 일부 사이트에서는 URL에 "product"라는 단어가 포함된 페이지에서만 트리거가 실행되도록 제한하여 이를 수행할 수 있어요.

온사이트 추적 테스트

1. 웹사이트로 이동하세요.
2. URL 끝에 다음을 추가하세요:

?utm_email=klaviyogreen@gmail.com

“klaviyogreen@gmail.com”을(를) 본인 이메일 주소로 바꿀 수 있어요. Enter 키를 눌러 페이지를 새로고침하세요.

3. 그런 다음 Klaviyo 계정에서 대시보드 > 활동 피드로 이동해 주세요. 온사이트 트래킹이 올바르게 설치되어 있다면 위의 URL 파라미터에 입력한 이메일을 기준으로 활동 피드 상단에 새로운 사이트에서 활성 이벤트가 표시될 거예요.

Viewed Product 이벤트가 실행되지 않으면 태그가 특정 순서로 실행되도록 설정되어 있는지 확인해 주세요. 항상 활성 on Site 스니펫이 Viewed Product 스니펫보다 먼저 실행되도록 해야 해요.

Google 태그 매니저에서 트래킹 스니펫 중 하나를 저장하려고 할 때 오류가 발생하면 스니펫을 사이트에 직접 붙여넣어야 합니다.

Shopify에서 Google Tag Manager 사용하기

Shopify에서는 Google Tag Manager를 사용하는 대신 Shopify에서 Klaviyo의 앱 임베드를 통해 Klaviyo 온사이트 트래킹을 활성화하는 것이 권장됩니다. 앱 임베드는 켜져 있고 연동 설정 페이지에서 Viewed Product 설정이 선택되어 있다면 활성 on Site 및 Viewed Product 트래킹을 모두 활성화합니다. Shopify 연동은 Track behavioral events 설정을 통해 Submitted Search, Viewed Collection, Added to Cart도 활성화합니다.

대신 Google Tag Manager를 통해 온사이트 트래킹을 추가하려면 먼저 앱 임베드를 끄도록 토글을 꺼 주세요. 그런 다음 아래 스니펫을 사용하세요.

“컬렉션”은 Shopify의 AJAX API를 통해 사용할 수 없으므로, 대신 아래 스니펫에서 Shopify 제품 태그(태그)가 캡처됩니다.

<script type="text/javascript"> 
//Initialize the Klaviyo object on page load
!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)}}}}(); </script>
<script type="text/javascript">
//Viewed Product
var klaviyo = window.klaviyo || [];
product_handle = location.href.split( '/' ).pop().split( '?' )[0];
fetch('/products/'+product_handle+'.js').then(function(response){return response.json()})
.then(function(product){
  var item = {
    Name: product.title,
    ProductID: product.id,
    Tags: product.tags,
    ImageURL: "https:"+product.featured_image,
    URL: location.href.split( '/' )[0] + '//' + location.href.split( '/' )[2]+product.url,
    Brand: product.vendor,
    Price: product.price/100,
    CompareAtPrice: product.compare_at_price_max/100
  };
  klaviyo.track("Viewed Product", item);
  klaviyo.trackViewedItem({
    Title: item.Name,
    ItemId: item.ProductID,
    Tags: item.Categories,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  });
// If you would like to add the Added to Cart snippet as well, place that here without its script tags
})
.catch(function(e){
  console.log('Klaviyo could not track Viewed Product. Please contact Klaviyo Support for assistance.')
});
</script>