[GTM] dataLayer - 커스텀하게 데이터 수집하는 방법

dataLayer이란?

데이터를 저장해야 하는 가상의 공간

웹사이트에서 받은 데이터 정보값을 GTM에게 전달하는 매개체

 

dataLayer로 데이터를 커스텀해서 수집하기!

방법

1. 공통변수 위에 데이터레이어를 설정

2. dataLayer.push 메소드

 

공통변수 위에 적는 데이터레이어가 나중에 너무 쌓이면 보기 힘듦 => 실무에서는 'dataLayer.push'를 많이 씀 

이벤트가 들어오는 시점에 코드를 넣기 때문에 더 직관적으로 이해 가능

 

만들기 예시 (패캠 Part17. Ch3-7)

* 상황 : 설문지 제출하기 버튼을 눌러도, 필수 양식이 다 안채워져있는 상황에서는 제출이 안 됨 => 필수양식을 다 채우고 제대로 설문지 제출 버튼을 누른 데이터만 집계할 예정 

1. dataLayer 자바스크립트 코드 만들기

--- 기본 공식 ---

dataLayer.push({

'event' : '이벤트이름'

});

 

만약 추가적으로 변수 이름을 설정하고 싶다면 , + Enter를 해서 formName 같은 걸 추가

자바스크립트는 대소문자 구분하기 때문에 주의!! 

소괄호로 열고 중괄호가 나왔으니 중괄호로 먼저 닫고 소괄호로 닫아주는 방식

 

 

2. GTM 설정

--- 변수 추가 ---

사용자 정의 변수 > 변수 유형 : 데이터 영역 변수(dataLayer가 이 변수로 잡힘)

formName을 변수로 추가했음

 

--- 트리거 ---

기타 - 맞춤 이벤트 클릭

이벤트 이름은 submitForm