[엔터프라이즈] 카카오 픽셀 설치 가이드

샵바이 엔터프라이즈 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>

Previous[엔터프라이즈] PG신청 가이드 (2024/4/1 업데이트)Next[엔터프라이즈]정기결제(배송) API 화면가이드

Last updated 2 months ago

Was this helpful?