전환 스크립트 설치하기
데이블 전환 스크립트를 이용하여 여러분의 웹사이트에서 일어나는 행동 전환을 추적하고 광고 캠페인의 성과를 끌어올릴 수 있습니다. 사용자들이 여러분의 웹사이트를 방문하여 어떤 행동을 일으키는지 관찰해 보세요
전환 추적 스크립트 확인하기
•
각 광고 계정은 고유의 전환 스크립트를 가지고 있습니다.
•
현재 사용 중인 광고 계정의 전환 스크립트는 대시보드 좌측 메뉴의 `전환 스크립트` 항목에서 확인하실 수 있습니다.
공통 스크립트 & 이벤트 스크립트
데이블은 전환 추적을 위해 최소 2개의 스크립트 설치를 권장합니다.
공통 스크립트 (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 스크립트 종료 -->
Plain Text
복사
•
dablena("init", "000-000-000"); 에서 “000-000-000”은 데이블 계정 번호를 입력합니다.
전환(이벤트) 스크립트 설치하기
이벤트 스크립트
기본적으로 데이블 스크립트를 추적하고 싶은 전환 행동(회원가입, 구매, 장바구니) 의 완료페이지에 삽입합니다.
구매 스크립트는 value 값을 고도몰의 매출 매개변수로 치환 후 설치해야 추적이 가능하기에, 구매 스크립트 설치 시, 아래 가이드 참고 부탁 드립니다.
구매(Purchase) 스크립트 설치하기
Purchase 스크립트의 태그 dablena('track', 'Purchase', {value: '15000', currency: 'KRW'});에서 value 값은 고도몰의 매출 매개변수인{value: getNumericValue(purchasePrice) 로 치환합니다.
•
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'});
</script>
<!-- Dable 스크립트 종료 -->
Plain Text
복사
•
dablena("init", "000-000-000"); 에서 “000-000-000”은 데이블 계정 번호를 입력합니다.
네이버페이 버튼에 스크립트 설치하기
설치가 까다로운 해당 스크립트는 반드시 담당 개발자와 함께 작업 부탁 드리며, jquery 를 사용하지 않는 환경을 기준으로 가이드 작성된 점 꼭 참고 부탁 드립니다.
예시 1
•
head나 body 끝에 PageView와 간편결제 스크립트를 한꺼번에 설치하는 예시입니다.
<!-- 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', '001-000-001');
dablena('track', 'PageView');
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#NPAY_BUTTON_BOX_ID')
.addEventListener('click', (e) => {
const btn = e.currentTarget.querySelector('[id^="NPAY_BUY_LINK_"]');
btn && dablena('track', 'InitiateCheckout');
});
});
</script>
<!-- Dable 스크립트 종료 -->
Plain Text
복사
•
dablena("init", "000-000-000"); 에서 “000-000-000”은 데이블 계정 번호를 입력합니다.
예시 2
•
네이버 체크아웃 구매버튼 <div id="NPAY_BUTTON_BOX_ID">을 찾은 다음, 해당 코드를 닫는 </div> 다음에 데이블 이벤트 코드를 추가해주세요.
dablena('track', 'InitiateCheckout');
Plain Text
복사
•
NPAY 버튼 밑에 PageView와 간편결제 스크립트를 한꺼번에 설치하는 예시입니다.
<!-- 네이버 체크아웃 구매버튼 아래에 -->
<div id="NPAY_BUTTON_BOX_ID">...</div>
<!-- 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', '001-000-001');
dablena('track', 'PageView');
document.querySelector('#NPAY_BUTTON_BOX_ID')
.addEventListener('click', (e) => {
const btn = e.currentTarget.querySelector('[id^="NPAY_BUY_LINK_"]');
btn && dablena('track', 'InitiateCheckout');
});
</script>
<!-- Dable 스크립트 종료 -->
Plain Text
복사
•
dablena("init", "000-000-000"); 에서 “000-000-000”은 데이블 계정 번호를 입력합니다.
