구글 태그 매니저

[구글 태그 매니저 사용법3] 태그 데이터를 애널리틱스에 데이터 전송하기

태인킴 2021. 7. 20. 21:44
반응형

태그 데이터 전송하기 썸네일
태그 데이터 전송하기 썸네일


구글 태그 매니저는 태그라는 데이터를 내가 원하는 플랫폼이나 분석 사이트에 전송할수 있는 기능을 제공 합니다. 태그 매니저를 이용해서, 태그와 변수를 생성해서 페이지뷰를 구글 애널리틱스로 전송하는 설정을 해보겠습니다. 잘보고 따라해 주세요.

 

 

1. [New Tag] 클릭

구글 태그 매니저 홈페이지 화면
구글 태그 매니저 홈페이지 화면

[New Tag] 라는 버튼을 클릭하여, 태그를 먼저 만들어 줍니다.

 

 

2. Tag Configuration 클릭

Tag Configuration 클릭 화면
Tag Configuration 클릭 화면

[Tag Configuration] 클릭하여 태그 설정을 해줄것 입니다.

 

 

3. 태그 타입을 선택해 줍니다.

태그 타입 선택 화면
태그 타입 선택 화면

구글 태그 매니저에 장점은 어떤 플랫폼이든 다양한 곳으로 태그 데이터를 전송 할수 있는 장점이 있다고 하였습니다. 이곳에서 어떤 플랫폼으로 데이터를 전송할지 선택 하는 것입니다. 예를들어 구글 애널리틱스나 구글 애즈와 같은 타입입니다. 일단 구글 애널리틱스로 태그 데이터를 전송해 보겠습니다. 구글 애널리틱스를 선택해 주세요.

 

 

4. 구글 애널리틱스의 속성 이름 파악

구글 애널리틱스의 속성 이름 확인 화면
구글 애널리틱스의 속성 이름 확인 화면

구글 애널리틱스로 태그 데이터를 보내기 위해서 애널리틱스의 속성 이름을 알아야 합니다. 애널리틱스로 가서 [설정] -> [속성 설정] -> [속성 이름] 에서 속성 이름을 확인해 주세요.

 

 

5. 추적 ID 입력

구글 태그 매니저에서 추적ID 입력 화면
구글 태그 매니저에서 추적ID 입력 화면

위에서 확인한 구글 애널리틱스의 속성 ID를 태그 매니저에서 추적 ID를 입력해 주세요. 그리고 상위 부분에 변수에 이름을 적어주세요. 변수 이름은 최대한 이해하기 쉬운 키워드로 적어주세요. 그리고 [저장] 버튼을 클릭해 주세요.

 

 

6. 트리거 설정

트리거 클릭 화면
트리거 클릭 화면

이번에는 언제 태그 데이터를 전송 할지를 정해야 합니다. 이것을 설정하는 것이 트리거 입니다. [Triggering] 부분을 클릭해 주세요.

 

 

7. 트리거 시점 선택

트리거 시점 선택 화면
트리거 시점 선택 화면

페이지뷰도 페이지에 진입한 시점에 따라서 4개의 종류로 나뉩니다. 4가지에 대해서는 다음에 포스팅 하겠습니다. 일단, 가장 흔하게 쓰이는 [All Pages] 를 선택 합니다.

 

 

8. Save 버튼 클릭

Save 버튼 클릭 화면
Save 버튼 클릭 화면

트리거 까지 설정 했다면 [Save] 버튼을 눌러 해당 태그를 저장 시켜줍니다. 

 

 

9. Omnibug 확장 프로그램 설치

omnibug 확장 프로그램 설치 화면
omnibug 확장 프로그램 설치 화면

omnibug 확장 프로그램을 웹스토어에서 설치해주세요. omnibug는 태그 매니저의 데이터 잘 전송되는지 확인 할수 있는 프로그램 입니다.

 

 

10. Preview 버튼 클릭

Preview 버튼 클릭 화면
Preview 버튼 클릭 화면

먼저, [Submit] 버튼을 누르기 전에, 내가 설정한 태그가 제대로 작동하는지 확인 하기 위해서 [Preview] 버튼을 클릭해서 확인해야 합니다.

 

 

