1. GTM 계정 접속 

(*잊지말기* 변수 > 트리거 > 태그 순으로 작업)

 

🙆‍♀️변수부터 설정🙆‍♀️

2. 왼쪽 목록에서 변수 클릭

(기본 이벤트들은 gtm에서 제공) 

 

3. 기본제공변수에 구성 클릭

 

4. 스크롤 부분 체크

- Scroll Depth Threshold (20,50,70 등) 

- Scroll Depth Units  (%, pixel)

- Scroll Direction (가로,세로)

 

🙆‍♀️변수 설정 완료

 

🙆‍♂️트리거 설정

1. 왼쪽 목록에서 트리거 클릭

2. 새로 만들기 클릭 

3. 사용자 참여 -> 스크롤 깊이 선택

4. 이름 (액션-페이지) 설정, 세로 스크롤 깊이, 트리거 실행 조건, 모든페이지(상세페이지 있는 경우엔 다르게 적용)

🙆‍♂️트리거 설정 완료

 

🙆태그 설정

1. 좌측 메뉴에서 태그 클릭

2. 새로만들기

3. 이름 : UA-Event-스크롤-모든페이지
카테고리, 작업, 라벨 설정(우측 레고 모양 누르면 리스트 나옴)

어떤 페이지에서 어느정도 스크롤이 내려갔는지 알 수 있음

GTM 태그 비상호작용 조회 = 거짓 ? 

거짓 > 이탈율에 계산됨

참 > 이탈율에 영향을 주지 않음

 

4. 트리거 -  "스크롤-모든페이지" 클릭 후 저장

 

 

다음 피드에서 내가 설정한 GTM 확인하는 방법을 말씀 드리겠습니다.

1. GTM에서 확인하는 법
2. GA에서 확인하는 법

GTM(Google Tag Manager) 계정 만드는 법! 

 

1. 구글 로그인

2. 크롬 접속 후 구글태그매니저 검색 후 접속(네이버X)

https://www.google.com/search?q=%EA%B5%AC%EA%B8%80%ED%83%9C%EA%B7%B8%EB%A7%A4%EB%8B%88%EC%A0%80&oq=%EA%B5%AC%EA%B8%80%ED%83%9C%EA%B7%B8%EB%A7%A4%EB%8B%88%EC%A0%80&aqs=chrome..69i57j0i512l9.1659j0j7&sourceid=chrome&ie=UTF-8

3. 계정 만들기 클릭

4. 아래 순서대로 정보 작성

1) 회사이름 / 국가:대한민국 / 컨테이너이름 : GTM실습 / 웹 > 만들기

2) > 이용약관 GDPR 동의 후 '예' 클릭

3) > GTM 태그 관리자 설치 코드 확인 > 창 끄기
( GTM 설치 코드 확인 방법 > 태그관리자 접속 후 우측 상단에 파란색으로 적혀있는 GTM-5ZRW***(컨테이너 ID) 눌러주면 다시 확인 가능합니다)

계정 생성 끝!

GTM 주요 개념

태그 : 특정 정보가 담긴 스크립트 코드 조각

트리거 : 방아쇠&시그널, 태그가 실행되는 시점/조건을 보내는 신호

변수 : 동일 포맷, 동일 규칙 하에 변하는 정보 값(숫자, 텍스트 전부 포함)

ex. 클릭하는 {버튼 명}, 방문하는{페이지 명}, 구매한{상품의 가격}

태그에 매칭되는 트리거, 변수 -> 하나의 태그에 여러개의 트리거, 변수가 매칭될 수 있음

컨테이너 : 동일한 GTM 스크립트로 연결되는 태그, 트리거, 변수 그룹 -> 보통 웹사이트별로 생성

계정 : 최상위 레벨 > 회사가 가진 각 컨테이너들 그룹

 

**

계정>컨테이너>태그>변수,트리거

페이지 조회 page_view

- 수집되는 중요 매개변수

1. page_location(페이지 URL)

2. page_referrer(이전 페이지 URL)

스크롤 이벤트 실행 scroll

이탈 클릭 click

다른 사이트 링크를 눌렀을 때 실행됨(외부 링크로 가는 것(아웃바운드 링크))

- 수집되는 중요 매개변수

1. link_url(클릭한 링크의 URL)

파일 다운로드 file_download

파일 다운로드 링크를 클릭할 때 실행(pdf,jpg등)

- 수집되는 중요 매개변수

1. file_name(파일명)

2. link_url(클릭한 링크의URL)

동영상에 호응 video_start / video_progress / video_complete

페이지에 삽입된 유트브 동영상 재생 video_start

10,25,50,75% 진행도를 넘을 때 video_progress

100% 진행도에 도달할 때 video_complete

- 수집되는 중요 매개변수

1. video_title(영상 제목)

2. video_percent(진행도,%)

사이트 검색 view_search_result

검색어 매개변수(q,s, search,query, keyword 등)를 포함한 검색 결과 페이지가 로드될 때 실행

- 수집되는 중요 매개변수

1. search_term(검색어)

 

