메이크샵 쇼핑몰에 DPA 전환 스크립트 4개(공통 + ViewContent + AddToCart + Purchase)를 설치하는 방법입니다.
이벤트별 코드 구성과 공통 주의사항은 [DPA 전환 스크립트 설치 가이드]를 먼저 확인 부탁드립니다.
메이크샵은 개별디자인(D4) 편집 화면에서 페이지별 HTML을 직접 수정하여 설치하며, 상품 정보는 가상태그(<!--/태그명/-->)로 출력합니다.
이미 데이블 일반 전환 스크립트(Purchase)를 설치하신 경우, 아래 DPA용 코드(items: [{ product_id }] 포함)로 교체해 주세요. 두 개가 함께 있으면 전환이 중복 집계됩니다.메이크샵 공식 가이드
스크립트 삽입 위치와 가상태그는 메이크샵 공식 문서를 함께 참고 부탁드립니다.
•
개별디자인이란? — 개별디자인 편집 메뉴 안내
•
가상태그 사용 — 상품번호·주문 정보 출력 태그
•
메이크샵 고객센터 — 페이지별 가상태그 문의
설치 위치 요약
스크립트 | 메이크샵 관리자 경로 |
공통 (PageView) | 개별디자인 > 디자인 편집 > 공통 영역(상단 HTML / <head>) — 전체 페이지 적용 |
ViewContent | 개별디자인 > 디자인 편집 > 상품 상세 페이지 |
AddToCart | 개별디자인 > 디자인 편집 > 상품 상세 페이지 (장바구니 버튼 클릭 시 호출) |
Purchase | 개별디자인 > 디자인 편집 > 주문 완료 페이지 |
관리자 버전에 따라 메뉴 명칭이 다를 수 있습니다. 찾기 어려우시면 상단 메뉴 검색창에 "개별디자인"을 입력해 주세요. PC 디자인과 모바일 디자인이 분리되어 있다면 양쪽 디자인 모두 설치해 주세요.
1. 공통 스크립트 (PageView)
1.
개별디자인 편집 화면에서 전체 페이지에 공통 적용되는 상단 HTML(<head> 영역)을 엽니다.
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.
개별디자인 편집 화면에서 상품 상세 페이지를 엽니다.
2.
아래 코드를 삽입한 뒤 저장합니다. 상품번호는 메이크샵 가상태그 <!--/branduid/-->로 출력합니다.
<!-- 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: '<!--/branduid/-->' }] // ★ 메이크샵 상품번호 가상태그 — 아래 '주의사항' 참고
});
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
3. AddToCart — 상품 상세 페이지 (장바구니 버튼 클릭 시)
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'); // 내 계정 번호로 변경
function dableAddToCart() {
dablena('track', 'AddToCart', {
items: [{ product_id: '<!--/branduid/-->' }] // ★ 메이크샵 상품번호 가상태그
});
}
</script>
<!-- Dable 스크립트 종료 -->
<!-- 장바구니 버튼에 onclick 추가 예시 -->
<a href="javascript:;" onclick="dableAddToCart(); 기존장바구니함수();">장바구니</a>
HTML
복사
4. Purchase — 주문 완료 페이지
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');
function getNumericValue(formattedValue) {
return parseInt(String(formattedValue).replace(/[^\d]/g, ''), 10);
}
dablena('init', '000-000-000'); // 내 계정 번호로 변경
dablena('track', 'Purchase', {
value: getNumericValue('결제금액가상태그'), // ★ 주문 완료 페이지의 결제 금액 가상태그 — 아래 '주의사항' 참고
currency: 'KRW',
items: [
{ product_id: '주문상품번호가상태그' } // ★ 주문 상품번호 가상태그 — 아래 '주의사항' 참고
]
});
</script>
<!-- Dable 스크립트 종료 -->
HTML
복사
주의사항
•
product_id는 EP의 상품 ID와 동일해야 합니다. 메이크샵 네이버 쇼핑 EP는 상품번호(branduid)를 상품 ID로 사용하므로, 스크립트에도 같은 값이 들어가야 리타게팅이 작동합니다. 등록하신 EP URL을 브라우저에서 열어 상품 ID 컬럼의 값이 상품 상세 URL의 branduid= 값과 같은지 확인하시면 됩니다.
•
가상태그(★): <!--/branduid/-->는 메이크샵 상품 상세 페이지의 기본 가상태그입니다. 주문 완료 페이지의 결제 금액·주문 상품번호 가상태그는 메이크샵 디자인 버전(D2/D4)과 스킨에 따라 다르므로, 가상태그 사용 가이드 또는 개별디자인 편집 화면의 '가상태그 안내'에서 해당 페이지에서 사용 가능한 태그명을 확인한 뒤 위 ★ 자리에 넣어 주세요. 주문 상품이 여러 개인 경우 <!--/loop_.../--> 반복 태그 안에서 { product_id: ... },가 상품 수만큼 생성되도록 구성합니다.
•
•
장바구니 버튼의 기존 onclick 함수명은 디자인마다 다릅니다. 위 예시의 기존장바구니함수() 자리에 원래 있던 함수 호출을 그대로 유지해 주세요.
설치 완료 후
설치가 완료되면 계정 번호와 함께 ad-kr@dable.io로 회신 부탁드립니다. 데이블에서 ViewContent / AddToCart / Purchase 수집 여부와 product_id 매칭 상태를 확인한 뒤 안내드립니다. 직접 확인은 전환 스크립트 설치 확인하기를 참고 부탁드립니다.
