dataLayer Tutorial (1)
dataLayer : 구글태그관리자(GTM)의 주요 개념 중 하나입니다. dataLayer가 없으면 GTM에 변수나 트리거가 없으며 태그가 실행되지 않습니다.
dataLayer는 태그 관리가 제대로 실행되도록 유지하고 구글태그관리자(GTM)를 확장성 있게 만들어주는 중요한 요소입니다.
목차.
1. dataLayer 란 무엇일까요?
먼저, 기술적으로 말하면 dataLayer는 특정 정보를 저장하는 JavaScript 배열입니다.
약간 이해가 힘들 수 있을 것 같아 조금 더 간단하게 설명드리겠습니다.
![[그림 1] 구글태그관리자 흐름 (dataLayer)](https://theanalytics.kr/wp-content/uploads/2023/06/1-1-1024x518.png)
dataLayer는 여러분의 웹사이트에서 다양한 데이터를 저장할 수 있는 가상 웹사이트 계층입니다. 그 다음 구글태그관리자는 해당 정보를 읽고 태그/트리거/변수에서 사용하거나 구글애널리틱스(Google Analytics), 구글애즈(Google Ads), 페이스북 픽셀(Facebook Pixel)과 같은 도구와 연계 작업을 합니다.
구글태그관리자 컨테이너의 자바스크립트 스닛펫을 웹사이트의 소스코드에 배치하면 dataLayer가 자동으로 생성됩니다.
구글태그관리자(GTM) dataLayer의 추가 정보는 GTM 스니펫 위에 추가 dataLayer 스니펫을 배치하거나 dataLayer.push 를 사용하여 전달할 수 있습니다.
2. dataLayer (dataLayer.push)에 데이터 저장
데이터를 dataLayer에 push하는 방법에는 두 가지가 있습니다. 실제로는 하나만 사용해야 하지만 이해를 돕기 위해 두 가지 모두 언급하겠습니다.
① GTM 컨테이너 스니펫 위에 dataLayer를 추가합니다.
② 또는 dataLayer.push 로 데이터를 push 합니다.
①번과 ②번의 차이점은 무엇일까요?
①번은 예를 들어 상품 페이지가 로드될 시 상품 데이터와 같이 페이지가 로드되는 순간 바로 사용자 지정 데이터를 push하려는 경우에 유용합니다. dataLayer에서 Meta Pixel로 해당 상품 데이터를 보낼 수 있습니다. (콘텐츠 보기 이벤트 포함)
이 경우 개발자는 상품ID, 상품명 등과 같은 매개변수를 사용하여 구글태그관리자(GTM) 추적 컨테이너 위에 dataLayer 스니펫을 추가해야 합니다. 예를 들면, 다음과 같습니다.
<script>
dataLayer = ({
'productID': '2736251',
'productTitle': '청바지',
'productPrice': '25000'
});
</script>
<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->나중에 dataLayer 변수의 도움으로 해당 정보를 읽고 Meta Pixel로 전송할 수 있습니다.
②번(권장)은 dataLayer.push를 사용하면 웹 사이트에서 특정 이벤트가 발생할 때 추가 데이터를 push 할 수 있습니다.
몇 가지 예를 들어보겠습니다.
구글태그관리자(GTM)의 기본 양식 리스너로 쉽게 추적할 수 없는 뉴스레터 가입 양식이 있다고 가정해 보겠습니다. 새 구독자가 양식을 성공적으로 작성하면 웹 사이트 개발자에게 dataLayer 이벤트를 실행하도록 요청해야 합니다.
window.dataLayer.push({'event': 'new_subscriber'});원하는 경우 개발자에게 추가 정보(예 : 동일한 페이지에 둘 이상의 양식이 있을 수 있으므로 양식 위치)를 요청할 수 있습니다.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'formLocation': 'footer',
'event': 'new_subscriber'
});또는 예를 들면 방문자가 장바구니에 상품을 추가하면 dataLayer 이벤트(상품 정보 포함)가 실행될 수 있습니다.
3. dataLayer에서 데이터 읽기
디애널리틱스에 여러 작성자가 있다고 가정해 보겠습니다.
- 홍길동
- 성춘향
- 이몽룡
- 기타
어떤 작성자가 가장 매력적인 콘텐츠를 작성했는지 확인한 다음 구글애널리틱스(GA)에서 세션을 분류하고 싶습니다.
DataLayer에 게시물 작성자 이름을 저장하는 스니펫은 다음과 같습니다.
<head>
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push ({
pagePostAuthor: '홍길동'
});
</script>
<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->
</head>4. dataLayer 변수
기본적으로 구글태그관리자(GTM)는 데이터 영역 변수를 사용하지 않으면 dataLayer의 데이터를 인식하지 못합니다.
dataLayer 변수를 사용하여 값을 받아와야 합니다.
![[그림 2] GTM - dataLayer 변수](https://theanalytics.kr/wp-content/uploads/2023/06/2-1-1024x714.png)
① 구글태그관리자(GTM) [미리보기]를 실행해서 [1.Message] 항목을 선택합니다.
② 전에 설정한 dataLayer의 pagePostAuthor 값 (‘홍길동’)이 표시됩니다.
③ [Variables] 영역을 선택합니다.
④ [div-pagePostAuthor] 데이터 영역 변수의 값을 확인할 수 있습니다.
[그림 2]처럼 pagePostAuthor 값을 가져오려면 변수 설정에서 pagePostAuthor 키를 설정해야 합니다.
누군가 댓글을 남길 때 구글애널리틱스4 (GA4)에 이벤트를 보내고 싶다고 가정해 보겠습니다. 이벤트와 함께 디애널리틱스에서 원본 글을 작성한 작성자의 전체 이름을 push 한다고 가정해보면 독자 참여도가 가장 높은 작성자를 확인할 수 있습니다.
이번 글에서는 GTM 태그를 만드는 방법에 대해 자세히 설명하지는 않겠습니다. dataLayer에서 데이터를 가져와 변수로 변환하는 방법(구글태그관리자 내에서)만 보여드리겠습니다.
그럼, 이제부터 변수를 직접 생성해 보겠습니다.
![[그림 3] GTM 데이터 영역 변수 설정](https://theanalytics.kr/wp-content/uploads/2023/06/3-1-674x1024.png)
구글태그관리자 [변수] 메뉴로 이동한 후 [사용자 정의 변수]에서 [새로 만들기]를 선택합니다.
① 변수 이름을 설정합니다.
② [변수 구성]에서 [데이터 영역 변수]를 선택하고 데이터 영역 변수 이름을 입력합니다.
설정하고 오른쪽 상단에 [저장]을 클릭합니다.
![[그림 4] dataLayer 변수](https://theanalytics.kr/wp-content/uploads/2023/06/4-1-1024x705.png)
[그림 3]에서 설정한 변수의 값을 확인하려면 GTM [미리보기]를 실행합니다.
① 왼쪽 메뉴에서 [Message]를 클릭한 후 [variables] 탭을 선택합니다.
② [그림 3]에서 설정한 “div-pagePostAuthor” 변수를 확인할 수 있습니다.
이렇게 기본적으로 dataLayer의 정의와 기본적인 사용방법에 대해 간단하게 살펴봤습니다.
다음 글에서 dataLayer를 좀 더 깊이 있게 다루도록 하겠습니다.
FAQ
1. dataLayer는 GTM 스니펫 이전에 삽입되어야 하나요?
Data Layer는 또한 GTM 컨테이너 코드가 로드되기 전에 시작되어야 합니다 . 즉, dataLayer를 의미합니다. push 는 웹사이트 head 영역의 GTM 컨테이너 코드 스니펫 위에 있어야 합니다.
2. GTM dataLayer 는 어떻게 동작하나요?
구글태그관리자(GTM)는 dataLayer와 함께 배포될 때 가장 잘 작동합니다. dataLayer은 웹사이트에서 GTM 컨테이너로 정보를 전달하는 데 사용되는 자바스크립트 개체입니다. 그런 다음 해당 정보를 사용하여 태그 구성에서 변수를 채우고 트리거를 활성화할 수 있습니다.