GTM으로 GA설치 및 이벤트 추적

 

*측정ID 찾는법

구글 애널리틱스 > 관리자(톱니바퀴) > 속성 > 데이터 스트림 > 해당 사이트 클릭 > 우측에 측정 ID확인

 

**GTM GA4설치 방법

GTM 접속 후 계정 생성  > 태그 > 새로만들기> 이름 변경
> 태그 구성 : Google 애널리틱스 : GA4구성 클릭
> 트리거 : All Pages > 저장> 'Tag Assistant Companion' 설치(Chrome 확장 프로그램)>미리보기>개발자도구(F12)에서 옴니버그 체크>제출
*트리거 : 내 홈페이지에서 GA4 태그가 언제 발동(실행)되게 할 것인지!
ex. 웹사이트 모든 곳에서 GA4가 실행되게끔 하는 것

*Tag Assistant Companion 다운로드 링크(Chrome 확장 프로그램)
: https://chrome.google.com/webstore/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm/related?hl=ko

 

Tag Assistant Companion

The Tag Assistant Companion extension works with Tag Assistant to help troubleshoot installation of gtag.js and Google Tag Manager.

chrome.google.com

미리보기 클릭시 나타나는 화면
page view를 보았을 때 구글 애널리틱스가 잘 설치되었음을 알 수 있음

옴니버그는 구글 플랫폼 관련된 GTM, GA 실행되는 것들을 다 잡아줄 수 있음

 

*변수 : 무언가를 담고 있는 그릇

변수 > 트리거 > 태그 순서

Click ID 변수 구성 시, 누군가 버튼을 눌렀을 때 그 버튼의 ID가 저 변수에 모이는 것

*트리거 : 언제 실행하는지

클릭 아이디는 (Click ID) 홈페이지 가서 F12(검사) 누른 후 버튼 아이디 찾으면 됨. (따옴표 등 특수기호 포함XXX)

1. GA4 설치, GA4이벤트 만들기

 

🔽(이벤트 입력 코드)🔽

gtag('event', '이벤트', {

'매개변수' : ' 매개변수 값'

}

🔽상황에 맞춰서 입력(</body> 전에 입력)🔽

  <script>
      document.querySelector('#download-button').addEventListener('click', function(){
          gtag('event', 'click_button', {
            'name':'원두 카탈로그 다운로드'
          });
        });
      </script>

 

HTML 삽입 모습

2. Ga4 매개변수 확인하는 방법

2-1. 사이트에서 확인하는 방법
사이트 F12 클릭 후(또는 마우스 우클릭 - '검사'클릭) > Omnibug > 만들어놓은 이벤트 클릭 후 매개변수 체크

 

 

2-2. GA4에서 확인하기

구성 > Debug View에서 확인> 홈페이지에 심어놓은 이벤트 매개변수 확인 가능

 

*필수선작업* Chrome 확장 프로그램에서 'Google Analytics Debugger' 다운로드 후 on 해주기

다운로드링크 :
https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=ko

 

Google Analytics Debugger

Prints useful information to the JavaScript console by enabling the debug version of the Google Analytics Javascript.

chrome.google.com

🔽디버거 (확장 프로그램) 킨 모습🔽

클릭하면 켜집니다

 

이벤트 기획 : 이벤트에 사용되는 속성

사용자 속성 : 사용자에 기록되는 속성

 

멤버십 등급은 자주 사용됨 

 

사용자 속성은 사용자의 특성을 기록 

: 기록 방식은 이벤트 속성과 동일

: 사용자 세그먼트를 생성할 때 효과적

 

사용자 속성 사용법

" 구매 건수가 100개 이상인 사람만 뽑아줘"

" 총 구매 금액이 5,000만원 이상인 사람만 뽑아줘"

1. 명확한 사용자의 액션을 기반으로 만든다

- 사용자가 어떤 행동을 할지 생각해보기

 

2. 이름 규칙을 정한다

- 누구나 알아보기 쉬운 이름 정하기

구분 이벤트명 예시
동사 + 명사 view_product
명사 + 동사 product_view
카테고리+명사+동사 Ecommerce-Product-View

 

3. 중요한 이벤트를 먼저 생각한다

- 우리 서비스에서 중요한 이벤트(전환)을 먼저 생각하고 그 이벤트에 도달하는 과정을 생각해보기 (퍼널 구성)

전환점을 생각하고 거꾸로 생각해보기

ex. 

약관동의▶️회원정보 입력▶️회원가입 완료

상품 보기▶️장바구니 담기▶️주문서 작성▶️주문완료

 

4. 세부 정보는 매개변수를 활용한다

-이벤트에 어떤 매개변수가 필요할지 생각해보기

이벤트에 대한 질문거리를 생각해보기

ex.

"주문 완료" 

결제한 금액은 얼마일까?

어떤 옵션으로 몇개 구매한걸까?

쿠폰 사용했을까?

적립금은 사용했을까? 

등등 

5. 이벤트 리스트를 문서로 정리한다.

- 누구나 내용을 확인할 수 있도록 문서화하기

 

+ Recent posts