고도몰(NHN커머스) 쇼핑몰에 DPA 전환 스크립트 4개(공통 + ViewContent + AddToCart + Purchase)를 설치하는 방법입니다.
이벤트별 코드 구성과 공통 주의사항은 [DPA 전환 스크립트 설치 가이드]를 먼저 확인 부탁드립니다.
이미 데이블 일반 전환 스크립트(Purchase)를 설치하신 경우, 아래 DPA용 코드(items: [{ product_id }] 포함)로 교체해 주세요. 두 개가 함께 있으면 전환이 중복 집계됩니다.고도몰 공식 가이드
스크립트 삽입 위치와 치환코드는 NHN커머스 공식 문서를 함께 참고 부탁드립니다.
•
외부 스크립트 사용 가이드 (NHN커머스 개발 가이드) — 외부 스크립트 등록 방법
•
메타 픽셀 설치 가이드 (NHN커머스 마케팅) — 상품번호·금액 치환코드 예시 (데이블 스크립트에 동일하게 적용)
설치 위치 요약
스크립트 | 고도몰 관리자 경로 |
공통 (PageView) | 기본설정 > 기본 정책 > 외부 서비스 설정 > 외부 스크립트 등록 (사용함 > 상단 공통영역에 설치) |
ViewContent | 디자인 > 디자인페이지 > [상품] 폴더 > 상품 상세화면 (goods/goods_view) |
AddToCart | 디자인 > 디자인페이지 > 장바구니 (goods/cart_tab_cart) 또는 장바구니 담기 완료 시점 |
Purchase | 디자인 > 디자인페이지 > [주문] 폴더 > 주문완료 페이지 |
PC 디자인과 모바일 디자인이 분리되어 있다면 양쪽 디자인 모두 설치해 주세요.
1. 공통 스크립트 (PageView)
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', 'PageView');
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
2. ViewContent — 상품 상세화면
1.
디자인 > 디자인페이지 > [상품] 폴더 > 상품 상세화면 (goods/goods_view)을 엽니다.
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: '{=goodsView['goodsNo']}' }] // 고도몰 상품번호(goodsNo) 치환코드
});
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
3. AddToCart — 장바구니
1.
디자인 > 디자인페이지 > 장바구니 (goods/cart_tab_cart)를 열거나, 장바구니 담기 완료 시점에 호출되도록 삽입합니다.
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', 'AddToCart', {
items: [{ product_id: '{=goodsNo}' }] // 장바구니 상품 반복 구간(cartInfo loop) 안의 상품번호 치환코드
});
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
4. Purchase — 주문완료 페이지
1.
디자인 > 디자인페이지 > [주문] 폴더 > 주문완료 페이지를 엽니다.
2.
아래 코드를 삽입한 뒤 저장합니다. 위치는 주문완료 페이지 내라면 무방합니다.
결제 금액은 고도몰 치환코드 {=gd_global_currency_display(gd_isset(orderInfo.settlePrice))}를 사용하며, 쉼표와 "원" 단위를 제거하는 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'); // 내 계정 번호로 변경
var purchasePrice = '{=gd_global_currency_display(gd_isset(orderInfo.settlePrice))}';
dablena('track', 'Purchase', {
value: getNumericValue(purchasePrice),
currency: 'KRW',
items: [
<!--{ @ orderInfo.goods }-->
{ product_id: '{=.goodsNo}' }, // 주문 상품 반복 구간 — 주문한 상품 수만큼 자동 반복됩니다
<!--{ / }-->
]
});
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
설치 예시 (기존 네이버·페이스북 스크립트가 있는 경우 그 위에 추가)
<!-- Dable 스크립트 시작 -->
<script> ... 위 Purchase 코드 ... </script>
<!-- Dable 스크립트 종료 -->
{=naverCommonInflowScript}
{=fbOrderEndScript}
{ # footer }
HTML
복사
주의사항
•
product_id는 EP의 상품 ID와 동일해야 합니다. 고도몰 네이버 쇼핑 EP의 상품 ID와 같은 값(상품코드)이 스크립트에 들어가야 리타게팅이 작동합니다.
•
위 치환코드({=goodsView['goodsNo']}, {=.goodsNo}, {=orderInfo.settlePrice})는 고도몰5 기본 스킨 기준이며, NHN커머스 공식 마케팅 스크립트 가이드와 동일한 변수입니다. 스킨을 커스텀한 경우 변수명이 다를 수 있으니 값이 들어오지 않으면 스킨 제작사에 확인 부탁드립니다.
•
주문완료 페이지의 <!--{ @ orderInfo.goods }--> ... <!--{ / }-->는 고도몰 반복 구문입니다. 주문 상품 수만큼 { product_id: ... }, 항목이 자동 생성되며, 마지막 항목 뒤의 쉼표는 JavaScript에서 허용되므로 그대로 두셔도 됩니다.
•
장바구니 페이지의 {=goodsNo}는 장바구니 상품 반복 구간(cartInfo) 안에 스크립트를 넣을 때 기준입니다. 반복 구간 밖에 넣으면 값이 비어 있으므로, 담기 완료 시점(상품 상세의 장바구니 버튼 클릭)에 {=goodsView['goodsNo']}로 호출하는 방식도 가능합니다.
•
설치 완료 후
설치가 완료되면 계정 번호와 함께 ad-kr@dable.io로 회신 부탁드립니다. 데이블에서 ViewContent / AddToCart / Purchase 수집 여부와 product_id 매칭 상태를 확인한 뒤 안내드립니다. 직접 확인은 전환 스크립트 설치 확인하기를 참고 부탁드립니다.
