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 생성
•
작업 공간에서 변수를 선택하고 새로 만들기를 클릭합니다.
•
변수 구성에서 편집 연필 아이콘을 클릭합니다.
•
가격을 측정하므로 데이터 영역 변수를 선택합니다.
•
purchase_value 이름(반드시 이 이름을 사용해야 합니다)을 설정하고 저장합니다.
•
그러면 사용자 정의 변수에 생성이 됩니다.
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 변수를 생성합니다.
•
작업 공간 > 변수 > 새로 만들기를 클릭합니다.
•
데이터 영역 변수를 선택합니다.
•
데이터 영역 변수 이름에 dable_items 을 입력하고 저장합니다. (반드시 이 이름을 사용해야 합니다)
태그에 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
복사
