GTM 데이터 레이어 기초부터 활용까지 한 번에 끝내기

마케터 등 비개발 직군이 Google Analytics4를 잘 사용하기 위해서는 데이터 레이어를 활용해야 합니다. 데이터 레이어는 Google Tag Manager(이하 GTM)에서 제공하는 요소로 만들기 어려운 이벤트도 Google Analytics4에 추가할 수 있게 합니다. 하지만, Google Analytics4가 낯선 분들에게 데이터 레이어의 개념은 굉장히 낯설고 어렵죠.

 

하지만 개발자가 아닌 이상 데이터 레이어에 대한 이해와 활용에 대한 부분만 이해해도 충분합니다. 데이터 레이어를 직접 만들고자 한다면, 기업 단위에서 마케터에게 주어지긴 어려운 업무입니다. 만약 개인이라도 개발 지식이 없다면 커스텀이 어렵기 때문이죠.

 

데이터 레이어는 무엇인가요?

데이터 레이어는 웹사이트나 앱에서 발생하는 다양한 이벤트와 데이터를 배열에 담아 Google Analytics4로 송출하기 위한 JavaScript 객체입니다. 즉, 맞춤 이벤트 값을 담은 코드를 Google Analytics4로 보여주기 위한 요소이며, GTM과 함께 사용하게 됩니다.

 

데이터 레이어 왜 사용하나요?

 

• 서버 단위의 정보를 제공하기 위함
• 이벤트의 신뢰성을 확보하기 위함

 

프론트엔드 단위의 이벤트는 GTM에서 제공하는 트리거와 변수로 충분히 이벤트를 만들 수 있습니다. 하지만 서버 단위의 이벤트는 GTM에서 만들 수 없죠. 그렇기에 서비스 내부 데이터를 데이터 레이어에 담아 Google Analytics4에 송출하게 됩니다.

아래 예시를 생각하면 데이터 레이어의 필요성을 느낄 수 있습니다.

Google Analytics4에서 멤버십 별 사이트 이용 행태를 확인하고자 한다.
홈페이지에서는 멤버십에 대한 정보는 “내 정보”에서만 확인이 가능하다.
주요 사이트 이용 액션을 dataLayer로 구성해 멤버십 정보를 담아서 Google에 송출하기로 했다.

 

GTM으로 이벤트를 구성할 때, 홈페이지에는 멤버십 정보가 없기에 이벤트 파라미터를 사용하기 어렵습니다. GTM은 홈페이지 화면에 내용을 가져올 수 있지만, 서버 단위에 저장된 정보는 알 수 없기 때문이죠. 하지만 데이터 레이어를 활용한다면 서버 단위의 정보도 이벤트에 포함시킬 수 있습니다.

 

그 외에도 데이터 레이어는 이벤트 신뢰성을 구축하는데 도움이 됩니다. GTM에서 종종 발생하는 것은 중복 이벤트입니다. GTM 이벤트 트리거로 설정한 버튼을 여러 번 클릭하는 경우, 이벤트가 중복으로 잡히는 경우가 있죠. 물론, 조건을 걸어서 해결할 수 있습니다. 하지만 서버 단위에서 데이터가 적재된 경우에만 이벤트를 송출한다면 가장 신뢰성 높은 이벤트를 만들 수 있습니다.

 

데이터 레이어는 어떻게 작동되나요?

 

데이터 레이어는 크게 조건을 설정한 것을 이행했을 때, dataLayer 코드가 실행되게 됩니다. 여기서 데이터 레이어는 이벤트명과 변수명, 값을 포함하게 됩니다. 그 후 GTM에서 데이터 레이어를 확인하고, 데이터 레이어의 값을 활용해 이벤트를 만들어 Google Analytics4로 보내게 됩니다.

 

즉, dataLayer는 크게 송출과 GTM을 통한 확인, 그리고 Google Analytics4로 이벤트 전달 과정이 존재합니다. 여기서 우리가 데이터 레이어를 설정하는 것은 크게 두 가지입니다.

 

1. 데이터 레이어가 작동하는 조건과 추가될 값을 추가한다.
2. 송출된 데이터를 기반으로 GTM에서 이벤트를 생성한다.

 

