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 키로 꼭 바꿔 주세요.
2. 스토어에서 고객 계정을 활성화한 경우, 스토어에 로그인할 때 사용하는 이메일로 고객을 식별할 수 있도록 추가 스크립트를 추가하세요. 전체 스크립트 세트는 다음과 같이 표시됩니다.

<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 관리자에서 온라인 스토어 > 테마를 클릭합니다. 드롭다운에서 코드 편집을 클릭하세요.
   

2. 스니펫을 추가할 파일을 검색한 다음, 클릭하여 편집기에서 여세요. 해당 페이지에서 Klaviyo 양식과 트래킹을 사용 설정하려는 모든 페이지 템플릿에 스니펫을 추가할 수 있어요.
3. 파일 맨 아래로 스크롤한 다음, 아래의 스니펫을 다른 코드 아래에 붙여넣어 주세요.
   

4. 저장을 클릭합니다.

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

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

1. 웹사이트로 이동합니다.
2. 홈페이지에서 URL 끝에 다음을 추가하여 example@gmail.com을 자신의 이메일 주소로 대체합니다.
   ?utm_email=example@gmail.com

3. 페이지를 새로고침합니다.
4. Klaviyo에서 자신의 이메일 주소를 검색합니다.

Klaviyo 프로필이 생성되었고(아직 생성되지 않은 경우) 이 활동이 활동 피드에서 추적된 것을 확인할 수 있어요.

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