LogoLogo
NHN커머스 마케팅 홈상담 신청
  • 마케팅 알아보기
    • NHN커머스 마케팅
  • GODOMALL ADS SCRIPT
    • 네이버 신규 스크립트 (wcs.trans version)
    • 메타(Facebook&Instagram) 픽셀
    • 메타 카탈로그 등록 방법
    • 구글애즈 전환 스크립트 설치 매뉴얼
    • 카카오 스크립트
    • 크리테오
    • 타겟팅게이츠 (Targeting Gates)
    • 모비온
    • 🎵 틱톡
    • 🥕당근 전환 추적 코드
  • shop by Ads Script
    • 샵바이 스크립트 설정 가이드
    • 샵바이 쇼핑몰 구축 포트폴리오
    • 샵바이 광고 스크립트
      • 카카오
      • 네이버 광고 스크립트
      • 메타 픽셀
      • 구글애즈
      • 구글 애널리틱스
      • 틱톡 픽셀
      • 타불라 픽셀
      • ADN
      • 카카오 픽셀, 크리테오, 타게팅게이츠
      • 모비온
      • 크리테오
  • 마케팅 가이드
    • SEO로 내 쇼핑몰 검색엔진에 노출하기
      • 검색 엔진별 쇼핑몰(사이트) 소유권 인증 방법
      • NHN커머스 SEO 문서 모음
      • 콘텐츠(Contents) SEO
      • 오프 사이트(Off-Site) SEO
      • 온 사이트(On-Site) SEO
      • 테크니컬(Technical) SEO
      • 로컬(Local) SEO
      • 키워드의 중요성
      • 로봇텍스트(robots.txt)
    • 고도몰 관리자에서 SEO 설정하기
    • 네이버 SEO 설정
      • 봇 접근 허용하기
      • 도메인 소유권 등록하기
      • 사이트맵 만들고 저장하기
      • 서치어드바이저 검사 진행
    • 구글 SEO 설정
      • 구글 서치콘솔에서 소유권 확인하기
      • 사이트맵 제출하기
    • 다음 SEO 설정
      • 사이트 등록하기
    • 구글 쇼핑 광고
      • 구글 쇼핑피드 등록 매뉴얼
    • 네이버페이
      • 시스템 연동 방법
      • 네이버페이 결제시 상품별 할인가 연동 설정 안내드립니다. (고도몰 솔루션)
      • 가입 승인 후 서비스 상품/시스템 연동 방법 - 고도몰, e나무
      • 주문 처리 FAQ (고도몰)
      • 주문 처리 FAQ (e나무)
      • 필독! 고객확인제도 관련 안내
    • 카카오 모먼트
  • 마케팅 채널 유형
    • 검색마케팅
    • 콘텐츠 마케팅
    • CRM 마케팅
    • 바이럴 마케팅
    • 타겟마케팅
  • FAQ
    • 검색 엔진, 쇼핑 입점 등
      • 다음 쇼핑
      • 네이버 페이
      • 네이버 쇼핑
      • 네이버 검색
  • 마케팅 소개서
    • 포털 광고
    • 배너 광고
    • 입점 광고
    • SNS 마케팅
    • You Tube
    • 라이브커머스
    • 모바일 앱광고
  • 마케팅 인사이트
    • 부스터
      • [25년] NHN COMMERCE 마케팅 패키지
      • [25년] 구글 광고비 최대 180만원 지원 프로모션
      • [25년] NHN COMMERCE X 아프리카TV 미디어커머스
      • [25년] 마케팅 프로모션 모음 Zip
      • [25년] 짧아야 산다! '숏폼마케팅패키지'
    • 구글
      • Google 판매자 센터 입점 전 필수 체크 사항
      • Google 쇼핑 광고 이해하기
      • Google 판매자 센터 입점하기
      • Google 쇼핑 탭 노출은 '무료'... 그 성공적인 사례들
    • 마케팅 성공사례
      • 성수기 매출 극대화 및 비수기 대응 마케팅 성공사례
      • 브랜딩 인지도 강화를 통한 성공사례
      • 신규 쇼핑몰 성공 사례
      • iOS14.5 업데이트 대응 페이스북 광고 성공사례
    • 페이스북
      • 고도몰 페이스북 도메인 인증 - 메타 태그 인증 방식 알아보기
      • 고도몰 페이스북 광고 설정 기능(FBE) 알아보기
      • FBE 설정 해제/변경 방법
    • 기타
      • 잡은 고객을 놓치지 않는 방법
      • '광고대행사' 어디까지 알고 계신가요?
      • '숏폼' 콘텐츠 마케팅에 대해서
      • 구매전환 제대로 일어나고 있나요?
      • 상세페이지 제작 팁
      • 리타게팅 광고 주요 매체
      • 구매를 부르는 리타게팅
  • 엔마레터
    • 마케팅TIP - 숏폼마케팅하고 구매건수 폭발한 썰
    • 마케팅TIP - 주말에도 매출 UP! 인기셀러들의 비결
    • 매체 업데이트 소식
  • 공지사항
    • 일반광고
      • [광고] 네이버 N골프 광고 출시!
    • 네이버쇼핑
      • [네이버] 네이버 쇼핑 상품 DB URL 등록 방법 (고도몰 솔루션)
      • [네이버] 네이버 쇼핑 상품 DB URL 등록 방법 (샵바이 솔루션)
    • 네이버페이
      • [결제형] 가입 승인 후 시스템 연동 방법
      • 가입 승인 후 서비스 상품/시스템 연동 방법 - 샵바이(basic/pro/premium)
    • 쇼핑몰 운영에 필요한 다양한 팁
      • 2025년 최신판: 쇼핑몰 택배 계약 없이, 단 1건도 배송 가능한 스마트 물류 시스템 이용 방법
