# 카카오

### 관련 문서

* 샵바이 변수 조회 가이드:  <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>
```


---

# 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://marketing-help.nhn-commerce.com/conversion-tracking-setup/shopby-ads-script/kakao-pixel.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.