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

**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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://workspace-help.nhn-commerce.com/contents/recommended/prm_kakaopixel_guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.