마티니 Martinee

가이드
인사이트
Full FunnelPerformanceGrowthCRM
이벤트사전 등록Creatives마티니 만나보기
GROWTH

혼자서 GA4 연동하고 루커스튜디오 대시보드 만들기-2

GTM 태그 설치

이혜린
|
January 13, 2024

GTM은 Google Tag Manager의 약자로 구글이 쉽게 웹 사이트에 구글의 태그(코드)를 설치할 수 있도록 도와주는 솔루션이다.

‍

여기서 잠깐... 그럼 태그(Tag)는 무엇일까?

태그는 뭐고 픽셀은 뭔가요? 다른 걸까요?

‍

디지털 마케팅을 접해본 사람이라면 픽셀, 태그라는 용어를 정말 많이 들었겠지만 저렇게 질문을 했을 때 명확하게 답하는 사람은 많지 않다.

정답은 태그(Tag)와 픽셀(Pixel) 모두 같은 말이다(!).

‍GA4과 같은 제삼자에게(메타일 수도, 구글애즈일 수도, 앰플리튜드일 수도 있다.) 정보를 전송하는 자바스크립트(전송 컴퓨터 언어 종류) 코드 조각을 '태그'라고 부른다.

메타, 카카오에서는 '픽셀'이라 말하고 구글에서는 '태그'라고 지칭한다.

‍

GTM 구조
GTM 구조

‍

‍

태그 스니펫(=코드 조각)은 이렇게 생겼다.

태그 스니펫(코드조각) 구조

‍

위 코드 스니펫은 유저가 로그인 성공했을 때 gtag(구글태그)라고 하는 해당 코드를 발동시켜 user_id를 포함한 login 이벤트를 구글 매체에게 전송하는 역할을 가지고 있다.

즉, 유저가 내가 추적하고자 하는 행동(이벤트)을 했을 때 코드가 작동하면서 유저 행동 정보를 매체에게 전송하고 매체들은 본인들의 집계 기준을 통해서 필터링하여 대시보드에 적재하게 된다.

만약 대시보드 내에 확인되는 수치들이 이상하다면 태그가 정상 발동되는지 가장 먼저 의심해보아야 한다.

‍

자 그렇다면 GA4를 설치하기 위해서는, 당신의 사이트에 1) GTM의 코드와 2) GTM 안에 GA4코드를 설치해야 한다. 그래야 GTM이 작동하면서 GTM 내부에 있는 GA4 코드를 실행시켜 유저 액션 데이터를 GA4 대시보드에 보여주니까!

‍

1. GTM 설치하기

우선 GTM 사이트(링크)에 들어가서 GTM의 계정과 컨테이너를 생성한다.

GTM 사이트 계정 만들기 화면

‍

1개의 계정 안에는 복수 개의 컨테이너를 추가 생성할 수 있다.

GTM 사이트 컨테이너 추가 화면

‍

컨테이너를 생성하면 GTM id가 부여되고 GTM id를 클릭하면 GTM 코드를 확인할 수 있다. <head> 영역의 코드를 복사한다.

GTM 고유 ID 확인

‍

<head> 코드에 부여된 GTM id가 내가 생성한 id와 동일한지 확인을 하고 맞다면 웹 페이지의 HTML <head> 영역의 가장 최상단 영역에 코드를 넣는다.
(가능하면 최! 상단에 넣도록 한다. GTM 코드가 가장 우선적으로 실행되어야 하기 때문에..)

만약 내부 개발자가 자체적으로 구축한 사이트라면 개발자에게 부탁하여 디자인 소스 <head> 영역에 넣어달라고 요청해야 하고 카페24, 아임웹, 고도몰과 같은 호스팅사를 이용해 구축했다면 관리자에 들어가서 쉽게 코드를 추가할 수 있다.

‍

📝 호스팅사 별 GTM 삽입하는 방법

(1) 카페24: 쇼핑몰 설정 > 기본설정 > 검색 엔진 최적화 > 고급 설정 > 코드 직접입력

(2) 고도몰: 기본 설정 > 기본 정책 > 외부스크립트 관리

(3) 아임웹 (링크)

(4) 식스샵 (링크)

카페24 내 GTM 코드 삽입 과정
카페24는 PC 쇼핑몰, 모바일 쇼핑몰 head 영역 두 곳에 GTM 코드를 붙여 넣기 해야 한다.

‍

단, GTM은 내 사이트 영역에만 삽입되어 작동하는 코드이므로 내 사이트 내에 열리는 다른 소유의 사이트에 대해서는 추적이 불가능하다.

가장 대표적인 예로는 Npay 버튼을 클릭했을 때 넘어가는 Npay 결제 화면으로, 해당 페이지는 네이버 페이 권한이기 때문에 GTM으로는 정확하게 결제 완료까지 추적이 불가능하다.

대신 Npay 버튼 클릭 값으로 수치를 추측할 수 있다.

