카페24 쇼핑몰에 DPA 전환 스크립트 4개(공통 + ViewContent + AddToCart + Purchase)를 설치하는 방법입니다.
이벤트별 코드 구성과 공통 주의사항은 [DPA 전환 스크립트 설치 가이드]를 먼저 확인 부탁드립니다.
이미 데이블 일반 전환 스크립트(Purchase, AddToCart)를 설치하신 경우, 아래 DPA용 코드(items: [{ product_id }] 포함)로 교체해 주세요. 두 개가 함께 있으면 전환이 중복 집계됩니다.카페24 공식 가이드
스크립트 삽입 위치와 디자인 변수(치환코드)는 카페24 공식 문서를 함께 참고 부탁드립니다.
•
스마트디자인 편집 (카페24 헬프센터) — 페이지별 HTML 편집 방법
•
스마트디자인 사용자 가이드 — 모듈·변수 목록
•
카페24 고객센터 — 디자인별 변수 문의
설치 위치 요약
스크립트 | 카페24 관리자 경로 |
공통 (PageView) | 쇼핑몰 설정 > 기본 설정 > 쇼핑몰 정보 > 검색엔진 최적화(SEO) > 고급 설정 > 코드 직접 입력 (Head 태그 소스) |
ViewContent | 디자인 > 디자인 편집 (스마트디자인 편집창) > 상품 상세 페이지 |
AddToCart | 디자인 > 디자인 편집 (스마트디자인 편집창) > 상품 상세 페이지 (장바구니 버튼 클릭 시 호출) |
Purchase | 디자인 > 디자인 편집 (스마트디자인 편집창) > 주문완료 페이지 |
PC 디자인과 모바일 디자인이 분리되어 있다면 양쪽 디자인 모두 설치해 주세요.
1. 공통 스크립트 (PageView)
1.
쇼핑몰 설정 > 기본 설정 > 쇼핑몰 정보 > 검색엔진 최적화(SEO) > 고급 설정 > 코드 직접 입력으로 이동합니다.
2.
Head 태그 소스 항목에 아래 코드를 넣고 저장합니다.
<!-- Dable 스크립트 시작 -->
<script>
(function(d,a,b,l,e,_) {
d[b]=d[b]||function(){(d[b].q=d[b].q||[]).push(arguments)};e=a.createElement(l);
e.async=1;e.charset='utf-8';e.src='//static.dable.io/dist/dablena.min.js';
_=a.getElementsByTagName(l)[0];_.parentNode.insertBefore(e,_);
})(window,document,'dablena','script');
dablena('init', '000-000-000'); // 내 계정 번호로 변경
dablena('track', 'PageView');
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
2. ViewContent — 상품 상세 페이지
1.
디자인 > 디자인 편집을 눌러 스마트디자인 편집창을 엽니다.
2.
상품 상세 페이지를 열고 아래 코드를 삽입한 뒤 저장합니다. 위치는 상단·하단 어디든 무방합니다.
<!-- Dable 스크립트 시작 -->
<script>
(function(d,a,b,l,e,_) {
d[b]=d[b]||function(){(d[b].q=d[b].q||[]).push(arguments)};e=a.createElement(l);
e.async=1;e.charset='utf-8';e.src='//static.dable.io/dist/dablena.min.js';
_=a.getElementsByTagName(l)[0];_.parentNode.insertBefore(e,_);
})(window,document,'dablena','script');
dablena('init', '000-000-000'); // 내 계정 번호로 변경
dablena('track', 'ViewContent', {
items: [{ product_id: '{$product_no}' }] // 카페24 상품번호 치환코드 (상품 상세 페이지에서 사용 가능)
});
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
3. AddToCart — 상품 상세 페이지 (장바구니 버튼 클릭 시)
카페24 장바구니 페이지에는 상품번호를 바로 출력하는 치환코드가 없어, 상품 상세 페이지의 장바구니 버튼 클릭 시점에 호출하는 방식을 권장드립니다. 상품 상세 페이지에서는 {$product_no}를 그대로 사용할 수 있습니다.
1.
스마트디자인 편집창에서 상품 상세 페이지를 엽니다.
2.
아래 코드를 ViewContent 코드 아래에 함께 삽입한 뒤 저장합니다.
<!-- Dable 스크립트 시작 -->
<script>
(function(d,a,b,l,e,_) {
d[b]=d[b]||function(){(d[b].q=d[b].q||[]).push(arguments)};e=a.createElement(l);
e.async=1;e.charset='utf-8';e.src='//static.dable.io/dist/dablena.min.js';
_=a.getElementsByTagName(l)[0];_.parentNode.insertBefore(e,_);
})(window,document,'dablena','script');
dablena('init', '000-000-000'); // 내 계정 번호로 변경
// 장바구니 담기 버튼 클릭 시 AddToCart 전송 (카페24 기본 디자인의 장바구니 버튼 class 기준)
document.addEventListener('DOMContentLoaded', function () {
var btn = document.querySelector('.btnCart, a[onclick*="product_submit"][onclick*="basket"]');
if (btn) {
btn.addEventListener('click', function () {
dablena('track', 'AddToCart', {
items: [{ product_id: '{$product_no}' }] // 카페24 상품번호 치환코드
});
});
}
});
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
4. Purchase — 주문완료 페이지
1.
스마트디자인 편집창에서 주문완료 페이지를 엽니다.
2.
<div id="mCafe24Order" 로 시작하는 태그 안에 구매 변수가 포함되어 있으므로, 해당 div가 닫히는 </div> 윗부분에 아래 코드를 삽입한 뒤 저장합니다.
결제 금액은 카페24 매출 매개변수 {$result_order_price_front}를 사용하며, 쉼표와 "원" 단위를 제거하는 getNumericValue 함수를 함께 넣어야 합니다.
<!-- Dable 스크립트 시작 -->
<script>
(function(d,a,b,l,e,_) {
d[b]=d[b]||function(){(d[b].q=d[b].q||[]).push(arguments)};e=a.createElement(l);
e.async=1;e.charset='utf-8';e.src='//static.dable.io/dist/dablena.min.js';
_=a.getElementsByTagName(l)[0];_.parentNode.insertBefore(e,_);
})(window,document,'dablena','script');
function getNumericValue(formattedValue) {
return parseInt(formattedValue.replace(/[^\d]/g, ''), 10);
}
dablena('init', '000-000-000'); // 내 계정 번호로 변경
dablena('track', 'Purchase', {
value: getNumericValue('{$result_order_price_front}'),
currency: 'KRW',
items: [
{ product_id: '상품번호' } // ★ 주문 상품번호 — 아래 '주의사항' 참고
]
});
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
설치 위치 예시
<div id="mCafe24Order" class="typeHeader" module="Order_result" unroll="1">
...
<tr>
<th scope="row">결제금액</th>
<td class="right">
<span class="txtEm">{$result_order_price_front_head}{$result_order_price_front}{$result_order_price_front_tail}</span>
</td>
</tr>
★설치 위치
</tbody>
</table>
</div>
HTML
복사
주의사항
•
product_id는 EP의 상품 ID와 동일해야 합니다. 카페24 네이버 쇼핑 EP는 상품번호(product_no)를 상품 ID로 사용하므로, 스크립트에도 같은 값이 들어가야 리타게팅이 작동합니다.
•
{$product_no}(상품 상세 페이지)와 {$result_order_price_front}(주문완료 페이지)는 카페24 스마트디자인 기본 변수입니다. 디자인을 커스텀한 경우 변수명이 다를 수 있으니 값이 들어오지 않으면 스킨 제작사 또는 카페24 고객센터에 확인 부탁드립니다.
•
주문완료 페이지의 상품번호(★): 카페24 주문완료 모듈(Order_result)에는 주문 상품번호를 출력하는 공식 치환코드가 없습니다. 카페24는 페이스북 등 자체 연동 채널에는 상품번호를 내부적으로 전달하지만 외부 스크립트용으로는 제공하지 않으므로, 아래 두 가지 중 하나로 진행 부탁드립니다.
1.
2.
개발 담당자 적용: 주문완료 페이지의 주문 상품 목록(상품 링크 product_no= 파라미터 등)에서 상품번호를 추출하여 items 배열에 넣도록 개발 담당자에게 요청
Purchase의 items가 비어 있어도 매출(value)은 집계되지만, 구매 완료 사용자 디타겟팅(구매한 상품 광고 자동 중단)은 동작하지 않습니다.
•
AddToCart 코드의 버튼 선택자(.btnCart 등)는 카페24 기본 디자인 기준입니다. 장바구니 버튼의 class가 다르면 해당 디자인에 맞게 수정이 필요합니다.
•
설치 완료 후
설치가 완료되면 계정 번호와 함께 ad-kr@dable.io로 회신 부탁드립니다. 데이블에서 ViewContent / AddToCart / Purchase 수집 여부와 product_id 매칭 상태를 확인한 뒤 안내드립니다. 직접 확인은 전환 스크립트 설치 확인하기를 참고 부탁드립니다.