개발자라면 1번의 조건과 값을 추가하는 영역을 진행하고, 마케터라면 2번의 데이터 레이어로 이벤트를 구성하게 됩니다. 물론, 마케터가 1번의 조건과 값을 개발자에게 알려주는 과정도 필요하죠.

 

데이터 레이어의 구성

데이터 레이어는 기본적으로 아래 코드로 구성됩니다.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'eventName',
  'key1': 'value1',
  'key2': 'value2'
});

 

처음에 dataLayer를 확인하고, 초기화 하는 코드 window.dataLayer = window.dataLayer || []; 를 실행합니다. 하지만 만약 코드 상단에 GTM 기본 태그가 존재한다면, 이미 window.dataLayer || [];와 같은 내용이 존재하기에 해당 부분은 없어도 됩니다. 그 후 window.dataLayer.push로 이벤트명과 키와 값을 추가하게 됩니다.

 

즉, 데이터 레이어 코드보다 상위에 GTM 코드가 위치해 있다면, 위 데이터 레이어 코드는 아래와 같이 구성됩니다.

window.dataLayer.push({
  'event': 'eventName',
  'key1': 'value1',
  'key2': 'value2'
});

 

데이터 레이어의 예시를 살펴보면 이벤트와 키 값에 대해서 더 쉽게 이해할 수 있습니다.

 

우리는 고객이 banner를 클릭한 경우를 데이터 레이어로 이벤트 송출을 하려고 한다.
이벤트명은 click_banner로 설정한다.
그리고 파라미터로는 고객의 멤버십 등급을 알리고,
고객의 로그인 방식 (소셜, 핸드폰 번호 등)을 추가하고자 한다.

 

window.dataLayer.push({
  'event' : 'click_banner',
  'membership' : {{customer_membershi}} // free, paid ...
  'login_method' : {{login_method}} // social, phone, id ...
});

 

위 내용에서 {{customer_membership}}이나 {{login_method}}는 변수로 들어가야 합니다. 고객의 등급과 로그인 방식은 고객마다 다르기 때문에 상수로 넣는다면 올바른 정보를 전달하지 못합니다. 하지만 이 부분은 개발자분들이 처리해 줄 내용입니다.

 

데이터 레이어 설정 완료 후, 이벤트 세팅 방법

데이터 레이어 설정을 완료했다면, GTM에서 해당 데이터 레이어 정보를 기반으로 이벤트를 설정해야 합니다. 즉, 데이터 레이어가 설정된 상태가 Google Analytics4에 이벤트로 적재되는 것은 아닙니다. GTM에서 이벤트 설정을 완료해야 우리가 Google Analytics4에서도 이벤트를 볼 수 있게 되는 것이죠.

 

디버그를 통한 데이터 레이어 정상 작동 확인

 

 

GTM 내 미리보기로 사이트에 접근 후, 데이터 레이어 작동 조건이 되는 행동을 진행합니다. 그럴 경우, 좌측 요약(summary) 항목에 데이터 레이어의 이벤트 명이 나타나게 됩니다.

해당 이벤트명을 클릭하면 우측 화면에 API 호출(API Call) 부분이 데이터 레이어 정보를 보여줍니다. 여기서 이벤트명과 파라미터의 키를 잘 확인합니다. 그리고 값이 정상적으로 담겨있는지 체크해야 합니다.

 

위 이미지에서는 event명은 ‘login’ 이고, 추가한 user_id 키에 hashing 처리된 값이 잘 추가되어 있습니다. 이제 우리가 할 일은 데이터 레이어의 정보로 변수와 트리거를 만들어 이벤트를 구성하는 것입니다.

 

GTM에서 데이터 영역 변수 생성

데이터 레이어는 그 자체로 사용할 수 없기에 그 안에 포함된 값을 직접 설정해서 사용해야 합니다. 특히, 직접 설정한 키 값(위 예시에서 user_id)의 경우 값을 가져오기 위해 변수로 지정이 필요합니다.

 

 

1. GTM 화면 좌측 변수 탭에서 사용자 정의 변수를 새로 만들기로 만듭니다.
2. 노출된 화면 빈 박스를 클릭해 데이터 영역 변수를 클릭합니다.
3. 가장 처음 빈 블록에 데이터 레이어의 키 값 (위 예시에서 user_id)를 입력하고, 저장합니다.

 

