데이터레이어, 푸시, 이벤트 Object, JSON순으로 정리했습니다. 이해에 도움이 되셨으면 좋겠습니다.
안녕하세요. 커피를 좋아하는 마케터 디지비션입니다.
오랜만에 포스팅을 올립니다. 이번에 GA4가 업데이트 되면서, 정리도 하고 공부를 하기 위해 포스팅을 올려보려 합니다. 부디 제가 질 좋은 글을 쓸 수 있고, 끝까지 완주할 수 있었으면 좋겠습니다!
Data Layer Push 정리, 데이터레이어, 푸시, 이벤트 Object, JSON순으로
GTM을 사용하면서 Data Layer Push를 사용할 일은 은근히 자주 있을 것입니다. 예를 들어, 전자상거래 셋팅을 할 때 라던지, 우리가 원하는 시점에 이벤트를 만들 때입니다.
그렇다면 Data Layer Push는 무엇일까요?
Data Layer Push는 GTM이 데이터 영역에 있는 데이터를 가져 올 수 있는 방식입니다. 보통 아래와 같이 이벤트 Object를 JSON형식으로 표현하며, 이를 데이터 영역에 Push해주는 방식입니다. 그래서 합쳐 데이터 레이어(Data Layer = 데이터 영역) 푸시(Push)라고 부릅니다.
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'new_subscriber',
'formLocation': 'footer'
});
</script>위 설명으로 간단히 모든 게 끝날 수 있지만, 조금 더 깊이 찾아 보겠습니다. 순서는 데이터 레이어(Data Layer), 푸시(Push), 이벤트 Object, Json순으로 알아보겠습니다.
1. 데이터 레이어(Data Layer = 데이터 영역)이란?
데이터 영역은 구글 태그 매니저 개념 중 하나입니다. 데이터 레이어는 특정 정보를 저장하는 버킷 같은 개념입니다. 이 장소에 저장된 것을 GTM(Google Tag Manager)가 읽고, 이를 활용할 수 있도록 하는 것입니다.
가령 체육 시간에 배구를 하려고 하는데, 공을 모아 놓는 곳에 배구공이 없다면, 볼링공으로 배구를 하기 힘들겠죠? 손목이 나갈 거예요. 그래서 체육선생님(GTM)은 배구공(Data)가 없어 배구(트리거)를 할 수 없을 것입니다. (없어야죠, 배구공 대신 볼링공으로 하면,,,,) 마찬가지로 GTM에서도 우리가 사용할 데이터가 없는데, 가져오라고 하면 GTM은 어떻게 하라는 것인지 모릅니다.
따라서 GTM에게 먹이(데이터 = 정보)를 주어 GTM이 그것을 사용할 수 있게 하고, 이를 기점으로 트리거(무엇인가 시작할 수 있을 단서)를 실행할 수 있습니다.
위 이미지는 고도몰에서 상품 장바구니 항목을 데이터 레이어 푸시로 넣어주는 화면입니다. 보시는 바와 같이 파란색(’event’)는 고정으로 그대로 넣어 주셔야 하고, 클론(:) 다음에 이벤트 명을 커스텀해줍니다.
이후 쉼표(,)를 입력하고 다음 줄에 변수 정보를 key : value (변수명과 변수 정보)를 넣어 주시면 됩니다. (위는 많은 변수 정보를 넣기 위해 배열 처리됨)
소스 코드에서 우리가 원하는 시점에 이벤트를 데이터레이어에 보낼 때, detail이라는 이벤트가 발생하게 됩니다. 이 발생된 이벤트를 트리거로 잡아 GA4 이벤트 태그를 만들 수 있습니다.
그리고 GA4 이벤트 태그 안에 변수 정보를 매개변수로 집어넣어, 이벤트가 수집될 때 같이 수집 될 수 있습니다. 이는 추후 데이터 분석을 할 때 요긴하게 사용됩니다.
2. 푸시(Push)란?
푸시는 자바스크립트에 내장된 함수입니다. 엑셀에서 f(x) 함수가 있듯이 약속된 행동을 합니다. 자바스크립트에서 Push는 하나 이상의 요소를 넣는다는 것입니다.
위 이미지를 보시면, aniamls라는 글자가 1번째 줄에 보이실 겁니다. 이곳에는 pigs, goasts, sheep이라는 객체가 배열로 있습니다. 이때 3번째 줄에서. push라는 것을 붙이고 cows를 넣었더니, animals는 pigs, goasts, sheep 뿐만 아니라, cows도 포함되는 것을 볼 수 있습니다.
이처럼 push는 Object(객체)를 밀어 넣는 것입니다. 데이터 레이어의 Push도 ({ }) 사이의 내용을 Data Layer에 밀어 넣는 것입니다.
3. 이벤트 Object 란?
이벤트 Object는 위 Push 이미지에서 봤듯이, 이벤트를 이루는 객체를 뜻합니다.
4. JSON 이란?
JSON(제이슨? 쓴?이라 읽음)은 JavaScript Object Notation의 줄임말로, Key와 Value의 존재로 이루어진 경량 Data 형식입니다.
JSON은 name-value 형식이며, 값들의 순서화된 리스트 형식입니다. 그래서 JSON만 봐도 대충 데이터 프레임(=엑셀 표)을 그릴 수 있을 것입니다.
간단히 실무를 하면서 헷갈린 내용을 정리하고 글을 마무리하겠습니다.
Q1. 변수 없이 이벤트를 만들 수 있을까요? → 네, 만들 수 있습니다.
Q2. 개발자에게 Data Layer Push를 해달라고 할 때, 이벤트명과 변수명을 저희(마케터)가 정해야 할까요? → 넵, 정해야 합니다. 저희는 이벤트명과 변수명을 GTM에서 사용하기 때문에 반듯이 저희가 정하고 알고 있어야 합니다.
오늘도 읽어주셔서 감사합니다.
'마케팅 > 디지털 마케팅' 카테고리의 다른 글
| 구글 시트와 빅쿼리 연결시 매일 자동으로 업데이트 되는 연결 방법 가이드! (0) | 2024.03.14 |
|---|---|
| 구글 시트 앱 스크립트 차단 문제, 이 앱은 차단되었습니다 해결 방법 5가지 스텝 | Digibition (3) | 2024.03.13 |
| GA4 설치가 끝이 아니다! UTM 필요 이유와 활용법 (2) | 2023.11.13 |
| GA4, GTM을 사용하는데 gtag를 모른다고? (1) | 2023.10.26 |
| 자바스크립트 텍스트 값을 가져오고 싶을 때 (0) | 2022.11.15 |
댓글