GTM 데이블 전환 스크립트 템플릿이란?
•
데이블 전환 스크립트를 따로 설치하지 않고 GTM 태그 스크립트를 설치해서 데이블 전환 스크립트를 설치하는 방법을 제공합니다.
사용하기
•
GTM 에 로그인 후, 신규 태그를 생성하거나 또는 기존 태그를 선택합니다.
•
태그 구성에서 편집 연필 아이콘을 클릭합니다.
•
커뮤니티 템플릿 갤러리에서 더 많은 태그 유형을 찾아보세요.를 클릭합니다.
•
그리고 검색창에 dable 을 입력하면 Dable Conversion Script 템플릿이 검색됩니다.
•
선택하고 “작업 공간에 추가” 버튼을 클릭합니다.
•
위 화면처럼 태그 구성에 Dable Conversion Script 가 설치된 것을 확인할 수 있습니다.
PageView 측정하기
•
Dable Service ID 에 값을 추가하고 Event Type 을 설정합니다.
•
트리거를 알맞게 설정하고 저장합니다.
•
태그를 게시합니다.
스크립트 설치 및 테스트
•
Google 태그 관리자 설치를 클릭해서 스크립트 태그를 복사합니다.
•
테스트 index.html 을 생성하고 아래와 같이 복사한 스크립트를 붙여 넣습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WDCCMPM3');</script>
<!-- End Google Tag Manager -->
</head>
<body>
</body>
</html>
HTML
복사
•
페이지를 방문하면 visit 로그가 데이블로 전송되는 것을 확인할 수 있습니다.
Purchase 로그 트랙킹
•
purchase 로그는 위처럼 사용하여 static 하게 가격을 설정하여 로그를 측정할 수 있습니다.
•
하지만, 가격은 상품마다 다를 수 있기 때문에 로그마다 변경되어야 하는 경우가 있습니다.
•
이럴 때, GTM 의 변수를 사용하여 구매가격과 화폐단위를 동적으로 설정할 수 있습니다.
GTM 변수 생성
•
purchase_value, purchase_currency 이름으로 변수를 생성합니다.
purchase_value 생성
•
작업 공간에서 변수를 선택하고 새로 만들기를 클릭합니다.
•
변수 구성에서 편집 연필 아이콘을 클릭합니다.
•
가격을 측정하므로 데이터 영역 변수를 선택합니다.
•
데이터 영역 변수 이름 칸에는 사이트가 실제로 내보내는 이름을 적습니다.
◦
아래 [GTM Data Layer] 예시처럼 사이트 코드를 직접 넣는 경우 → purchase_value
◦
Shopline, Cafe24 같은 솔루션을 쓰는 경우 → 사이트가 이미 다른 이름으로 내보내고 있을 수 있습니다. 미리보기(Preview)에서 실제 이름을 확인하고 그 이름을 적으세요. (예: 사이트가 value 로 내보내면 value)
•
맨 위 변수 이름 칸은 자유롭게 지어도 됩니다. GTM 안에서 부르는 별명입니다.
•
변수를 만든 것만으로는 값이 넘어가지 않습니다. 만든 변수를 태그 필드에 꽂는 것까지 해야 합니다.
•
그러면 사용자 정의 변수에 생성이 됩니다.
purchase_currency 변수 생성
•
purchase_currency 이름으로 변수를 생성합니다.
변수 사용하여 purchase 트랙킹
•
변수를 사용하여 트래킹 하려면 트리커 이벤트를 생성해야 합니다.
•
트리거에 진입하여 새로 만들기를 클릭합니다.
•
트리거 구성에서 편집 연필 아이콘을 클릭합니다.
•
맞춤 이벤트를 선택합니다.
•
알맞는 이름(아무 이름이나 설정 가능)을 설정하고 저장합니다.
•
새로운 트리거가 저장되었습니다.
•
데이블 Purchase 태그를 구성하고 이미지와 같이 이벤트 타입과 이벤트 파라미터 그리고 트리거를 설정합니다.
•
새로운 태그가 생성됩니다.
•
제출합니다.
GTM Data Layer
•
GTM 변수를 사용하기 위해선 GTM Data Layer 를 GTM Script 위에 설치해야 합니다. 아래와 같이 코드를 작성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- GTM DATA LAYER -->
<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WDCCMPM3');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<script>
<!-- 원하는 곳 또는 이벤트에서 측정 -->
dataLayer.push({
'purchase_value': 39000, // 실제 구매 금액
'purchase_currency': 'KRW', // 통화 코드
'event': 'purchase_completed' // 트리거용 이벤트
});
</script>
</body>
</html>
HTML
복사
•
purchase 로그가 잘 측정되는 것을 확인할 수 있습니다.
•
데이블 마케팅 대시보드에서도 purchase 로그가 잘 수집되고 있음을 확인할 수 있습니다.
PageView 이벤트를 특정 시간 이후에 측정하기
•
페이지에 진입시 특정 시간이 흐른 경우에만 유효한 PageView 로 집계하고 싶은 요구 사항이 있을 수 있습니다.
•
GTM 타이머 트리거 또는 코드를 사용하여 측정 가능합니다. 코드를 통한 측정은 고급 설정이 필요한 경우에 사용하시면 좋습니다. 그 이외에는 GTM 타이머 트리거를 사용하는 것이 편리합니다.
1. GTM 타이머 트리거를 사용한 측정 방법
•
GTM Data Layer 코드 작업 없이 타이머 트리거를 사용할 수도 있습니다.
•
태그를 새로 생성합니다.
•
태그 구성에 Dable Conversion Script 커뮤니티 템플릿을 설정합니다.
•
트리거 구성에서 타이머 트리거를 선택합니다.
•
간격과 제한을 설정합니다.
◦
15000 밀리세컨드는 15초를 의미합니다.
◦
제한에 1 값은 1회만 이벤트를 트리거한다는 의미입니다.
•
가장 중요한 값은 타이머가 어떤 조건일 때, 트리거 되느냐를 설정하는 조건 설정입니다.
◦
◦
따라서, 실제로 사용하실 때는, 이벤트를 측정하고자 하는 페이지의 URL 값을 사용해야 합니다.
•
최종 태그 구성은 아래와 같습니다.
•
저장하고 제출합니다.
•
2. GTM Data Layer 및 자바스크립 코드를 사용한 방법
•
GTM Data Layer 를 활용하면, 아주 쉽게 원하는 내용을 적용할 수 있습니다.
•
태그 구성 > 트리거 구성 > 맞춤 이벤트를 선택한 후, 적당한 이름을 가진 이벤트를 생성합니다.
•
이 가이드에서는 15초 이후에 PageView 를 측정할 예정이기 때문에, track_pageview_after_15secs 라고 지었습니다.
•
트리거를 저장하고 태그를 배포합니다.
•
그리고 코드에서 dataLayer 를 사용하여, 특정 시간 이후에 이벤트를 측정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- GTM DATA LAYER -->
<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WDCCMPM3');</script>
<!-- End Google Tag Manager -->
<!-- 15초 이후에 측정됩니다. -->
<script>
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
dataLayer.push({
'event': 'track_pageview_after_15secs' // 트리거용 이벤트
});
}, 15000);
});
</script>
</head>
<body>
<!-- 시간 타이머 예제를 설명하기 위한 것이므로 무시하셔도 됩니다 -->
<div id="counter" style="font-size: 32px; font-weight: bold;">
0초
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const counterEl = document.getElementById('counter');
let seconds = 0;
setInterval(() => {
seconds += 1;
counterEl.textContent = `${seconds}초`;
}, 1000);
});
</script>
</body>
</html>
JavaScript
복사
•
그러면 아래와 같이 15초에 PageView(visit) 로그가 측정되는 것을 확인할 수 있습니다.
버튼 클릭시, 전환 이벤트 남기기
•
GTM Data Layer 없이, 버튼을 클릭할 때, 특정 이벤트를 측정해 보겠습니다.
•
Complete Registratioin 을 측정해 보겠습니다.
•
태그를 Complete Registratioin 으로 새로 생성하고 트리거를 추가합니다.
•
+ 버튼을 클릭합니다.
•
이어서 나온 패널에서 트리거 구성을 클릭하고 모든 요소를 선택합니다.
•
그리고 일부 클릭 을 선택합니다.
•
화살표로 표시한 아이콘을 클릭하면, 기본으로 정의되어 있는 변수를 사용할 수 있습니다. 클릭합니다.
•
다양한 변수가 있습니다. 필요에 따라 선택해 사용하면 됩니다. 이 가이드에서는 Click Text 를 선택하겠습니다.
•
값에 확인 을 입력합니다. 따라서 의미가 확인 단어가 포함된 요소를 클릭하면, 이 이벤트가 트리거 됨을 의미합니다. 저장합니다.
•
최종 태그가 아래와 같이 정의됩니다. 태그를 저장하고 제출합니다.
•
테스트 페이지를 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WDCCMPM3');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<button id="confirm">확인</button>
<button id="cancel">취소</button>
</body>
</html>
JavaScript
복사
•
확인 문구가 있는 버튼을 클릭했을 경우에만, registration 전환이 측정되는 것을 확인할 수 있습니다. GTM 이 중복 전환도 자동으로 막아줍니다.
•
더 정확하게 측정하기 위해서 click id 등을 사용하는 것도 고려해 볼 수 있습니다.
Items(DPA) 상품 ID 전달하기
•
DPA(상품기반 리타겟팅)를 사용하려면, 유저가 조회/장바구니/구매한 상품 ID를 데이블 전환 스크립트에 전달해야 합니다.
•
Items(DPA) 필드를 사용하여 상품 ID를 전달할 수 있습니다.
dable_items 변수 생성
•
purchase_value, purchase_currency 변수 생성과 동일한 방법으로 dable_items 변수를 생성합니다.
•
작업 공간 > 변수 > 새로 만들기를 클릭합니다.
•
데이터 영역 변수를 선택합니다.
•
맨 위 변수 이름 칸은 자유롭게 지어도 됩니다. GTM 안에서 부르는 별명입니다.
•
데이터 영역 변수 이름 칸에는 사이트가 실제로 상품 정보를 내보내는 이름을 적습니다.
◦
아래 [GTM Data Layer] 예시처럼 사이트 코드를 직접 넣는 경우 → dable_items
◦
솔루션을 쓰는 경우 → 미리보기에서 실제 이름을 확인하고 그 이름을 적으세요.
◦
상품 하나하나의 키는 반드시 product_id 여야 합니다. 이건 데이블이 읽는 이름이라 바꿀 수 없습니다.
태그에 Items(DPA) 필드 설정
•
변수를 만든 것만으로는 값이 넘어가지 않습니다. 만든 변수를 아래처럼 태그 필드에 꽂는 것까지 해야 합니다.
•
Dable Conversion 태그의 Event Parameters 그룹에서 Items (DPA) 필드에 {{dable_items}} 를 입력합니다.
•
Items(DPA) 필드는 ViewContent, AddToCart, Purchase 이벤트에서만 사용됩니다. 다른 이벤트(PageView, Search 등)에서는 입력해도 무시됩니다.
◦
ViewContent
◦
AddToCart
◦
Purchase
GTM Data Layer
•
이벤트 발생 시 dable_items 에 상품 ID 배열을 전달합니다.
•
각 항목에는 반드시 product_id 필드가 포함되어야 하며, 광고주의 상품 카탈로그(EP)에 등록된 상품 ID와 일치해야 합니다.
// 상품 상세 페이지 (ViewContent)
dataLayer.push({
'dable_items': [
{ 'product_id': '12345' }
],
'event': 'view_content'
});
// 장바구니 추가 (AddToCart)
dataLayer.push({
'dable_items': [
{ 'product_id': '12345' },
{ 'product_id': '67890' }
],
'event': 'add_to_cart'
});
// 구매 완료 (Purchase)
dataLayer.push({
'purchase_value': 89000,
'purchase_currency': 'KRW',
'dable_items': [
{ 'product_id': '12345' },
{ 'product_id': '67890' }
],
'event': 'purchase_completed'
});
JavaScript
복사
게시 전 꼭 확인해주세요
값은 사이트 → 변수 → 태그 필드 순서로 전달됩니다. 여기서 잘못 넣으면 빈 값이 전송됩니다.
1. 미리보기(Preview)로 값 확인
•
상품상세 → 장바구니 → 테스트 주문까지 한 번 진행해, 각 단계에서 상품 ID와 금액이 실제 값으로 뜨는지 봅니다.
•
undefined 나 빈칸이면 변수 이름이 사이트가 내보내는 이름과 다른 것입니다.
•
값이 떠도 상품 ID가 EP에 등록된 값과 같은지 대조하세요.
2. 만든 변수를 태그 필드에 꽂았는지
•
Items (DPA) 칸을 비워두면 전환은 잡히는데 상품 정보만 빠집니다. 전환 수는 정상으로 보여서 알아채기 어렵습니다.
3. 구매(Purchase)는 금액이 없으면 전환 자체가 기록되지 않음
•
금액(value)이나 통화(currency)가 비면 에러 없이 아무것도 전송되지 않습니다. 0 도 빈 값으로 처리됩니다.
•
금액은 숫자만 넣습니다. NT$1,200 → 1200, 통화는 별도 칸에 TWD / KRW.
4. 확인 후 반드시 게시(Publish)
•
미리보기에서 잘 떠도 게시하지 않으면 실제 사이트에는 반영되지 않습니다.
