Google 태그 관리자를 사용하여 클라비요 현장 추적을 추가하는 방법

학습 내용

Google 태그 관리자를 사용하여 클라비요의 온사이트 추적 스니펫을 사이트에 추가하는 방법을 알아보세요. 일부 사이트 소유자는 Google 태그 관리자를 단일 지점으로 사용하여 사이트에 추가해야 하는 모든 타사 웹 스니펫을 관리합니다. 클라비요의 현장 추적은 이 범주에 속하며, 구글 태그 매니저를 통해 추가 및 관리할 수 있습니다.

시작하기 전 안내 사항

Google 태그 관리자 설정

이미 Google 태그 관리자 계정을 만든 경우 이 단계를 건너뛰고 태그 만들기 섹션으로 이동할 수 있습니다.
1. Google 태그 관리자 계정을 만듭니다.
2. 사이트에 설치 스크립트를 추가합니다.

Google 태그 매니저를 처음 사용하는 경우 계정 설정 및 사이트에 설치 스크립트 추가에 대한 설명서를 검토하세요.

새 태그 만들기

1. 사이트의 작업 영역 내에서 클라비요 액티브 온 사이트 추적에 대한 새 트리거를 생성합니다. 사이트 내 활성 및 조회된 제품 추적을 위한 별도의 트리거를 생성하는 것이 좋습니다. 조회된 제품 추적은 제품 페이지에서만 트리거되는 반면, 사이트 내 활성 추적은 사이트의 모든 페이지에서 트리거되어야 하기 때문입니다.
2. 태그 유형으로 사용자 지정 HTML을 선택합니다.

3. 클라비요에서 액티브 온 사이트 스니펫을 찾으려면 계정 메뉴를 클릭하고 연동을 선택합니다.
4. 여기에서 오른쪽 상단의 웹 추적 설정 버튼을 클릭합니다.


5. 첫 번째 스니펫을 복사합니다. 

6. 구글 태그 관리자에서 클라비요 액티브 온 사이트 스니펫을 HTML 상자에 붙여넣습니다.

7. 모든 페이지에 대한 페이지 보기에서 트리거가 실행되도록 설정합니다. 이렇게 하면 고객이 사이트의 페이지를 볼 때마다 액티브 온 사이트 스니펫이 실행됩니다.

8. 새 태그를 저장합니다. 이로써 Google 태그 관리자를 사용하여 사이트 내 활성 추적 스니펫 추가가 완료되었습니다.

동일한 방법으로 조회한 제품 스니펫을 추가할 수 있습니다. 제품이 포함된 페이지에서만 트리거가 실행되도록 트리거를 수정합니다. 일부 사이트에서는 URL에 "제품" 이라는 단어가 포함된 페이지에서만 트리거가 실행되도록 제한하여 이를 수행할 수 있습니다.

온사이트 추적 테스트

1. 웹사이트로 이동합니다.
2. 2. URL 끝에 다음을 추가합니다:

?utm_email=klaviyogreen@gmail.com

"klaviyogreen@gmail.com" 을 자신의 이메일 주소로 바꿀 수 있습니다. Enter 키를 눌러 페이지를 다시 로드합니다.

3. 그런 다음 클라비요 계정에서 대시보드 > 활동 피드로 이동합니다. 사이트 추적이 올바르게 설치되었다면 위의 URL 매개변수에 입력한 이메일에서 활동 피드 상단에 새로운 사이트 내 활성 이벤트가 표시됩니다.

조회된 제품 이벤트가 실행되는 데 문제가 있는 경우 태그가 특정 순서로 실행되도록 설정되어 있는지 확인하세요. 항상 사이트 내 활성 스니펫이 조회된 제품 스니펫보다 먼저 실행되기를 원합니다.

Google 태그 관리자에서 추적 코드 조각을 저장하려고 할 때 오류가 발생하면 해당 코드 조각을 사이트에 직접 붙여넣어야 합니다.

Shopify에서 Google 태그 관리자 사용

ShopifyGoogle 태그 관리자를 사용하는 대신 의 앱 임베드 Klaviyo (Klaviyo)를 통해 현장 Shopify 추적을 활성화하는 것이 좋습니다. 앱 임베드는 토글이 켜져 있고 통합 설정 페이지에서 조회된 제품 설정이 선택되어 있으면 사이트 내 활성 및 조회된 제품 추적을 모두 활성화합니다. 또한 Shopify 통합을 통해 행동 이벤트 추적 설정을 통해 검색 제출, 컬렉션 보기 및 장바구니에 추가를 활성화할 수 있습니다.

대신 Google 태그 관리자를 통해 온사이트 추적을 추가하려면 먼저 앱 임베드를 토글해야 합니다. 그런 다음 아래 스니펫을 사용하세요.

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

<스크립트 유형="텍스트/자바스크립트"> 
//페이지 로드 시 클라비요 객체를 초기화합니다.
!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=새) 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>
<스크립트 유형="텍스트/자바스크립트">
//본 제품
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("조회됨 제품", 항목);
  klaviyo.trackViewedItem({
    제목: item.Name,
    ItemId: item.ProductID,
    태그: item.카테고리,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    메타데이터: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  });
// 장바구니에 추가됨 스니펫도 추가하려면 스크립트 태그 없이 여기에 배치하세요.
})
.catch(function(e){
  console.log('Klaviyo could not track Viewed Product. Please contact Klaviyo Support for assistance.')
});
</script>

추가 리소스

• Klaviyo 온사이트 추적 시작하기
• 메시지 전환 추적에 대한 이해
• 찾아보기 포기 흐름 생성 가이드