설치 전 꼭 읽어주세요
이 페이지의 이벤트 코드는 단독으로 동작하지 않습니다. 아래 3가지가 한 세트로 페이지에 있어야 이벤트가 전송됩니다.1. 데이블 로더 (dablena.min.js 불러오는 부분)
2. dablena('init', '계정번호')
3. dablena('track', '이벤트명', {...})
공통 스크립트가 사이트 전체(</head> 직전)에 설치되어 있다면 1·2번은 이미 로드된 상태이므로 각 페이지에는 3번만 추가하셔도 됩니다. 확실하지 않다면 아래 완성 코드를 그대로 사용해 주세요. 중복 설치되어도 문제없습니다.
1. 내 계정 번호 확인하기
•
각 광고 계정은 고유의 계정 번호(000-000-000 형식)를 가지고 있습니다.
•
대시보드 좌측 메뉴 [전환 스크립트] 에서 내 계정 번호가 입력된 스크립트를 확인하실 수 있습니다.
•
이 페이지의 코드 예시에 있는 000-000-000은 모두 내 계정 번호로 바꿔서 설치해 주세요.
(기존 페이지의 전환 스크립트 메뉴 이미지 유지)2. 설치할 스크립트 4개
스크립트 | 호출 시점 | 설치 위치 | 필수 값 |
공통 (PageView) | 모든 페이지 | 사이트 전체 공통 영역 (</head> 직전) | - |
ViewContent | 상품 상세 페이지 조회 | 상품 상세 페이지 | product_id |
AddToCart | 장바구니 담기 | 장바구니 페이지 또는 담기 완료 시점 | product_id |
Purchase | 구매 완료 | 주문 완료 페이지 | product_id, value, currency |
•
PC와 모바일 페이지가 분리되어 있다면 양쪽 모두 설치해 주세요.
•
호스팅사별 관리자 설치 경로는 아래 호스팅사별 가이드를 참고 부탁드립니다.
3. 공통 스크립트 (PageView)
웹사이트 전체의 로그 수집을 위해 필수로 설치하는 스크립트입니다. 사이트 전체에 적용되는 공통 영역(</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
복사
4. 상품 이벤트 스크립트 3개 (완성 코드)
아래 코드는 로더 + init + track이 모두 포함된 완성 형태입니다. 각 페이지에 그대로 붙여넣고 계정 번호와 상품 ID·금액 치환 부분만 수정해 주세요.
4-1. 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'); // 내 계정 번호로 변경
dablena('track', 'ViewContent', {
items: [{ product_id: '상품ID' }] // 현재 페이지의 실제 상품 ID로 동적 치환
});
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
4-2. AddToCart — 장바구니 담기
<!-- 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', 'AddToCart', {
items: [{ product_id: '상품ID' }] // 담긴 상품의 실제 상품 ID로 동적 치환
});
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
4-3. Purchase — 주문 완료 페이지
value(결제 금액)와 currency(통화)는 필수입니다. 누락 시 이벤트가 전송되지 않습니다.
<!-- 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', 'Purchase', {
value: 50000, // 실제 결제 금액으로 동적 치환 (숫자만, 쉼표 없이)
currency: 'KRW',
items: [
{ product_id: '상품ID_1' }, // 주문한 상품의 실제 상품 ID로 동적 치환
{ product_id: '상품ID_2' } // 여러 상품 주문 시 상품 수만큼 추가
]
});
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
고도몰 기준 Purchase 설치 예시 (금액 치환코드 적용)<!-- 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'); // 내 계정 번호로 변경
var purchasePrice = '{=gd_global_currency_display(gd_isset(orderInfo.settlePrice))}';
dablena('track', 'Purchase', {
value: getNumericValue(purchasePrice),
currency: 'KRW',
items: [
{ product_id: '상품ID' } // 실제 주문 상품 ID로 동적 치환 필요
]
});
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
5. 설치 시 자주 발생하는 오류
1) '상품ID'와 금액을 고정값으로 넣은 경우
'상품ID', value: 50000은 예시 값입니다. 실제로는 페이지마다 실제 값이 들어가도록 치환되어야 합니다. 금액은 호스팅사 치환코드로 처리하시고, 상품 ID 치환코드는 쇼핑몰 스킨 구성에 따라 다를 수 있으니 개발 담당자(또는 스킨 제작사) 확인 후 적용 부탁드립니다.
2) product_id가 EP 상품 ID와 다른 경우
product_id 값은 설정 > EP에 등록한 EP(상품 피드)의 상품 ID와 반드시 동일해야 합니다. 값이 다르면 상품 매칭이 되지 않아 리타게팅이 작동하지 않고 DPA 성과가 집계되지 않습니다.
3) 구매 스크립트를 2개 설치한 경우
기존에 일반 구매 스크립트(Purchase)를 설치하셨다면 별도로 하나 더 추가하지 않습니다. 위 예시처럼 items(product_id)가 포함된 형태 1개로 교체해 주세요. 두 개가 함께 있으면 구매 전환이 중복 집계됩니다.
4) PC 또는 모바일 한쪽에만 설치한 경우
PC와 모바일 페이지가 분리되어 있다면 양쪽 모두 설치되어야 데이터 누락이 없습니다.
5) 계정 번호를 바꾸지 않은 경우
dablena('init', '000-000-000')의 번호가 내 광고 계정 번호와 일치하는지 확인해 주세요. 다른 계정 번호로 설치되면 데이터가 다른 계정으로 수집됩니다.
참고
•
items 배열에는 product_id 외에 다른 필드는 필요 없습니다.
•
product_id가 없는 항목은 해당 항목만 무시되며, 에러는 발생하지 않습니다.
6. 호스팅사별 가이드
호스팅 | 데이블 DPA 설치 가이드 | 호스팅사 공식 가이드 (삽입 위치·변수 확인) |
카페24 | [DPA 전환 스크립트 설치하기 (카페24)] | |
고도몰 | [DPA 전환 스크립트 설치하기 (고도몰)] | |
아임웹 | [DPA 전환 스크립트 설치하기 (아임웹)] | |
메이크샵 | [DPA 전환 스크립트 설치하기 (메이크샵)] | |
GTM 사용 시 | - | |
자사몰 / 기타 | 이 페이지의 완성 코드를 각 페이지에 설치. 상품 ID·금액은 개발 담당자가 실제 값으로 치환 | - |
7. 설치 완료 후
1.
2.
데이블에서 ViewContent / AddToCart / Purchase 이벤트 수집 정상 여부를 크로스 체크한 뒤 안내드립니다.
3.
수정이 필요한 부분이 있으면 별도로 요청드립니다.
4.
문의: ad-kr@dable.io