예외적으로 카페24처럼 매체와 네이버 간 API로 직접 연동이 되어 있는 호스팅사라면 매체 대시보드에서 API로 받아오는 구매 건수와 결제금액을 확인할 수 있다.
(카페24 <> 메타의 경우)

‍

2. GA4 코드를 GTM에 삽입한다.

커머스 사이트라면 기본적을 아래 이벤트를 가장 많이 활용할 것이다.

pageview (페이지뷰)

전자상거래 이벤트의 경우 GA4 매뉴얼 문서에 이벤트 명을 명시해 두었으므로 문서를 참고해서 내 사이트에 필요한 이벤트를 선별 하면된다. (링크)

GTM으로 삽입하는 방식은 크게 (1)페이지 URL과 (2)버튼 클릭 조건으로 삽입할 수 있다.

‍

(1) 페이지 URL 조건으로 삽입하기

페이지 URL 조건 삽입 과정

‍

마티니 아이오 페이지를 예시로 들어보자.

마티니 아이오 홈페이지에 들어가면 상단 바에 'Our Workflow', 'Success Stories', 'Meet Martinee' 탭이 보인다.

만약 방문 유저가 'Meet Martinee' 페이지에 랜딩 했을 때 view_item(상세페이지 조회) 이벤트를 추적하고 싶다면 가장 쉬운 방법으로는 페이지 URL이 변경될 때를 조건으로 설정하는 것이다.

  • Meet Martinee 랜딩 페이지 URL: https://martinee.io/meet-martinee

‍

GTM에서 '트리거'는 발생 조건을 의미한다.

우리는 특정 페이지 주소를 조건으로 잡아야 하기 때문에 GTM > 트리거에서 새로 만들기를 클릭한다. 트리거 유형은 'DOM 사용 가능'으로, 특정 페이지 URL이 랜딩 됐을 때만 이벤트가 발동해야 하므로 '일부 DOM 사용 가능 이벤트'로 설정한 후 page path 조건을 걸어둔다.

GTM 트리거 구성 화면

‍

(2) 버튼 클릭 조건으로 삽입하기

버튼 클릭 조건 삽입 과정

‍

만약 유저가 'Meet Martinee' 페이지에 랜딩 했을 때가 아닌, 'Meet Martinee' 버튼을 클릭했을 때 view_item(상세페이지 조회) 이벤트를 발동하고 싶다면 트리거를 클릭요소로 바꾸면 된다.

우선은 웹 사이트 상에서 개발자 도구를 연다. 그 후 내가 추적하고 싶은 아이콘(버튼)에 마우스 커서를 갖다 대면 해당 버튼의 html 코드가 같이 표시된다.

‍

개발자 도구에서 보면 해당 버튼의 클래스 이름은 "font-poppins-bold text-base text-white"이고 버튼 텍스트는 "Meet Martinee"임을 알 수 있다. 그럼 우리는 Click Classes와 Click Text를 가지고 GTM에서 트리거 조건을 걸 수 있다.

GTM 태그관리자 트리거 구성 화면

‍

자, 이제 이벤트 발동 조건을 모두 설정하였으니 이벤트만 설정하면 된다. 이벤트는 GTM의 태그에서 생성할 수 있다. 트리거와 마찬가지로 태그에서 '새로 생성하기'를 클릭하고 이벤트 명을 설정해 준다. 이벤트 명은 내가 대시보드에서 확인할 수 있는 이벤트명과 매체를 명시하는 것이 추후 수정/관리가 용이하다.

‍

GTM 태그관리자 태그 구성

‍

GTM은 구글 마케팅 플랫폼으로 GA4와 연동이 되어 있어 어려운 코드가 필요하지 않다.

이벤트 이름과 내가 설정한 meet_martinee_landing_page 트리거를 설정한 후 '저장'을 클릭하면 Meet Martinee 페이지에 랜딩 할 때마다 GA4의 view_item 이벤트가 발동하게 되는 것이다.

트래킹이 필요한 이벤트의 태그 삽입을 완료하면 GTM 컨테이너 상단의 '미리 보기'를 통해 이벤트가 잘 발동되고 있는지 체크를 해보고, 문제가 없다면 '배포'를 클릭하여 실제 사이트에 코드를 배포하면 된다.

‍

원본 포스팅 링크

혼자서 GA4 연동하고 루커스튜디오 대시보드 만들기-2

이혜린
Growth Manager
InstagramFacebookLinkedIn
실제로 성장하는 비즈니스를 위한 핵심 지표를 발굴하기 위해 고민합니다.

Related

recomm_thumbnail
EVENT

2024 마티니 데이터 캠프 RFM 기반 고객 세그멘테이션과 멤버십 전략

June 19, 2024

recomm_thumbnail
EVENT

브레이즈 자동화 & 데이터 분석 활용 마스터 클래스 모집중!

November 11, 2024

recomm_thumbnail
CRM

마케팅 수신 동의율 높이려면?… "개인화가 정답"

May 7, 2024

NewsCareers개인정보처리방침

©Martinee.io All Rights Reserved.