> For the complete documentation index, see [llms.txt](https://workspace-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://workspace-help.nhn-commerce.com/contents/recommended/prm_kakaopixel_guide.md).

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

**01. 간단소개** 

* 기능 요약
  * 샵바이 엔터프라이즈 FE에 카카오 픽셀을 설치해 최적의 잠재 고객을 파악하고, 광고 성과 측정을 할 수 있습니다.
  * 카카오 픽셀 상세 가이드 : <https://kakaoad.github.io/kakao-pixel/Documentation.html>
  * 대상 솔루션: 샵바이 엔터프라이즈 전용\
    ※ 샵바이 프로의 경우 셀러어드민 내 등록된 "카카오 픽셀" 앱 다운로드를 통해 사용 가능합니다. (추후 오픈 예정)

***

**02.  카카오 픽셀 설치 가이드**<br>

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

(1) [https://business.kakao.com](https://business.kakao.com/login)에서 회원 가입\
(2) <https://business.kakao.com/pixel> 페이지에서 식별값(Track ID) 발급&#x20;

**2. 방문 이벤트 설치**

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

{% code overflow="wrap" %}

```
<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>
```

{% endcode %}

\
**3. 회원가입 이벤트 설치**

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

{% code overflow="wrap" %}

```
<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>
```

{% endcode %}

\
**4. 검색 이벤트 설치**

* 검색 결과 페이지에 설치

{% code overflow="wrap" %}

```
<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>
```

{% endcode %}

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

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

{% code overflow="wrap" %}

```
<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>
```

{% endcode %}

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

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

{% code overflow="wrap" %}

```
<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>
```

{% endcode %}

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

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

{% code overflow="wrap" %}

```
<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>
```

{% endcode %}

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

* 장바구니 페이지에 설치

{% code overflow="wrap" %}

```
<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>
```

{% endcode %}

\
**9. 구매 이벤트 설치**

* 결제 완료 페이지에 설치
  * 최종 결제 금액
    * 총 상품 금액 - 총 할인 금액 = 최종 결제금액
    * 총 상품 금액 : 전체 상품 금액 + 배송비 + 옵션가 + 텍스트 옵션가
    * 총 할인 금액 : 즉시할인 + 추가할인 + 상품 쿠폰 할인 + 장바구니 쿠폰 할인 + 장바구니 배송비쿠폰 할인 금액
  * 상품명
    * 옵션 상품인 경우 상품명\_옵션명으로 전송합니다. (ex. 티셔츠\_검정)
    * 구매자작성형 옵션명은 전송하지 않습니다.
  * 상품 가격
    * 판매가 +  옵션 가격을 포함한 금액
    * (상품 판매가 + 옵션 가격 ) \* 상품 개수
    * 각 상품의 할인 금액은 적용하지 않습니다. (ex. 상품 추가 할인, 상품쿠폰(플러스쿠폰 포함), 장바구니쿠폰, 장바구니 배송비쿠폰)
  * 화폐 단위의 기본 값은 KRW입니다.

{% code overflow="wrap" %}

```
<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>
```

{% endcode %}