Shopify 스토어에 Klaviyo.js를 수동으로 설치하는 방법

학습 내용

Shopify 스토어에 Klaviyo의 Active on Site 트래킹 스니펫(Klaviyo의 온사이트 JavaScript 또는 Klaviyo.js라고도 함)을 수동으로 설치하는 방법을 알아보세요. 웹 트래픽이 매우 높거나 다른 이유로 사이트 로딩 시간이 느린 경우에만 이 작업을 진행해야 해요(Klaviyo에서 최근 로드 시간을 개선 했기 때문에 원인이 아닐 수도 있어요). 그 외에는 Klaviyo의 Shopify 앱 임베드를 활성화하여 Klaviyo.js를 설치하는 것을 권장해요.

시작하기 전에 알아야 할 것

Klaviyo.js를 수동으로 설치하기로 선택했고 이전에 Klaviyo의 앱 임베드를 통해 이를 활성화해 둔 경우, 먼저 Shopify 테마 설정에서 앱 임베드를 비활성화한 다음 변경 사항을 저장해야 해요.

Shopify 스토어에 Klaviyo.js 설치

1. 아래의 코드 조각을 복사하세요:

<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

1. 코드 조각에서 PUBLIC_API_KEY를 6자 Klaviyo 공개 API 키(사이트 ID)로 바꿔 주세요.
2. 스토어에서 고객 계정을(를) 사용 설정한 경우, 로그인한 고객을 이메일 주소로 식별하려면 첫 번째 스니펫 대신 아래의 전체 스크립트 세트를 사용해 주세요. 이 버전에서도 PUBLIC_API_KEY를 공개 API 키로 바꿔 주세요:

<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>
<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">
//Customer accounts
var klaviyo = window.klaviyo || [];
if ("{{ customer.email }}") {klaviyo.identify({"$email" : "{{ customer.email }}"})};
</script>

1. 테마 코드를 편집하는 방법에 대한 Shopify 안내를 사용해 Shopify 테마의 코드 편집기를 여세요.

2. Klaviyo 폼과 트래킹을 사용할 페이지의 Liquid 템플릿 또는 섹션을 여세요. 페이지에서 JSON 템플릿을 사용하는 경우, 스니펫을 JSON 파일이 아니라 해당 템플릿에서 참조하는 Liquid 섹션에 추가하세요. 자세한 내용은 Shopify의 JSON 템플릿 문서를 참조하세요.
3. 스니펫을 Liquid 파일에서 기존 HTML 아래에, {% schema %}, {% javascript %} 또는 {% stylesheet %} 블록 밖에 붙여넣어 주세요. 각 페이지에서 Klaviyo.js는 한 번만 포함해 주세요.

4. 저장을 클릭합니다.

사이트 내 활성 트래킹 테스트

사이트에서 활성 트래킹이 제대로 설정되어 있는지 테스트하려면 다음 단계를 따르세요:

1. 스토어에서 스니펫을 설치한 페이지로 이동하세요. 스토어에서 방문에 대한 트래킹 동의가 필요하면, 테스트하기 전에 동의를 제공해 주세요.
2. 해당 페이지에서 URL 끝에 다음을 추가하되 example@gmail.com을 이메일 주소로 대체해 주세요:
   ?utm_email=example@gmail.com
   
   URL에 이미 물음표(?)가 포함되어 있으면 이메일 주소를 사용해 대신 &utm_email=example@gmail.com을(를) 추가해 주세요.

3. 페이지를 새로고침합니다.
4. Klaviyo에서 이메일 주소를 검색한 다음 프로필을 여세요.
   

이메일 주소에 대한 Klaviyo 프로필(기존에 없었다면 새로 생성됨)이 표시될 거예요. 활동 로그에서 테스트 방문에 대한 사이트에서 활성 이벤트를 찾아보세요.

이제 Klaviyo.js를 설치했으므로, 활성 온 사이트 트래킹, Klaviyo 가입 양식 등 다양한 기능을 사용할 수 있어요.

추가 자료