돈 버는 IT 지식 연구소
#1인개발자는 개발만 잘해선 안된다
#마케터는 기술을 모르면 안된다
오늘은 태그 매니저에 대한 이야기를 해볼까 합니다.
GA4를 시작하신 분들이라면 한번쯤 들어보셨을 태그매니저와 구글 에즈, 그리고 서치콘솔.
저는 현재 GA4, 구글 에즈, 서치콘솔 그리고 태그매니저 총 네가지 도구를 연동하여 쓰고 있는데요.
이 중에 태그매니저는 거의 대부분의 마케터들이 필수적으로 함께 사용해야하는 도구인 것 같습니다.
태그매니저는 가장 널리 쓰이는 GA4의 연동 도구로, 코딩 없이 웹사이트의 GA4, 구글에즈 스크립트를 수정/추가/삭제할 수 있는 도구입니다.
쉽게 말하면, "이 버튼을 클릭하면 '구매'가 일어난거야" 라는 지시를 태그매니저와 GA4 연동 만으로 코딩 없이 실현할 수 있는 것이죠.
그런데 이렇게 노코드 도구임에도 불구하고 처음 접했을 때는 여전히 낯설고 어려운 용어 투성이인 것 같습니다.
제가 처음 시작할 때도 처음보는 용어와 복잡한 페이지들 때문에 머리가 복잡했던 기억이 나네요.
그래서 이번 포스팅에서는 태그 매니저의 핵심 요소를 알려드리고, 하나하나 구분하는 방법을 알려드리려고 합니다.
우선 태그매니저는 웹사이트나 앱에서 원하는 이벤트를 추적하거나 광고 픽셀을 쉽게 관리할 수 있는 도구입니다.
광고 픽셀이란 광고 플랫폼에서 제공하는 코드 스니펫으로, 웹사이트에 삽입되어 광고 성과를 추적하고 측정하는데 사용됩니다. 광고 픽셀이 심어져 있으면 웹사이트 이용자들의 조각 정보가 분석도구로 전송되죠. 이를 통해 광고 픽셀이 가져온 방문자들의 행동을 분석하고, 광고 캠페인의 효과를 측정할 수 있습니다. 대표적인 광고 픽셀 도구로는 구글 애즈, 페이스북 픽셀 등이 있습니다. 태그 매니저는 이러한 광고 픽셀을 통합적으로, 그리고 체계적으로 관리할 수 있는 도구입니다.
광고픽셀이나 이벤트를 통합적으로, 체계적으로 관리해야하는 이유가 무엇일까요?
그것은 바로 GA4, 구글 에즈, 서치콘솔 등 마케팅 관련 도구가 늘어나면서, 똑같은 "구매" 관련 이벤트를 도구마다 등록해야하는 번거로움 때문입니다.
GA4에서 "구매" 이벤트 등록하고, 구글 에즈에 가서 또 "구매" 이벤트 등록하고, 페이스북 픽셀 가서 또 "구매" 이벤트 등록하고...
이런 번거로운 과정을 태그매니저를 통해 해결할 수 있는 것이죠.
태그매니저에서 "구매"이벤트를 한번만 등록하면, GA4, 구글 에즈, 페이스북 픽셀에서 태그매니저의 태그ID만으로 연동시킬 수 있습니다.
이러한 태그 관리 도구인 태그매니저의 메인 화면에 들어가보면
크게 세 가지 페이지를 볼 수 있는데요, 바로 태그, 트리거, 변수입니다.
이것이 태그매니저의 세 가지 핵심 요소 이기도 합니다.
왜 태그메니저에 구성 요소가 세 개나 있는지,
각각이 어떻게 다른지 하나씩 알아보겠습니다.
태그(Tag)
먼저 태그는 태그매니저에서 관리하는 가장 기본적인 단위이자 구글에즈, 페이스북 픽셀, GA4와 연동할 수 있는 단위이기도 합니다. "태그"는 웹사이트에 추가되는 코드 스니펫을 뜻하며, 광고픽셀과 GA4 이벤트를 포함하는 개념입니다. 태그는 원하는 정보를 수집하거나 광고 픽셀을 전송하는 역할을 합니다.
혹시 왜 하필 "태그"라는 이름인지 궁금하신가요? 그 이유는 웹 언어인 HTML과 관련이 있습니다. HTML 언어의 가장 기본적인 단위가 "태그"이기 때문이지요.
태그의 종류는 이 가이드에서 모든 목록을 확인하실 수 있는데요, 사실상 제일 많이 쓰이는 건 "Google Ads 전환 태그" 또는 "GA4 이벤트 태그", "Facebook Pixel 태그" 정도인 것 같습니다.
태그 종류로 "GA4 이벤트"를 선택하게 되면
바로 아래 "구성 태그", "측정 ID" 란으로 GA4와 연동할 수 있습니다.
"이벤트 이름"은 마음대로 지정하면 됩니다. (이 때 통일성을 위하여 소문자와 언더바로 이루어진 이름으로 지어주면 좋습니다. 예를들면 Bucket List가 아니라 bucket_list)
"이벤트 매개변수", "사용자 속성", "기타 설정 - 전자상거래 데이터 전송", "고급 설정 - 추가 태그 메타데이터" 등등 추가 설정을 할 수도 있는데, 우선 헷갈리기 쉬운 항목만 말씀드리겠습니다.
태그를 설정할 때 "이벤트 매개변수", "사용자 속성", "추가 태그 메타데이터"는 비슷해보이지만 서로 다른 목적과 기능을 가지고 있습니다. 각 항목에 대해 설명해 드리겠습니다.
1. 이벤트 매개변수(Event Parameters)
이벤트 매개변수는 특정 이벤트가 발생했을 때 함께 수집되는 추가 정보입니다. 예를 들어, '장바구니에 추가' 이벤트가 발생했을 때 상품 ID, 가격, 수량 등의 정보를 이벤트 매개변수로 설정할 수 있습니다. 이렇게 수집된 이벤트 매개변수는 분석 도구에서 이벤트의 세부 정보로 함께 전달되고, 분석 도구에서 측정 지표로 활용할 수 있습니다.
2. 사용자 속성(User Properties)
사용자 속성은 특정 사용자에 대한 추가 정보를 저장하는데 사용됩니다. 예를 들어, 사용자의 연령, 성별, 지역, 선호 카테고리 등의 정보를 사용자 속성으로 설정할 수 있습니다. 이 정보 또한 분석도구에서 사용자 정보로 전달됩니다. 이벤트 매개변수와 달리 사용자에 관한 정보이므로 분석 도구에서 따로 관리합니다. GA4는 개인정보 보호 방침 때문에 데이터 비식별화를 자체적으로 수행하기 때문에 이렇게 이벤트와 사용자 정보가 분리해서 관리됩니다.
3. 추가 태그 메타데이터(Extra Tag Metadata)
추가 태그 메타데이터는 태그 자체에 대한 정보를 저장하는데 사용됩니다. 이 정보는 이벤트나 사용자 정보가 아닌, 태그 관리 및 추적을 쉽게하기 위한 목적으로 사용되며, 일반적으로 개발자 또는 분석가가 태그를 구분하거나 추적하기 위한 목적으로 사용됩니다. 예를 들어, 태그의 버전 정보나 작성자, 설명 등을 메타데이터로 설정할 수 있습니다.
트리거(Trigger)
태그를 설정하면서 트리거를 항상 설정해주어야 태그가 실행되는데요.
모든 태그(스크립트)는 실행 조건이 있습니다. 해당 실행 조건을 만족해야 태그가 실행됩니다.
즉 트리거는 태그가 실행되어야 할 시점을 결정하는 "조건문"입니다.
트리거의 예시를 들어보면, "페이지 뷰가 발생할 때", "버튼 클릭이 일어날 때" 등 다양한 상황을 설정할 수 있습니다.
GTM(태그매니저)에서 기본 제공하는 태그의 종류는 여기서 확인할 수 있습니다.
트리거를 만드는 상세한 예시를 들어보겠습니다.
만들 트리거는 "장바구니 버튼 클릭시" 발동될 트리거입니다.
우선 트리거 유형을 "클릭"으로 설정하고,
세부 조건으로 "URL에 'bucket'이 포함 된 경우만" 조건을 걸어 트리거를 만들면,
과연 맞을까요?
이 경우 "https://dataghetti/bucket/365" 등의 URL에 접속하여 아무 버튼이나 클릭해도 장바구니 버튼을 클릭했다는 트리거가 발동됩니다. X버튼, 바로구매 버튼을 눌러도 말이죠.
따라서 "장바구니 담기" 태그를 만들고 싶다면, 위 조건만으로 트리거를 만들면 안되겠죠.
버튼 텍스트에 "장바구니"를 포함하는 조건도 추가하여야합니다.
이런 식으로 트리거를 만들 수 있습니다.
변수(Variable)
저는 사실 변수의 개념이 제일 어려웠습니다.
변수는 태그와 트리거에서 사용되는 동적인 값을 저장하는데 사용됩니다. 예를 들어, 특정 페이지의 URL이나 클릭한 버튼의 텍스트 등을 변수로 저장하고 이를 태그에 전달하여 특정 이벤트를 추적하는 데 사용할 수 있습니다.
예를 들어, 여러 상품이 있는 웹사이트에서 사용자가 '장바구니에 추가' 버튼을 클릭했다고 가정해봅시다. 이때 변수를 사용해 클릭한 상품의 이름이나 상품 ID 등의 정보를 태그에 전달할 수 있습니다. 이렇게 전달된 정보는 구글 애널리틱스와 같은 분석 도구에서 이벤트 데이터로 수집되어, 어떤 상품이 사용자들에게 인기가 있는지, 어떤 상품이 장바구니에 자주 추가되는지 등의 분석을 할 수 있게 됩니다.
한번 장바구니 담기 버튼을 클릭한 상품의 "상품명"을 변수로 저장하여, "장바구니 담기" 태그로 해당 변수를 전달해보겠습니다.
우선 상품명 변수를 생성합니다.
`event.target`은 이벤트가 발생한 HTML 요소를 참조하는 문구입니다.
특정 상품의 장바구니 버튼을 클릭하면 클릭 이벤트가 발생하므로, `event.target`은 해당 상품의 버튼을 참조하게 됩니다. 정확히는 이 버튼의 HTML 태그를 참조하게 되는 것이지요.
그래서 이렇게 참조한 뒤에는 버튼 텍스트, 색깔, 클래스 등 버튼 HTML 태그의 정보를 가져올 수 있습니다.
텍스트를 가져오려면 `event.target.innerText`
태그의 속성을 가져오려면 `event.target.getAttribute("속성명")
으로 가져올 수 있습니다.
참고로 여기서는 장바구니 버튼의 HTML 태그에 `data-product-name`이라는 속성명이 있다는 것을 전제로 합니다.
이제 태그로 가서 변수를 이벤트 매개변수로 설정해줍니다.
아까 이벤트 이름은 영어소문자와 언더바로 지어주는게 좋다고 했죠.
그런데 이벤트 매개변수 이름은 또 띄어쓰기나 언더바 없이 영어대문자로 지으라고 합니다 --;;
참 헷갈리기 쉬운 것 같아요. 그래도 꼼꼼히 지켜주는게 나중에 관리하기 편합니다.
사실 변수명도 영어 대문자와 띄어쓰기로 지어주는게 좋지만, 설명을 위해 임의로 한글로 설정하였습니다.
변수명도 가이드대로 짓는다면, "Clicked Product Name"이라고 지었을 것 같습니다.
참고로 설명을 위해 "구성 태그"란이 비어있는데 저 부분은 꼭 "GA4-구성" 태그를 만들어 채워줘야합니다.
이렇게 해서 태그를 저장하면 이제 GA4에서 클릭한 상품명 데이터를 수집할 수 있게 됩니다.
이렇게 변수를 활용하면 이벤트 추적이나 광고 픽셀 전송 시 사용할 수 있는 정보가 풍부해지고, 웹사이트나 앱에서 발생하는 다양한 상황을 세밀하게 추적하고 분석할 수 있습니다.
오늘은 실제 사진과 함께 자세한 내용을 다뤄봤는데요, 이해가 되셨을지 모르겠네요.
아무쪼록 GA4에 대한 포스팅은 계속해서 이어지니, 많은 관심 부탁드립니다~!
다음 포스팅에서는 GA4에서 목표를 설정하는 방법에 대해 설명해 드릴 예정입니다.
태그 매니저를 활용한 이벤트 추적을 어떻게 GA4에서 목표로 설정할 수 있는지 알아보실 수 있을 거예요.
그럼, 다음 포스팅에서 뵙겠습니다.