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

학습 내용

Klaviyo의 사이트 내 활성화 추적 스니펫(Klaviyo의 사이트 내 자바스크립트 또는 Klaviyo.js라고도 함)을 Shopify 스토어에 수동으로 설치하는 방법을 알아보십시오. 웹 트래픽이 매우 많거나 다른 이유로 사이트 로딩 시간이 느린 경우에만 이 작업을 수행해야 합니다(최근 클라비요에서 로딩 시간을 개선했으므로 이 원인이 아닐 수도 있음). 그렇지 않은 경우Klaviyo의 Shopify 앱 임베드를 활성화하여  에서 Klaviyo.js를 설치하는 것이 좋습니다.

시작하기 전 안내 사항

Klaviyo.js를 수동으로 설치하기로 선택하고 이전에 Klaviyo의 앱 임베드를 통해 사용하도록 설정한 경우에는 먼저 Shopify 테마 설정에서 앱 임베드를 비활성화해야 합니다.

Shopify 스토어에 Klaviyo.js 설치

1. 아래 코드 스니펫을 복사하세요:

   <스크립트 유형="텍스트/자바스크립트" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

2. 코드 조각에서 PUBLIC_API_KEY를 6자리 Klaviyo 공개 API 키로 바꿔야 합니다.
3. 스토어에 고객 계정을 사용하도록 설정한 경우 스토어 로그인에 사용하는 이메일로 고객을 식별하는 추가 스크립트를 추가합니다. 전체 스크립트 세트는 다음과 같습니다:

   <스크립트 유형="텍스트/자바스크립트" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>
   <script type="text/javascript"> //페이지 로드 시 Klaviyo 객체를 초기화 !function(){if(!window.Klaviyo){wow._klOnsite=wow._klOnsite||[];try{wow.Klaviyo=새로운 프록시({},{get:function(n,i){return"푸시"===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=새 Promise((function(n){window._klOnsite.푸시([i].concat(o,[function(i){t&&t(i),n(i)}]))});return e}}})}catch(n){window.Klaviyo=window.Klaviyo[],window.Klaviyo.푸시=function(){var n;(n=window._klOnsite).푸시.적용(n,인수)}}}}(); </script>
   < script type="text/javascript"> 
    //고객 계정
   var Klaviyo = window.Klaviyo || [];
   if ("{{ customer.email }}" ) {Klaviyo.identify({"$email" : "{{ customer.email }}"})};
   </script>
   

4. Shopify 관리자에서 온라인 스토어 > 테마를 클릭합니다. 드롭다운에서 코드 편집을 클릭합니다.
   
5. 스니펫을 추가할 파일을 검색하고 클릭하여 편집기에서 엽니다. 해당 페이지에서 클라비요 양식 및 추적을 활성화하려는 모든 페이지 템플릿에 스니펫을 추가할 수 있습니다. 
6. 파일 하단으로 스크롤하여 다른 코드 아래에 스니펫을 붙여넣습니다.
   
7. 저장을 클릭합니다.

사이트 내 활성 상태 추적 테스트

 사이트에서 활성상태 추적이 제대로 설정되었는지 테스트하려면 다음 단계를 따르세요:

1. 웹사이트로 이동합니다.
2. 홈페이지에서 URL 끝에 example@gmail.com을 대신하여 다음을 추가합니다. 이메일 주소를 입력하세요:
   ?utm_email=example@gmail.com
   
   
3. 페이지를 새로고침합니다.
4. 클라비요에서 이메일 주소를 검색합니다.
   

클라비요 프로필이 생성되어 있고(아직 생성되지 않은 경우) 이 활동이 활동 피드에서 추적되고 있는 것을 확인할 수 있습니다.

이제 클라비요.js를 설치했습니다, 사이트 내 활성 상태 추적, 클라비요 가입 양식 등을 활용할 수 있습니다. 

추가 리소스

• Shopify 시작하기
• Klaviyo 온사이트 추적 시작하기
• 가입 양식으로 시작하기