1.GTM연동이 우선
내 프로젝트에서 프론트는 리액트로 이루어져있다.
그리고 향후 사용자들에 대한 데이터 분석을 위해 GA4(구글 애널리틱스4) 연동을 했다.
우선 나는 리액트와 GA4를 다이렉트로 연결하지 않고 리액트>GTM(구글 태그 매니저)>GA4 이렇게 구성했다.
중간에 GTM이라는 매개체를 둔 것이다.
만약 GTM을 중간에 두지않고 GA4를 직접 연결한다면 데이터 분석을 위한 프론트 코드의 확정성이 매우 떨어지게 된다.
예를 들어, GA4 뿐만 아니라 다른 데이터 분석 도구를 추가한다면 그때그때마다 각 데이터 분석도구를 위한 전용 코드를 그때그때마다 추가하면서 복잡해지게 되기 때문이다.
그러나 중간에 GTM을 두면 데이터 분석을 위한 이벤트가 발생했을 때 구글 태그 매니저가 받아서 이걸 GA뿐만 아니라 원하는 데이터 분석 도구에서 받아올 수 있기 때문에 우리는 다양한 분석도구를 신경쓰지 않아도 된다.
2.GTM에 데이터를 전달하는 방법
위에서 보듯이 웹사이트에서 이벤트가 발생하면 이 이벤트가 데이터레이어를 타고 GTM에 전달되도 GTM은 이걸 다시 GA4와 같은 분석 툴에 전달해준다.
그렇다면 data Layer는 뭘까? data Layer은 브라우저 메모리에 존재하는 단순한 자바스크립트 배열이다.
window.dataLayer = []예를 들어, 클릭한 사람: 삼록, 클릭한 버튼 : 구매 라는 정보를 dataLayer.push를 하면 dataLayer에 정보를 올려다 놓고.
GTM은 이 dataLayer에 정보가 들어온 걸 바로 감지하기 때문에 이 정보를 바로 받아서 원하는 분석 도구에 보내도록 할 수 있게 한다. 아래는 로그인 성공시 dataLayer에 아래와 같은 정보를 push하도록 세팅했다.
if (window.dataLayer) {
window.dataLayer.push({
event: 'login_success', // GTM에서 감지할 방아쇠(트리거) 이름
user_role: data.jobGroup // 직군 데이터
});
}그렇다고 매번 dataLayer.push코드를 다 심을 필요는 없다.
GTM은 웹사이트에서 일어나는 모든 클릭을 자동으로 감시하는 기본 스캐너 기능이 있기 때문에 HTML속성명에 개발자가 임의로 지정하는 커스텀 데이터 속성을 추가하고 GTM 관리창에서 해당 속성을 인식하도록 세팅해두면 알아서 감지하기 때문이다.
아래는 내가 어떤 버튼에 data-ga-click이라는 임의의 데이터 속성을 추가한 것이다.
data-ga-click={category.categoryName}
3.GTM 세팅 방법(변수?트리거?태그?)
위의 코드를 다시 살펴보면, dataLayer에 push하는 정보는 로그인 성공시 어떤 직군의 유저인지에 대한 정보이다.
data-ga-click 이라고 하는 속성은 내가 어떤 버튼에 걸어둔 속성인데. 어떤 유저가 어떤 카테고리 버튼을 클릭하는지에 대한 정보다.
나의 서비스에는 다양한 업종 카테고리가 있는데, 각 직군별로 자주 조회하고 알고 싶어하는 업종 카테고리가 무엇일까를 알고 싶어수집하는 데이터이다.
GTM의 일반적인 세팅 방법은 1.변수 세팅-> 2. 트리거 세팅 -> 3.태그 세팅이다.
이 3가지를 세팅한다는 것은 코드를 심어둔 프론트에서 GTM이 어떻게 데이터를 받아 GA에 전달하는지를 세팅한다는 의미와 동일하다.
1.변수
GTM에서 변수를 세팅하는 것은 GTM이 프론트엔드의 특정 위치에서 데이터를 정확하게 수집할 수 있도록 타겟을 짚어주는 과정이라고 생각하면 된다.
우리는 앞서 로그인 성공시 유저의 직군 데이터를 수집하고자 하고,
어떤 업종 카테고리 클릭 시 어떤 카테고리인지 카테고리 이름을 수집하고자 하는 것이 목적이다.
즉 GTM은 유저의 직군 데이터와 카테고리 이름을 수집해야한다. 이 두가지가 바로 여기서 말하는 변수가 된다.
1-1. 직군 데이터 변수 설정
가장 먼저 변수를 만드는 창에서 사이드 시트에서 데이터 영역 변수를 클릭하면 아래 화면으로 전환된다.
여기서 데이터 영역 변수 이름에는 우리가 dataLayer.push를 했을 때 전달한 키값 그대로 입력해야한다.
데이터 영역 변수 유형의 변수 구성은 dataLayer에서 너가 보낸 키값에 맞는 값을 그대로 가지고 와라고 타겟을 지정하는 것이다.
*이 변수 설정의 제목인 이름 없는 변수는 최종적으로 유저 직군이라고 입력하고 저장하였다.
1-2.카테고리 이름 변수 설정
카테고리 이름에 대한 정보는 카테고리를 클릭했을 때 category.name을 수집해와야한다.
이때의 변수 유형은 자동 이벤트 변수를 선택한다.
그리고 아래 화면에서 요소 속성을 선택한다음 속성 이름에 우리가 임의로 이름을 지은 속성명인 data-ga-click을 입력한 뒤 저장한다.
이로써, 우리는 프론트엔드로부터 로그인했을 때 유저가 어떤 직군인지, 그리고 카테고리를 클릭했을 때 어떤 업종카테고리인지 GTM이 수집할 수 있도록 세팅을 완료했다.
*이 변수 설정의 제목인 이름 없는 변수는 최종적으로 씬커넥트 업종 버튼이라고 입력하고 저장하였다.
2.트리거
트리거 세팅은 태그가 작동되도록 하는 조건을 감지하도록 세팅하는 것이다. 그럼 여기서 다시 의문이 될 것이다.
태그가 뭐지?
태그는 GTM이 수집해온 변수를 모아 최종 목적지(데이터 분석 툴. 여기서는 GA4)의 규격에 맞게 세팅하는 것이다.
즉, GTM은 변수세팅을 통해 수집한 데이터를 태그 세팅을 통해 데이터 분석할 수 있게 수집해 온 데이터를 패키징하고 트리거 세팅을 통해 언제 발송하는지 세팅하는 것이다.
다시 한번 더 정리하자면 변수는 무엇을? 트리거는 언제? 태그는 어디로 어떻게?에 해당된다고 보면 된다.
그러면 트리거 세팅방법을 확인해보자.
먼저 트리거 유형에 모든 요소 클릭을 선택한다음
아래화면에서 일부클릭>{{Click Element}}에 우리가 설정했던 커스텀 속성인 [data-ga-click]을 입력한다.
이 말은 앞서 클릭이 발생하자마자 GTM은 변수세팅을 통해 클릭된 업종 카테고리 이름값을 수집했었는데 이 클릭이 data-ga-click이라는 속성명을 클릭했나? 를 확인한다는 것이다. 만약 참이라면 트리거가 발동되어 연결된 태그를 GA에 발송한다.
3.태그
아래 태그 세팅 부분에 구글 애널리틱스를 클릭한다음 구글 애널리틱스:GA4 이벤트를 클릭한다.
여기서 이벤트 이름은 GA4 대시보드에 들어갔을 때 나타나는 이름이다.
측정 ID는 어떤 GA4의 id를 말한다. GA4 계정을 만들면 G로 시작 되는 식별번호가 주어지는데 그걸 입력하면된다.
그리고 이벤트 매개변수에는 해당 이벤트에 들어가는 정보다.
우리는 어떤 직군의 유저가 어떤 업종 카테고리명을 선택했는지에 대한 정보를 수집하기 위함이었으니
여기서는 user_role,과 category_name이란 key값에 아까 각각 세팅해둔 변수설정을 값으로 선택한다.
그런 다음 트리거 연결을 클릭하여 아까 만들어둔 트리거를 선택하면 된다.
이로써, 어떤 유저가 어떤 업종 카테고리 버튼을 선택했는지 GTM이 인식하고 그 순간 GA4로 데이터를 보내는 방법 세팅을 완료한 것이다.