google tag managergademo.nasmedia.co.kr/downloads/google tag manager... · google tag manager ......

Google Tag Manager

교육용

NO.1 DIGITAL MEDIA REP.

2015.09.08

INDEX

01. 태그 매니저 개요 02. GTM 실제 사용 메뉴얼

01. 태그 매니저 개요

01. 태그 매니저 개요 1) 개념

구글 태그매니저에서 제공되는 사용자 인터페이스를 통해

애드워즈, GA, DFA 태그 및 외부 태그들을 추가 및 업데이트 할 수 있는 태그 관리 솔루션

Google Analytics Tag

DFA Floodlight Tag

Other Tags

Adwords Remarketing Tag

Google Tagmanager Tag

GTM 을 통해 다양한 태그들의 통합 관리 가능

01. 태그 매니저 개요 2) 작동 방법 및 원리

개별 태그들 대신 웹페이지에 GTM의 단일태그 삽입,

다양한 개별 태그들은 GTM을 통해 별도 등록 및 통합 관리

GTM 에서 제공되는 단일 태그인 컨테이너 스니펫을 웹사이트에 설치

GTM 내에서 개별 태그들의 추가, 업데이트, 삭제 등 관리 작업

전송 및 적용

[원리]

• Google 태그 관리자의 컨테이너 스니펫은 태그 관리자 인터페이스에서 지정한 규칙에 따라 다른 모든 태그를 실행하는 사이트 전체 태그임

• 사이트에서 실행되는 태그와 이 태그를 실행시키는 규칙을 추적함

• 컨테이너 스니펫이 있는 페이지가 로드될 때마다 태그 관리자는 gtm.js 자바스크립트를 요청.

• 최신 태그 설정이 태그와 태그 실행 규칙이 있는 방문자의 브라우저로 전송.

• 방문자가 Google 태그 관리자 컨테이너 스니펫이 있는 페이지에서 탐색 및 상호작용할 때 여기에 설정된 규칙을 검토하고 해당될 경우 태그가 실행됨

01. 태그 매니저 개요 3) 구글 태그 매니저의 장점

구글 태그 매니저 사용 시,

간편한 관리/ 빠른 페이지 로딩 속도/ 태그 작동에 대한 파악에 용이함

Simple manage-

ment

Quick loading

Easy Checking

Html 수정없이 GTM 인터페이스에서 간편하게 태그의

삽입 및 관리가 가능하여 웹마스터 도움없이 태그 작업 가능

비동기 방식으로 태그를 실항하여 대부분의 경우 개별 태그 사용시보다 페이지 로딩이 빨라짐

태그의 작동 여부 및 어떠한 태그가

어디에서 실행되는지 쉽게 파악 가능

02. GTM 실제 사용 메뉴얼

1) GTM 시작하기 GTM 계정, 컨테이너 만들기: 태그는 컨테이너 단계에서 생성됨

1

1 ‘새 계정 만들기’ 클릭

계정 이름 작성 2

2


3 컨테이너 이름 작성

컨테이너 사용 위치 선택 4

3

4


3 컨테이너 이름 작성

컨테이너 사용 위치 선택 4

‘생성하기’ 버튼 클릭 5

약관 동의하기 6

3

4

6

5


6 컨테이너 태그 생성 완료 : <Body> 바로 뒤에 삽입할 것을 권유

2) Google Analytics 태그 적용 및 관리 a) 기본 태그 적용: 기본적인 조회 기능용 태그 적용

1

2

1 Container 탭 > tag 섹션 에서 ‘New’ 버튼 클릭

2 Tag 종류 중 구글 애널리틱스 선택


3 현재 사용하고 있는 구글 애널리틱스 버전 선택

4 사용하고자 하는 구글 애널리틱스 Tracking ID 입력

5 Google Analytics 리마케팅 이용 시 체크

6 태그 종류를 Page View로 선택

3

4

5

6


7 트리거 (trigger)종류를 ‘모든 페이지’로 선택

8 ‘태그 생성하기’ 버튼 클릭

