[프리미엄] 카카오 픽셀 설치 가이드

샵바이프리미엄 FE에 카카오에서 제공하는 전환추적 서비스 사용을 위해 카카오 픽셀 설치를 어떻게 할 수 있는지 안내하기 위한 콘텐츠입니다.

01. 간단소개

• 기능 요약

  • 샵바이 프리미엄 FE에 카카오 픽셀을 설치해 최적의 잠재 고객을 파악하고, 광고 성과 측정을 할 수 있습니다.

  • 카카오 픽셀 상세 가이드 : https://kakaoad.github.io/kakao-pixel/Documentation.html

  • 대상 솔루션: 샵바이프리미엄 전용 ※ 샵바이 프로의 경우 셀러어드민 내 등록된 "카카오 픽셀" 앱 다운로드를 통해 사용 가능합니다. (추후 오픈 예정)

---

02. 카카오 픽셀 설치 가이드

1. Track ID 발급 카카오 픽셀을 이용하기 위해서는, 고유 식별값(Track ID)이 필요합니다. 식별값(Trrack ID) 발급 방법은 하기와 같습니다.

(1) https://business.kakao.com에서 회원 가입 (2) https://business.kakao.com/pixel 페이지에서 식별값(Track ID) 발급

2. 방문 이벤트 설치

• 모든 웹페이지에 설치(공통)

<script type="text/javascript" charset="UTF-8" src="//[t1.daumcdn.net/kas/static/kp.js](http://t1.daumcdn.net/kas/static/kp.js)"></script>
<script type="text/javascript">
      kakaoPixel('발급받은 Track ID 입력').pageView();
      kakaoPixel.setServiceOrigin('20005’); //카카오 픽셀에서 NHN 커머스 샵바이 솔루션 구분용 코드
</script>

3. 회원가입 이벤트 설치

• 회원가입 완료 페이지에 설치

<script type="text/javascript" charset="UTF-8" src="//[t1.daumcdn.net/kas/static/kp.js](http://t1.daumcdn.net/kas/static/kp.js)"></script>
<script type="text/javascript">
      kakaoPixel('발급받은 Track ID 입력').pageView();
      kakaoPixel.setServiceOrigin('20005’); //카카오 픽셀에서 NHN 커머스 샵바이 솔루션 구분용 코드
      kakaoPixel('발급받은 Track ID 입력').completeRegistration();
</script>

4. 검색 이벤트 설치

• 검색 결과 페이지에 설치

<script type="text/javascript" charset="UTF-8" src="//[t1.daumcdn.net/kas/static/kp.js](http://t1.daumcdn.net/kas/static/kp.js)"></script>
<script type="text/javascript">
      kakaoPixel('발급받은 Track ID 입력').pageView();
      kakaoPixel.setServiceOrigin('20005’); //카카오 픽셀에서 NHN 커머스 샵바이 솔루션 구분용 코드
      kakaoPixel('발급받은 Track ID 입력').search({
        keyword: '검색 키워드 입력'
      });
</script>

5. 콘텐츠/ 상품 조회 이벤트 설치

• 콘텐츠(리스트) 페이지, 상품 상세 페이지에 설치

<script type="text/javascript" charset="UTF-8" src="//[t1.daumcdn.net/kas/static/kp.js](http://t1.daumcdn.net/kas/static/kp.js)"></script>
<script type="text/javascript">
      kakaoPixel('발급받은 Track ID 입력').pageView();
      kakaoPixel.setServiceOrigin('20005’); //카카오 픽셀에서 NHN 커머스 샵바이 솔루션 구분용 코드
      kakaoPixel('발급받은 Track ID 입력').viewContent({
        id: '상품번호 입력'
      });
</script>

6. 장바구니 추가 이벤트 설치

• 장바구니 추가 버튼에 설치

  • 장바구니 추가 버튼 클릭 시 동적으로 스크립트가 작동하는 방식으로 구현이 필요합니다.

<script type="text/javascript" charset="UTF-8" src="//[t1.daumcdn.net/kas/static/kp.js](http://t1.daumcdn.net/kas/static/kp.js)"></script>
<script type="text/javascript">
    kakaoPixel.setServiceOrigin('20005’); //카카오 픽셀에서 NHN 커머스 샵바이 솔루션 구분용 코드
    kakaoPixel('발급받은 Track ID 입력').addToCart({
        id: '상품번호 입력'
      });
</script>

7. 관심상품 추가 이벤트 설치

• 관심상품 추가 버튼에 설치

  • 관심상품 추가 버튼 클릭 시 동적으로 스크립트가 작동하는 방식으로 구현이 필요합니다.

<script type="text/javascript" charset="UTF-8" src="//[t1.daumcdn.net/kas/static/kp.js](http://t1.daumcdn.net/kas/static/kp.js)"></script>
<script type="text/javascript">
      kakaoPixel.setServiceOrigin('20005’); //카카오 픽셀에서 NHN 커머스 샵바이 솔루션 구분용 코드
      kakaoPixel('발급받은 Track ID 입력').addToWishList({
        id: '상품번호 입력'
      });
</script>

8. 장바구니 보기 이벤트 설치

• 장바구니 페이지에 설치

<script type="text/javascript" charset="UTF-8" src="//[t1.daumcdn.net/kas/static/kp.js](http://t1.daumcdn.net/kas/static/kp.js)"></script>
<script type="text/javascript">
      kakaoPixel('발급받은 Track ID 입력').pageView();
      kakaoPixel.setServiceOrigin('20005’); //카카오 픽셀에서 NHN 커머스 샵바이 솔루션 구분용 코드
      kakaoPixel('발급받은 Track ID 입력').viewCart();
</script>

9. 구매 이벤트 설치

• 결제 완료 페이지에 설치

  • 최종 결제 금액

    • 총 상품 금액 - 총 할인 금액 = 최종 결제금액

    • 총 상품 금액 : 전체 상품 금액 + 배송비 + 옵션가 + 텍스트 옵션가

    • 총 할인 금액 : 즉시할인 + 추가할인 + 상품 쿠폰 할인 + 장바구니 쿠폰 할인 + 장바구니 배송비쿠폰 할인 금액

  • 상품명

    • 옵션 상품인 경우 상품명_옵션명으로 전송합니다. (ex. 티셔츠_검정)

    • 구매자작성형 옵션명은 전송하지 않습니다.

  • 상품 가격

    • 판매가 + 옵션 가격을 포함한 금액

    • (상품 판매가 + 옵션 가격 ) * 상품 개수

    • 각 상품의 할인 금액은 적용하지 않습니다. (ex. 상품 추가 할인, 상품쿠폰(플러스쿠폰 포함), 장바구니쿠폰, 장바구니 배송비쿠폰)

  • 화폐 단위의 기본 값은 KRW입니다.

<script type="text/javascript" charset="UTF-8" src="//[t1.daumcdn.net/kas/static/kp.js](http://t1.daumcdn.net/kas/static/kp.js)"></script>
<script type="text/javascript">
      kakaoPixel('발급받은 Track ID 입력').pageView();
      kakaoPixel.setServiceOrigin('20005’); //카카오 픽셀에서 NHN 커머스 샵바이 솔루션 구분용 코드
      kakaoPixel('발급받은 Track ID 입력').purchase({
        total_quantity: "상품 개수", 
        total_price: "총 결제 금액",
        currency: "화폐 단위",
        products: [
            { id: "상품번호 입력", name: "상품명1", quantity: "상품 개수", price: "결제 금액"},
            { id: "상품번호 입력", name: "상품명2", quantity: "상품 개수", price: "결제 금액"}
        ]
    });
</script>