학습 내용
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 태그 관리자 사용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>
Shopify 의 고객사 개인정보 설정에 따라 Klaviyo 은 EU, EEA, 영국 및 스위스에서 귀하의 Shopify 스토어 방문자에 대한 현장 이벤트를 추적할 수 없으며, 해당 방문자가 동의하지 않는 한 추적할 수 없습니다.