11. 미리보기를 실행할 url을 넣어주세요.

미리보기를 위한 url을 넣는 화면
미리보기를 위한 url을 넣는 화면

미리보기를 위한 url을 넣어주고 [Connect] 버튼을 클릭해 주세요.

 

 

12. 미리보기 url 연결중 화면

미리보기 url 연결중 화면
미리보기 url 연결중 화면

위와 같이 로딩 화면을 기다려 주세요.

 

 

13. 미리보기 결과를 보기 위해서는 continue를 누르시오

continue 클릭 화면
continue 클릭 화면

[Continue] 버튼을 클릭해 주세요.

 

 

14. 미리보기 결과 확인

미리보기 결과 화면
미리보기 결과 화면

Preview를 누른 결과 화면을 볼수 있습니다. 위에 [Tags Fired]는 해당 url에서 실행된 태그들을 확인 할수 있습니다. [Tags Not Fired] 는 실행되지 않은 태그들을 확인 할수 있습니다. 저희가 만든 GA_Pageview 태그는 제대로 작동한것을 확인 할수 있습니다.

 

 

15. 구글 애널리틱스 확인

구글 애널리틱스 페이지뷰 확인 화면
구글 애널리틱스 페이지뷰 확인 화면

페이지뷰가 제대로 전송 됬는지 확인하기 위해서, 구글 애널리틱스로 이동하여 [실시간] -> [개요] 로 이동하여 확인해 주세요.

 

 

16. [실시간] -> [개요] 에서 우리가 설정한 페이지뷰가 제대로 들어온것을 확인 할수 있습니다.

구글 애널리틱스 [실시간] - [개요] 화면
구글 애널리틱스 [실시간] - [개요] 화면

 

 

17. Omnibug 프로그램으로 확인 하는 방법

크롬 개발자 도구
크롬 개발자 도구

[F11]을 클릭하여, 크롬 개발자 도구를 열면, [Omnibug] 라는 탭이 있습니다. [Omnibug] 탭을 클릭해 주세요.

 

 

18. 아래와 같은 화면이 나오면 [f5]를 눌러 새로고침을 한번 해주세요.

새로고침이 필요한 화면
새로고침이 필요한 화면

 

 

19. 새로고침을 하였으면, 아래 그림 처럼 pageview가 제대로 전송된것을 확인 할수 있습니다.

omnibug 탭 화면
omnibug 탭 화면

 

20. 위와 같이 [Preview]가 잘 돌아가는것을 확인 했으면, [Submit] 을 눌러 우리가 만든 변수와 페이지뷰 태그를 실시간으로 반영 시켜주세요.

구글 태그 매니저 화면
구글 태그 매니저 화면

 

 

21. 버전 이름을 설정하고, [Publish] 버튼을 눌러 제출해 주세요.

새로운 버전 제출 화면
새로운 버전 제출 화면

 

 

이 글이 도움이 되었다면, 좋아요를 눌러주세요. 주변에 이 정보가 필요한 사람이 있다면, 공유해주세요.

▶[구글 태그 매니저 사용법1] 구글 태그 매니저 정의 및 구성요소는??

 

구글 태그 매니저 정의 및 구성요소

GMP(Google Marketing Platform) 생태계 1. GA(Google Analytics) GA는 웹이는 앱의 데이터를 분석을 하는 솔루션 2. Data Studio 데이터 시각화 하기 위한 솔루션 3. GTM(Google Tag Manger) 데이터를 수집 하기..

coding-food-court.tistory.com

▶[구글 태그 매니저 사용법2] 구글 태그 어시스턴트란??

 

구글 태그 어시스턴트 - 구글 태그 매니저 설치 됬는지 확인하는 방법

처음에 구글 태그 매니저 설치 하는 스크립트를 내 홈페이지 에다가 삽입했는데, 이것이 제대로 구글 태그 매니저가 설치 된건지 확인하고 싶습니다. 그럴때 확인 할수 있는 방법이 있습니다.

coding-food-court.tistory.com

반응형