카페24 픽셀 연동
전환 추적 코드 생성하기
전환 추적 코드 생성하기위 페이지 가이드에 따라 전환 추적 코드를 생성해야 토스 픽셀을 사용할 수 있어요
이벤트별 스크립트
토스 픽셀이 지원하는 이벤트 목록은 아래와 같아요.
페이지 방문
pageView
회원가입
signUp
상품 상세페이지 조회
productView
장바구니 추가
addToCart
구매(주문)
purchase
Naver Pay 구매(주문)
purchase(naverpay)
위 이벤트들 중 추적하고 싶은 이벤트만 카페24 코드편집기에 삽입하시면 돼요.
이벤트 별 스크립트 코드는 전환 이벤트가 발생하는 지점에 맞춰서 삽입해주셔야 정합성 높게 전환 이벤트 데이터를 수집할 수 있어요.
예를 들어, 상품 상세 페이지를 조회하고 → 이어서 장바구니 담기까지 완료한 이벤트를 추적하고 싶으시다면,
(1) 상품 상세페이지에 “상품/콘텐츠 상세페이지 조회” 이벤트 스크립트 코드 삽입
(2) 장바구니 추가 버튼 클릭 이벤트 발생 시 “장바구니 담기” 이벤트 스크립트 코드 삽입
을 진행하시면 2가지 이벤트를 원활하게 추적할 수 있어요.
토스 픽셀 설치하기
카페24 웹페이지 코드 수정 화면 가기
카페24 관리자 센터 > 좌측 내비게이션 바에서 [디자인 (PC/모바일)] 탭 클릭
[디자인 대시보드] 내에서 PC, 모바일, 공통 중 토스 픽셀을 추가하려는 쇼핑몰을 선택해 [디자인 편집] 버튼 클릭
PC/모바일 두 디자인 모두 운영 중이라면 두 곳 모두 픽셀을 설치해야 합니다.
스크립트 내용은 PC/모바일 동일해요
좌하단 [HTML 수정] 버튼 클릭
웹 편집 창이 나왔다면 성공이에요. 다음 단계로 넘어가주세요.
1) 전체 페이지 공통 설치 + 페이지 방문 (page view)
공통 설치 스크립트
가장 먼저 공통 레이아웃(
layout.html)을 열어 아래 두 스크립트를 두개의 파란 색 박스 위치를 참고해서 넣어주세요.변경 후에는 항상 상단 [저장]을 클릭해야 적용됩니다.
전체 페이지에 토스 픽셀 스크립트 설치: <head>와 </head> 태그 사이에 script tag 를 추가합니다.
<!-- Toss Pixel 스크립트 로드 -->
<script type="text/javascript" charset="UTF-8" src="https://static.toss.im/lex/v1.js"></script>페이지 방문(page view) 이벤트 수집
<body> </body> 태그 안에 이벤트 수집 script tag 를 추가합니다.
<!-- Toss Pixel PageView 이벤트 -->
<script type="text/javascript">
new TossPixel('12345678').pageView();// '12345678' 대신 생성한 전환코드 값을 넣어주세요
</script>주의사항
쇼핑몰의 모든 페이지에서 공통 레이아웃을 활용하진 않아요.
페이지들의 파일을 열어 아래와 같은 공통 레이아웃 html 파일의 활용 코드가 없다면,
각자 활용하는 별도의 레이아웃 html 파일, 혹은 해당 페이지 html 파일에 직접 위 코드를 심어주세요.
위처럼 공통 레이아웃 html 파일을 사용하는 경우. 별도 스크립트 추가 하지 않아도 돼요.
공통 레이아웃 html 파일을 사용하지 않는 경우. 공통 레이아웃 html 파일에 추가한 스크립트를 해당 html 파일(main 레이아웃) 에 추가 해주세요.
공통 레이아웃 html 파일 뿐 아니라 별도의 레이아웃 html 파일을 사용하지 않는 경우. body와 각각에 맞는 스크립트를 추가 해주세요.
2) 회원 가입 (sign up)
회원 가입 이벤트 수집 스크립트는 회원가입 결과 (
/member/join_result.html) 파일에서 추가해야 해요.<body> </body> 태그 안이라면 어디든 스크립트 하나만 추가해주시면 돼요. (위 예시에선 <head> </head> 태그가 따로 없어서, 편집기 내 모든 코드가 <body> </body> tag 내 임을 알 수 있어요.)
<!-- Toss Pixel 회원가입 이벤트 수집 -->
<script type="text/javascript">
new TossPixel('12345678').signUp(); // '12345678' 대신 생성한 전환코드 값을 넣어주세요
</script>3) 상품 상세 페이지 조회 (product view)
상품 상세 페이지 조회 이벤트 수집 스크립트는
상품 상세 (/product/detail.html)파일에서 추가해야 해요.상품 상세 페이지 조회 이벤트 수집 스크립트는 반드시
module=”product_detail”이라고 적힌 html tag 안에 추가해야 해요. (위 예시에서 <div module=”product_detail”> </div> 안에 토스 픽셀 스크립트가 있는 것을 볼 수 있어요)이벤트 수집 스크립트 내
“{$product_no}"와 같은 값들은 카페24에서 자체적으로 각 모듈마다 제공하는 변수로 치환돼요. 참고<script type="text/javascript"> // Toss Pixel 상품 상세 조회 이벤트 수집 new TossPixel('12345678').productView({ // '12345678' 대신 생성한 전환코드 값을 넣어주세요 product_id: "{$product_no}", product_name: "{$name}", price: "{$product_sale_price}", currency: "{$price_unit_tail}" }); </script>
4) 장바구니 추가 (add to cart)
장바구니에 상품을 추가한 이벤트 수집 스크립트도
상품 상세 (/product/detail.html)파일에서 추가해야 해요.상품 상세 html 파일 내에서 장바구니 버튼에 해당하는 html tag 를 찾아야 해요.
장바구니 버튼에 해당하는 html tag 찾는 방법
보통 ‘장바구니’ 혹은 ‘CART’ 라는 텍스트를 노출해요.
장바구니 버튼은 반드시
module=”product_action”이라는 속성이 들어간 html tag 안에 감싸져 있어요.또한 장바구니 버튼 html tag 에
onclick=”{$action_basket}”이라는 속성이 들어가있어야 실제로 장바구니 추가 동작을 하게 돼요. (위 예시에서 <a> </a> 태그를 보시면 해당 속성이 들어가있어요.)
장바구니 버튼에 해당하는 html tag 에 id 속성을 부여해요.
해당 html tag 에 이미 id 값이 존재한다면, 해당 값을 복사하고 이 단계는 스킵해주세요.
위 예시에선 장바구니 버튼에
id=”product_detail_top::add_to_cart_btn”라는 코드가 있고, 이는 장바구니 버튼에product_detail_top::add_to_cart_btn라는 이름의 식별자를 붙이는 것이에요.
장바구니 버튼 클릭 할 때 토스 픽셀 장바구니 이벤트 수집 스크립트를 실행하도록 해요.
이 때 <script> </script> 태그는 반드시 장바구니 버튼 html tag 아래에 작성해주세요.
<a href="#none" class="btnNormal sizeL {$basket_display|display}" onclick="{$action_basket}" id="product_detail_top::add_to_cart_btn">장바구니</a> <script type="text/javascript" async> document.getElementById("product_detail_top::add_to_cart_btn").addEventListener('click', function () { new TossPixel('12345678').addToCart({ // '12345678' 대신 생성한 전환코드 값을 넣어주세요 product_id: "{$product_no}", product_name: "{$name}", price: "{$product_sale_price}", currency: "{$price_unit_tail}", }); }); </script>
5) 구매(주문) 완료 (purchase)
참고) 예시의 구매완료 페이지는 별도의 레이아웃 html 파일을 사용하지 않으므로,
<head></head> 안에 토스 픽셀을 로드하는 스크립트를 추가,
<body></body> 의 맨 윗쪽에 페이지 방문 이벤트 스크립트를 추가했어요.
(초록색 박스, 전체 페이지에 픽셀 스크립트 설치 & 페이지 방문 (page view) 이벤트 수집 과 동일 작업)
<head></head> tag 안에 다음 스크립트 추가
<!-- Toss Pixel 스크립트 로드 --> <script type="text/javascript" charset="UTF-8" src="https://static.toss.im/lex/v1.js"></script><body></body> 안에 다음 스크립트 추가
<!-- Toss Pixel PageView 이벤트 --> <script type="text/javascript"> new TossPixel('12345678').pageView(); // '12345678' 대신 생성한 전환코드 값을 넣어주세요 </script>
구매완료 페이지에선 이벤트 수집 전에 구매 상품 목록이 필요해요.
그러나 카페24 모듈에선 구매 상품 목록을 변수로 제공하고 있지 않아요.
따라서
lex_order_products_data라는 이름으로 빈 배열을 만들고, 아래에서 노출되는 상품마다 이 배열 안에 추가해줄거예요. (파란색 박스)변수명은 다른 변수와 겹치지 않는 한에서 다른 이름으로 해도 상관없어요.
<!-- Toss Pixel 이벤트 수집용 상품 목록 변수 --> <script> var lex_order_products_data = []; </script>
카페24 주문완료 페이지 모듈 상 기본 배송 상품 아이템은
module="Order_normalresultlist”속성이 들어간 html tag 안에서 선언되고 있어요. (참고)위 예시에선
<div module="Order_normalresultlist”></div>가 기본 배송 상품 아이템을 노출하는 모듈 역할을 하는 html tag 에요.
위 예시 코드에서
<div class=”ec-base-prdInfo”><div class=”prdBox”></div></div>와 같이module="Order_normalresultlist”속성이 들어간 html tag 아래에서 2번 반복 선언되는 html tag를 찾아, 각 html tag 하위에 모두, 위에서 선언한 구매 상품 목록 배열 변수(lex_order_products_data) 에 상품 아이템을 추가하는 스크립트를 추가해주세요.<script type="text/javascript"> lex_order_products_data.push({ product_id: "{$product_no}", product_name:"{$product_name}", quantity: "{$product_quantity}", price:"{$product_price}", options: ["{$option_detail_str}"], }); </script>
쇼핑몰에 개별 배송 상품이 있다면
module="Order_normalresultlist”속성을 가진 html tag 하위에도 위 단계와 동일하게 변수 배열에 구매 아이템을 추가하는 스크립트를 추가해주세요.
쇼핑몰에 해외 배송 상품이 있다면
module="Order_oversearesultlist”속성을 가진 html tag 하위에도 위 단계와 동일하게 변수 배열에 구매 아이템을 추가하는 스크립트를 추가해주세요.
위에서 구매 완료한 상품 목록을 모두 lex_order_products_data 변수에 추가해줬으니, 페이지 html 파일 내 마지막 줄에 구매 완료 이벤트 수집 코드를 추가해주세요.
<script type="text/javascript"> new TossPixel('12345678').purchase({ // '12345678' 대신 생성한 전환코드 값을 넣어주세요 order_id:"{$order_id}", products: lex_order_products_data, total_price: "{$total_order_price_original}", total_quantity: lex_order_products_data.reduce((acc, cur) => acc + cur.quantity, 0), currency:"{$product_total_price_ref}" }); </script>
6) Naver Pay 구매 클릭 (purchase, purchase_type: “naverpay”)
카페24 쇼핑몰 디자인 편집기에서 제공하는 인터페이스 상으론 네이버 페이 구매 ‘완료’ 이벤트를 수집 할 수 없어서 네이버페이로 구매 버튼을 ‘클릭’한 이벤트를 수집해야 해요.
이때, 구매 버튼을 클릭하고 이탈한 사용자까지 이벤트에 수집될 수 있어요.
네이버페이 구매 버튼은 보통
상품 상세 파일(/product/detail.html)과장바구니 파일(basket.html)에 있어요.아래 스크립트를 각 파일의 최 하단 가장 바깥 html tag 안쪽에 추가해주세요.
<script type="text/javascript"> (function () { const NPay_BUTTON_SELECTOR = '.npay_btn_pay'; function bindNPayButtonClick(nPayButton) { if (nPayButton.dataset._npayBound) { return; } nPayButton.dataset._npayBound = 'true'; nPayButton.addEventListener('click', function () { new TossPixel('12345678').purchase({ purchase_type: "naverpay", product_id: "{$product_no}", product_name: "{$name}", price: "{$product_sale_price}", currency: "{$price_unit_tail}", }); }); } const observer = new MutationObserver(() => { document.querySelectorAll(NPay_BUTTON_SELECTOR).forEach(bindNPayButtonClick); }); observer.observe(document.body, { childList: true, subtree: true }); })(); </script>(심화)
네이버페이 구매 버튼의 경우, 네이버 페이 구매 버튼을 로드하는 스크립트의 실행 후에 DOM 에서 찾을 수 있기 때문에 MutationObserver 를 활용해 이 버튼을 추적해요.
네이버페이 구매 버튼 클릭을 했는데도 이벤트 추적이 되지 않는다면, 쇼핑몰 웹페이지에서 브라우저 개발자 도구를 켜 네이버페이 버튼의 css selector 를 찾아 위 코드에서 다음 부분을 해당 css selector 로 교체해주세요.
const NPay_BUTTON_SELECTOR = '.npay_btn_pay'; // npay_btn_pay 부분을 네이버페이 구매 버튼에 고유하게 부여된 것으로 보이는 classname 으로 교체해주세요
토스 픽셀 이벤트 수집 확인 방법
픽셀 이벤트 수집 확인하기위 가이드로 토스 픽셀이 제대로 설치되어 이벤트가 수집되고 있는지 확인할 수 있어요
Last updated