Powered by GitBook
On this page
  • 관련 문서
  • 픽셀 아이디 발급 방법
  • 카카오 픽셀 동작 방법 확인
  • 카카오 픽셀 스크립트 예시
  • 공통 헤더
  • 공통 푸터
  • 메인 페이지
  • 회원가입 페이지
  • 상품 리스트 페이지
  • 상품 검색결과 페이지
  • 상품 상세 페이지
  • 메인 상품 분류 페이지
  • 장바구니 페이지
  • 주문 완료 페이지

Was this helpful?

  1. shop by Ads Script
  2. 샵바이 광고 스크립트

카카오

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

Previous샵바이 광고 스크립트Next네이버 광고 스크립트

Last updated 6 months ago

Was this helpful?

관련 문서

  • 샵바이 변수 조회 가이드:

  • 카카오 픽셀 가이드:

픽셀 아이디 발급 방법

  1. 카카오모먼트 관리자페이지(moment.kakao.com)으로 이동 합니다.

  2. 하기와 같은 화면에서 +픽셀 & SDK 발급 버튼을 클릭 합니다.

  3. 아래와 같은 화면에서 픽셀 이름을 입력 합니다.

  4. 확인 버튼을 눌러 등록을 진행 합니다.

    1. 카카오 픽셀 아이디를 확인하여 메모장 등에 붙여 넣습니다.

카카오 픽셀 동작 방법 확인

  1. 하기 처럼 수집 중으로 상태 변경 될 경우 동작하는 상태 입니다.

    1. 수집 중으로 파란불이 확인 되어야 합니다.

  2. 최근 이벤트 수집 이력에서 하기와 같이 데이터 객체가 정상적으로 수집 되는지 확인 가능 합니다.

카카오 픽셀 스크립트 예시

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

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>

경로:

https://business.kakao.com/pixel/detail
https://admin-remote.shopby.co.kr/popup/variable-guide
https://kakaoad.github.io/kakao-pixel