9 우측 상단의 ‘퍼블리시’ 버튼 클릭 후, ‘미리보기 (preview)’ 버튼 클릭

7

8

9


웹사이트에 접속 후, 하단의 창에서 태그 작동 여부 확인

10

10


11 11

12

태그 작동 확인 후, 우측 상단의 ‘퍼블리시’ 버튼 클릭

12 팝업창에서 ‘퍼블리시 하기’ 버튼 클릭 -> 해당 버튼을 클릭하면 GTM 컨테이너 즉시 반영됨

2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적: URL을 활용한 이벤트 버튼 클릭 값 추적

1 Container 탭 >variable 섹션 하단의 ‘New’ 버튼 클릭

1

2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 - 변수 (Variable) 설정하기 URL을 활용한 이벤트 버튼 클릭 값 추적

2 해당 영역 클릭 후, 변수 값 이름 변경

3 변수 종류를 ‘URL’로 선택 •버튼 클릭 후, 도착하는 URL을 활용하여 이벤트 버튼 클릭 추적

2

3

2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 - 변수 (Variable) 설정하기 URL을 활용한 이벤트 버튼 클릭 값 추적

4 변수 값의 요소 선택

5 디폴트 페이지 URL 기입

4

5


2 웹사이트에서 추적하고자 하는 이벤트 버튼 우측 클릭 후 ‘Inspect element‘클릭 * Chrome 브라우저 사용

1


2 하이라이트 된 부분 중 Class 값 확인하기 * 예시 내 class 값 = down

1

2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 – 트리거 (Trigger) 설정하기 URL을 활용한 이벤트 버튼 클릭 값 추적

1 Variable 섹션에서 ‘Click Classes’ 체크

1


2 Triggers 섹션 클릭 후, “새로 생성하기” 버튼 클릭

1


3

4

5

3 이벤트 종류 중 “Click”선택

4 예시와 같이 설정하기

5 ‘계속’ 버튼 클릭


6 Page URL 선택 후, 이벤트 버튼이 있는 웹페이지 URI 기입 *예시 내 전체 URL: http://www.nasmedia.co.kr/ko/company/company_ci.do (빨간 부분이 URI임)

7 ‘계속하기’ 버튼 클릭

6

7


8

9

8 Click Classes 선택 후, 클래스 값 삽입 (슬라이드 21 참고)

9 ‘생성하기’ 버튼 클릭

2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 – 이벤트 태그 생성하기 URL을 활용한 이벤트 버튼 클릭 값 추적

1

2 Tags 섹션 클릭 후, 기존에 생성한 GA 페이지뷰 태그 클릭


2

2 우측 하단의 ‘복사하기’ 클릭


3 해당 영역 클릭 후, 태그 이름 변경

3


4

5

6

4 추적 종류를 Pageview -> Event로 변경

5 이벤트 카테고리, 액션값 설정 (임의로 설정 가능)

6 이벤트 레이블 값으로 이전에 만든 User-Defined Variable 선택 (슬라이드 23, 24 참고)

7 하단의 ‘계속하기’ 버튼 클릭


7

8

7 기존에 있던 ‘All Pages’ 버튼 삭제 후, ‘More’ 버튼 클릭

8 이벤트에 적용할 트리거 선택 후 저장 (슬라이드 30~34 참고)

9 하단의 ‘태그 생성하기’ 버튼 클릭

‘미리보기’를 통해 태그 유효성 검증 후 ‘퍼블리시’ 버튼 클릭 (슬라이드 22~26참고)

10

2) Google Analytics 태그 적용 및 관리

b) GA 이벤트 (버튼 Click) 적용 과정 Summary

1. User-Defined URL 변수 생성

- 변수 요소는 ‘path’로 설정

2. 이벤트 트리거 설정

- 클릭 버튼의 click class 값 입력

3. GA 이벤트 태그 세팅

- 기존에 만든 변수 및 트리거 불러오기

THANK YOU

google tag managergademo.nasmedia.co.kr/downloads/google tag manager... · google tag manager ......

Documents