> For the complete documentation index, see [llms.txt](https://marketing-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://marketing-help.nhn-commerce.com/conversion-tracking-setup/shopby-ads-script/kakao-pixel.md).

# 카카오

### 관련 문서

* 샵바이 변수 조회 가이드:  <https://admin-remote.shopby.co.kr/popup/variable-guide>
* 카카오 픽셀 가이드: [https://kakaoad.github.io/kakao-pixel](https://kakaoad.github.io/kakao-pixel/)

### 픽셀 아이디 발급 방법

1. 카카오모먼트 관리자페이지(moment.kakao.com)으로 이동 합니다.
2. 하기와 같은 화면에서 +픽셀 & SDK 발급 버튼을 클릭 합니다.
   1\.

   ```
   <figure><img src="/files/Hcqyp8nsBAlwhnQUsnqa" alt=""><figcaption></figcaption></figure>
   ```
3. 아래와 같은 화면에서 픽셀 이름을 입력 합니다.
   1\.

   ```
   <figure><img src="/files/LUhCmdJhxEw6uU5WGlfa" alt=""><figcaption></figcaption></figure>
   ```
4. 확인 버튼을 눌러 등록을 진행 합니다.
   1. 카카오 픽셀 아이디를 확인하여 메모장 등에 붙여 넣습니다.

      <figure><img src="/files/S8b58rvS5iFW51qIqO3n" alt=""><figcaption></figcaption></figure>

### 카카오 픽셀 동작 방법 확인

1. 하기 처럼 수집 중으로 상태 변경 될 경우 동작하는 상태 입니다.
   1. 수집 중으로 파란불이 확인 되어야 합니다.

      <figure><img src="/files/b9mJ3K5CSJ7EwREtVCr4" alt=""><figcaption></figcaption></figure>

2. &#x20;최근 이벤트 수집 이력에서 하기와 같이 데이터 객체가 정상적으로 수집 되는지 확인 가능 합니다.
   1. 경로: [https://business.kakao.com/pixel/detail](https://business.kakao.com/pixel/detail/784666083771003362/?tab=info\&writhing_tab=event)

<figure><img src="/files/yaGsMtyyYvOMvMq5QvHq" alt=""><figcaption></figcaption></figure>

## 카카오 픽셀 스크립트 예시

{% hint style="danger" %}
스크립트 동작을 보장하지 않으며, 커스터마이징을 가미한 스킨의 경우 스크립트 정상적으로 동작하지 않을 수 있습니다. 하기는 단순 구현 예시 입니다.
{% endhint %}

{% hint style="info" %}
string data type이 많습니다. int 등으로 data type을 변경하면 정상적으로 데이터가 수신 되지 않을 수 있습니다.
{% endhint %}

{% hint style="info" %}
'$id' => string으로 복사한 카카오 픽셀 아이디로 변경 합니다.

* 반드시 single quotes 안에 포함 되어야 합니다.
  {% endhint %}

{% hint style="info" %}

```
<script type="text/javascript" defer>
위와 같이 '비동기' 선언에 유의해주시기 바랍니다.
```

{% endhint %}

### 공통 헤더

* 카카오픽셀 메서드 정의, CID(Click ID) 등을  수집하는 스크립트를 헤더에서 호출&#x20;

```javascript
<script type="text/javascript" charset="UTF-8" src="//t1.daumcdn.net/kas/static/kp.js"></script>
```

### 공통 푸터

* setServiceOrigin('2005')에서 2005 string은 고정 값 입니다.
* 2005는 카카오에서 NHN커머스에 부여한 아이디이며, 변경 시 정상적으로 동작하지 않을 수 있습니다.

```javascript
<script type="text/javascript">
    setTimeout(() => {
        kakaoPixel('$id').pageView(); // 사용하실 카카오 아이디로 변경 필요
        kakaoPixel.setServiceOrigin('20005');
    }, 300);
</script>
```

### 메인 페이지

* addToWishList 이벤트 입니다.
* 현재 아이디 셀렉터 기준이며, 커스텀을 가미할 경우 querySelectorAll 등으로 클래스 셀렉터 변경 사용해야 합니다.&#x20;
* setTimeout 등으로 DOM이 완전히 로드 되고 사용하시길 권장 드립니다.

```javascript
<script type="text/javascript" defer>
    function getProductClickWishBtn() {
        const el = document.querySelector('#promotionBanner');

        function wishBtnClickEvent(event) {
            const currentEl = event.target;
            if (currentEl.id !== 'wishBtn') {
                return;
            }
            const li = currentEl.closest('li');
            const productNo = li.dataset.productNo;
            const title = li.querySelector('img').title;
            kakaoPixel('$id').addToWishList({
                id: productNo,
            });
        }

        el?.addEventListener('click', wishBtnClickEvent);
    }
    setTimeout(() => {
        addEventListener('DOMContentLoaded', getProductClickWishBtn());
    }, 1000);
</script>
<!-- AURORA SKIN SCRIPT -->
```

### 회원가입 페이지

```javascript
<script type="text/javascript">
    setTimeout(() => {
        kakaoPixel('$id').pageView();
        kakaoPixel.setServiceOrigin('20005');
        kakaoPixel('$id').completeRegistration();
    }, 500);
</script>
```

### 상품 리스트 페이지

```javascript
<script type="text/javascript" defer>
    function getProductClickWishBtn() {
        const el = document.querySelector('#productList');

        function wishBtnClickEvent(event) {
            const currentEl = event.target;
            if (currentEl.id !== 'wishBtn') {
                return;
            }
            const li = currentEl.closest('li');
            const productNo = li.dataset.productNo;
            const title = li.querySelector('img').title;
            kakaoPixel('$id').addToWishList({
                id: productNo,
            });
        }

        el?.addEventListener('click', wishBtnClickEvent);
    }
    setTimeout(() => {
        addEventListener('DOMContentLoaded', getProductClickWishBtn());
    }, 1000);
</script>
```

### 상품 검색결과 페이지 <a href="#ec-83-81-ed-92-88-ea-b2-80-ec-83-89-ea-b2-b0-ea-b3-bc-ed-8e-98-ec-9d-b4-ec-a7-80" id="ec-83-81-ed-92-88-ea-b2-80-ec-83-89-ea-b2-b0-ea-b3-bc-ed-8e-98-ec-9d-b4-ec-a7-80"></a>

```javascript
<script type="text/javascript">
    var keyword = new URLSearchParams(location.search).get('keyword');
    kakaoPixel('$id').pageView();
    kakaoPixel.setServiceOrigin('20005');
    kakaoPixel('$id').search({
        keyword: keyword,
    });
</script>

<script type="text/javascript" defer>
    function getProductClickWishBtn() {
        const el = document.querySelector('#productList');

        function wishBtnClickEvent(event) {
            const currentEl = event.target;
            if (currentEl.id !== 'wishBtn') {
                return;
            }
            const li = currentEl.closest('li');
            const productNo = li.dataset.productNo;
            const title = li.querySelector('img').title;
            kakaoPixel('$id').addToWishList({
                id: productNo,
            });
        }

        el?.addEventListener('click', wishBtnClickEvent);
    }
    setTimeout(() => {
        addEventListener('DOMContentLoaded', getProductClickWishBtn());
    }, 1000);
</script>
<!-- AURORA SKIN SCRIPT-->
<script type="text/javascript">
    var keyword = new URLSearchParams(location.search).get('keyword');
    kakaoPixel('$id').pageView();
    kakaoPixel.setServiceOrigin('20005');
    kakaoPixel('$id').search({
        keyword: keyword,
    });
</script>
<!-- AURORA SKIN SCRIPT -->
<script type="text/javascript" defer>
    setTimeout(() => {
        var productNo = sb.product.baseInfo.productNo.toString();
        kakaoPixel('$id').pageView();
        kakaoPixel.setServiceOrigin('20005');
        kakaoPixel('$id').viewContent({
            id: productNo,
        });
        document.querySelector('.sc-cart-button').addEventListener('click', (event) => {
            kakaoPixel('$id').addToCart({
                id: sb.product.baseInfo.productNo.toString(),
            });
        });
        document.querySelector('.sc-like-button').addEventListener('click', (event) => {
            kakaoPixel('$id').addToWishList({
                id: sb.product.baseInfo.productNo.toString(),
            });
        });
    }, 500);
</script>
```

### 상품 상세 페이지

```javascript
<script type="text/javascript">
    setTimeout(() => {
        var productNo = sb.product.baseInfo.productNo.toString();
        kakaoPixel('$id').pageView();
        kakaoPixel.setServiceOrigin('20005');
        kakaoPixel('$id').viewContent({
            id: productNo,
        });
        document.querySelector('[data-action-type="createCart"]').addEventListener('click', (event) => {
            kakaoPixel('$id').addToCart({
                id: sb.product.baseInfo.productNo.toString(),
            });
        });
        document.querySelector('[data-action-type="wish"]').addEventListener('click', (event) => {
            kakaoPixel('$id').addToWishList({
                id: sb.product.baseInfo.productNo.toString(),
            });
        });
    }, 500);
</script>
<!-- AURORA SKIN SCRIPT -->
<script type="text/javascript" defer>
    setTimeout(() => {
        var productNo = sb.product.baseInfo.productNo.toString();
        kakaoPixel('$id').pageView();
        kakaoPixel.setServiceOrigin('20005');
        kakaoPixel('$id').viewContent({
            id: productNo,
        });
        document.querySelector('.sc-cart-button').addEventListener('click', (event) => {
            kakaoPixel('$id').addToCart({
                id: sb.product.baseInfo.productNo.toString(),
            });
        });
        document.querySelector('.sc-like-button').addEventListener('click', (event) => {
            kakaoPixel('$id').addToWishList({
                id: sb.product.baseInfo.productNo.toString(),
            });
        });
    }, 500);
</script>
```

### 메인 상품 분류 페이지

```javascript
<script type="text/javascript" defer>
    function getProductClickWishBtn() {
        const el = document.querySelector('#productList');

        function wishBtnClickEvent(event) {
            const currentEl = event.target;
            if (currentEl.id !== 'wishBtn') {
                return;
            }
            const li = currentEl.closest('li');
            const productNo = li.dataset.productNo;
            const title = li.querySelector('img').title;
            kakaoPixel('$id').addToWishList({
                id: productNo,
            });
        }

        el?.addEventListener('click', wishBtnClickEvent);
    }
    setTimeout(() => {
        addEventListener('DOMContentLoaded', getProductClickWishBtn());
    }, 1000);
</script>
```

### 장바구니 페이지

* 샵바이 API 등으로 상품이 존재할 경우(length >0)에만 스크립트가 동작하는 형식 등을 취할 수 있습니다.

```javascript
<script type="text/javascript">
    setTimeout(() => {
        kakaoPixel('$id').pageView();
        kakaoPixel.setServiceOrigin('20005');
        kakaoPixel('$id').viewCart();
    }, 500);
</script>// Some cod
```

### 주문 완료 페이지

```javascript
<script type="text/javascript">
    function makeProduct(productNo, productName, quantity, price) {
        var product = {};
        product.id = productNo;
        product.name = productName;
        product.quantity = quantity;
        product.price = price;
        return product;
    }
    var orderOptions = sb.order.orderOptionsGroupByPartner;
    var products = orderOptions.flatMap((a) =>
        a.orderOptionsGroupByDelivery.flatMap((b) =>
            b.orderOptions.map((option) => makeProduct(option.productNo, option.productName, option.orderCnt, option.price.buyPrice))
        )
    );
    setTimeout(() => {
        kakaoPixel('$id').pageView();
        kakaoPixel.setServiceOrigin('20005');
        kakaoPixel('$id').purchase({
            total_quantity: products.map((a) => a.quantity).reduce((a, b) => a + b),
            total_price: sb.order.payInfo.payAmt,
            currency: 'KRW',
            products,
        });
    }, 500);
</script>
```