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 인터페이스에서 간편하게 태그의
삽입 및 관리가 가능하여 웹마스터 도움없이 태그 작업 가능
비동기 방식으로 태그를 실항하여 대부분의 경우 개별 태그 사용시보다 페이지 로딩이 빨라짐
태그의 작동 여부 및 어떠한 태그가
어디에서 실행되는지 쉽게 파악 가능
1) GTM 시작하기 GTM 계정, 컨테이너 만들기: 태그는 컨테이너 단계에서 생성됨
3 컨테이너 이름 작성
컨테이너 사용 위치 선택 4
‘생성하기’ 버튼 클릭 5
약관 동의하기 6
3
4
6
5
2) Google Analytics 태그 적용 및 관리 a) 기본 태그 적용: 기본적인 조회 기능용 태그 적용
1
2
1 Container 탭 > tag 섹션 에서 ‘New’ 버튼 클릭
2 Tag 종류 중 구글 애널리틱스 선택
2) Google Analytics 태그 적용 및 관리 a) 기본 태그 적용: 기본적인 조회 기능용 태그 적용
3 현재 사용하고 있는 구글 애널리틱스 버전 선택
4 사용하고자 하는 구글 애널리틱스 Tracking ID 입력
5 Google Analytics 리마케팅 이용 시 체크
6 태그 종류를 Page View로 선택
3
4
5
6
2) Google Analytics 태그 적용 및 관리 a) 기본 태그 적용: 기본적인 조회 기능용 태그 적용
7 트리거 (trigger)종류를 ‘모든 페이지’로 선택
8 ‘태그 생성하기’ 버튼 클릭
9 우측 상단의 ‘퍼블리시’ 버튼 클릭 후, ‘미리보기 (preview)’ 버튼 클릭
7
8
9
2) Google Analytics 태그 적용 및 관리 a) 기본 태그 적용: 기본적인 조회 기능용 태그 적용
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) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적: URL을 활용한 이벤트 버튼 클릭 값 추적
2 웹사이트에서 추적하고자 하는 이벤트 버튼 우측 클릭 후 ‘Inspect element‘클릭 * Chrome 브라우저 사용
1
2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적: URL을 활용한 이벤트 버튼 클릭 값 추적
2 하이라이트 된 부분 중 Class 값 확인하기 * 예시 내 class 값 = down
1
2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 – 트리거 (Trigger) 설정하기 URL을 활용한 이벤트 버튼 클릭 값 추적
1 Variable 섹션에서 ‘Click Classes’ 체크
1
2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 – 트리거 (Trigger) 설정하기 URL을 활용한 이벤트 버튼 클릭 값 추적
2 Triggers 섹션 클릭 후, “새로 생성하기” 버튼 클릭
1
2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 – 트리거 (Trigger) 설정하기 URL을 활용한 이벤트 버튼 클릭 값 추적
3
4
5
3 이벤트 종류 중 “Click”선택
4 예시와 같이 설정하기
5 ‘계속’ 버튼 클릭
2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 – 트리거 (Trigger) 설정하기 URL을 활용한 이벤트 버튼 클릭 값 추적
6 Page URL 선택 후, 이벤트 버튼이 있는 웹페이지 URI 기입 *예시 내 전체 URL: http://www.nasmedia.co.kr/ko/company/company_ci.do (빨간 부분이 URI임)
7 ‘계속하기’ 버튼 클릭
6
7
2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 – 트리거 (Trigger) 설정하기 URL을 활용한 이벤트 버튼 클릭 값 추적
8
9
8 Click Classes 선택 후, 클래스 값 삽입 (슬라이드 21 참고)
9 ‘생성하기’ 버튼 클릭
2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 – 이벤트 태그 생성하기 URL을 활용한 이벤트 버튼 클릭 값 추적
1
2 Tags 섹션 클릭 후, 기존에 생성한 GA 페이지뷰 태그 클릭
2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 – 이벤트 태그 생성하기 URL을 활용한 이벤트 버튼 클릭 값 추적
2
2 우측 하단의 ‘복사하기’ 클릭
2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 – 이벤트 태그 생성하기 URL을 활용한 이벤트 버튼 클릭 값 추적
3 해당 영역 클릭 후, 태그 이름 변경
3
2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 – 이벤트 태그 생성하기 URL을 활용한 이벤트 버튼 클릭 값 추적
4
5
6
4 추적 종류를 Pageview -> Event로 변경
5 이벤트 카테고리, 액션값 설정 (임의로 설정 가능)
6 이벤트 레이블 값으로 이전에 만든 User-Defined Variable 선택 (슬라이드 23, 24 참고)
7 하단의 ‘계속하기’ 버튼 클릭
2) Google Analytics 태그 적용 및 관리 b) GA 이벤트 적용_버튼 클릭 추적 – 이벤트 태그 생성하기 URL을 활용한 이벤트 버튼 클릭 값 추적
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 이벤트 태그 세팅
- 기존에 만든 변수 및 트리거 불러오기