카카오

샵바이 변수를 이용한 카카오픽셀 스크립트 적용 가이드

픽셀 아이디 발급 방법

카카오모먼트 관리자페이지(moment.kakao.com)으로 이동 합니다.
하기와 같은 화면에서 +픽셀 & SDK 발급 버튼을 클릭 합니다.
아래와 같은 화면에서 픽셀 이름을 입력 합니다.
확인 버튼을 눌러 등록을 진행 합니다.
1. 카카오 픽셀 아이디를 확인하여 메모장 등에 붙여 넣습니다.

카카오 픽셀 동작 방법 확인

하기 처럼 수집 중으로 상태 변경 될 경우 동작하는 상태 입니다.
1. 수집 중으로 파란불이 확인 되어야 합니다.
최근 이벤트 수집 이력에서 하기와 같이 데이터 객체가 정상적으로 수집 되는지 확인 가능 합니다.
1. 경로: https://business.kakao.com/pixel/detail

카카오 픽셀 스크립트 예시

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

string data type이 많습니다. int 등으로 data type을 변경하면 정상적으로 데이터가 수신 되지 않을 수 있습니다.

'$id' => string으로 복사한 카카오 픽셀 아이디로 변경 합니다.

반드시 single quotes 안에 포함 되어야 합니다.

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

공통 헤더

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

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

공통 푸터

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

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

메인 페이지

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

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

회원가입 페이지

<script type="text/javascript">
    setTimeout(() => {
        kakaoPixel('$id').pageView();
        kakaoPixel.setServiceOrigin('20005');
        kakaoPixel('$id').completeRegistration();
    }, 500);
</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>

상품 검색결과 페이지

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

상품 상세 페이지

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

메인 상품 분류 페이지

<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)에만 스크립트가 동작하는 형식 등을 취할 수 있습니다.

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

주문 완료 페이지

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