위 과정을 진행하면 이벤트에서 데이터 레이어의 키 값을 확인해, 해당 키가 있는 경우 그 안의 값을 표시하게 됩니다.

 

데이터 영역 변수에 버전이 있는데, 버전 1을 선택하면 안 되나요?

버전 1을 선택해도 되지만, 버전 2를 사용하는 것이 권장됩니다. 그 이유는 몇 가지가 있습니다. 버전 1의 경우 중첩된 데이터 구조를 지원하지 않지만, 버전 2는 중첩 데이터 구조를 지원합니다. 그리고 버전 2는 이전 데이터를 덮어쓰지 않고, 이전 데이터와 병합하여 데이터를 유지합니다.

 

GTM에서 맞춤 이벤트 트리거 생성

데이터 레이어는 이미 특정 조건에서 객체가 송출되게 됩니다. 즉, 데이터 레이어는 그 자체로 트리거가 됩니다. 그렇기 때문에 맞춤 이벤트로 트리거를 설정하면 됩니다. 특정 이벤트명이 작동하는 것으로 이벤트를 실행하게 됩니다.

 

 

1. GTM 좌측 트리거 탭에서 새로 만들기를 클릭합니다.
2. 트리거 구성을 클릭해 맞춤 이벤트를 클릭합니다.
3. 가장 처음 빈 블록에 데이터 레이어의 이벤트명(위 예시에서 login)을 입력하고, 저장합니다.

 

위 과정은 이벤트 실행 조건을 설정하는 것으로 데이터 레이어가 송출되는 것으로 이벤트를 실행하게 됩니다.

 

GTM 태그 구성

트리거와 변수를 모두 준비했기에, Google Analytics4로 전달할 이벤트 태그를 만들면 됩니다.

 

 

1. GTM 좌측 태그 탭에서 새로 만들기를 클릭합니다.
2. 태그 구성으로는 Google 애널리틱스 선택 후, Google 애널리틱스 : GA4 이벤트를 선택합니다.
3. 측정 ID 부분에는 이벤트를 전달받을 Google Analytics4의 Google 태그 값을 입력합니다.
4. 이벤트명에는 Google Analytics4에서 확인하기 위한 이벤트명을 입력합니다.
   반드시 데이터 레이어의 이벤트명과 동일할 필요는 없습니다.
5. 그 후, 이벤트 매개변수 토글을 클릭한 후 매개변수 추가를 클릭합니다.
6. 이벤트 매개변수에는 값을 포괄할 수 있는 이름을 지정합니다.
   반드시 데이터 레이어의 키와 동일할 필요는 없습니다.
7. 이벤트 매개변수 값에는 박스 우측의 버튼을 클릭해 이전에 설정한 데이터 영역 변수를 추가합니다.
8. 매개변수 추가가 완료됐다면, 트리거 부분을 클릭해 설정한 맞춤 이벤트 트리거를 지정합니다.
9. 설정이 완료됐다면 저장을 누릅니다.

 

매개변수명은 아무렇게 지정해도 되나요?

이벤트 매개변수의 이름은 원하는 대로 지정해도 됩니다. 하지만 만약 설정한 값이 구글 가이드에 존재하는 내용과 일치한다면 구글에서 제안하는 이벤트 매개변수 이름을 사용하는 것이 좋습니다.

이는 Big Query 등 구글 관련 서비스를 이용할 때, 형식이나 활용이 더 원활할 수 있기 때문입니다.

 

구글이 제안하는 매개변수 명칭 확인하기

 

 

이미 변수와 트리거를 준비했기에 해당 과정은 바로 진행할 수 있습니다. 하지만 가장 중요한 것은 설정 후 반드시 디버그를 진행해야 합니다. 설정이 완료됐다면 GTM 우측 상단의 미리 보기를 클릭해서 실제 이벤트가 실행되는지 확인합니다.

 

동일한 데이터 레이어 명에서 하단 실행된 태그 수에 지정한 태그명이 노출되는지 확인합니다. 그리고 태그명을 클릭해서 설정한 값이 정상적으로 있는지 확인 후, GTM 버전을 제출하면 됩니다.