노션 분석 2, 구글 태그 매니저 GTM 노션 페이지에 설치하기

이번 시간에는 저번 시간에 이어 노션 분석 을 위한 oopy에 구글 태그 매니저를 설치하고, 구글 태그 매니저로 할 수 있는 기본 이벤트를 설치해보겠습니다. 구글 태그 매니저를 설치하면 노션 페이지에서는 할 수 없었던 디지털 마케팅의 일부분을 할 수 있습니다. 예를 들면 우리 페이지에 들어온 사람들이 어떤 링크를 클릭했는지, 어떤 페이지의 스크롤을 내렸는지, 어떤 페이지를 많이 살펴봤는지 알 수 있는거죠. 구글 태그 매니저를 어떻게 활용하냐에 따라 디지털 마케터로서 무궁무진한 일들을 할 수 있습니다. 저의 경우에는 몇 명이 제 강의계획서를 받았는지, 제 인스타그램 링크를 클릭했는지 같은 것들을 데이터로 살펴보고 있죠.

아래 사진처럼요. 문의하기, 도서 구매하기가 2개인 것은 테스트를 하느라 이것 저것 변경해봤기 때문입니다. 실제로 데이터는 빨간 사각형 안에 있는 데이터죠.

지난 시간에는 [Notion] 노션 페이지 데이터 분석 방법 정리 4가지 with.oopy에 대해 알아봤습니다. 글을 읽지 못하셨다면 위 글을 읽고 오셔도 좋습니다.

1. 구글 태그 매니저 접속하기

일단 구글 태그 매니저에 먼저 접속해야 합니다. 구글 태그 매니저 홈페이지인 https://tagmanager.google.com/에 들어와보시죠. 구글 태그 매니저에 들어오신 다음 구글 계정으로 로그인을 해주세요.

아래와 같은 사진으로 구글 태그 관리자에 접속이 되면 오른쪽 상단 계정 만들기를 눌러주세요. 계정이 이미 있으시면 컨테이너 제작 단계부터 시작하시면 됩니다.

새 계정 추가에 들어가신 다음, 계정 이름, 국가, 컨테이너 이름을 입력해줍니다. 계정 이름은 위 사진에서 sijinii라는 곳에 들어가고, 컨테이너 설정에서 컨테이너 이름은 위 사진에서 sijin.me, sijinii.com blog 를 말하니 비교해보신 후 설정해주시기 바랍니다.

약관 동의 팝업이 뜨는데, 약관 동의는 한글로 되어 있어도 잘 읽지 않으니 맨 아래에 체크박스만 눌러주고 오른쪽 상단 예를 눌러줍니다.

만들고 나면 아래와 같은 페이지가 나오게 됩니다. 아래 코드는 oopy에 설치할 코드이며, 아래 사진에서 오른쪽 상단에 빨간 사각형을 누르면 코드가 다시 나오게 되니 확인을 누르셨더라도 걱정안하셔도 됩니다.

이제 이 코드를 설치하기 위해 oopy로 넘어가보시죠. 위 창은 둘다 복사를 해서 붙여야하기 때문에 탭을 닫지 마세요.

2. oopy에 구글 태그 매니저 설치하기

oopy에 구글 태그 매니저를 설치할 예정이니 우피 관리자인 app.oopy.io의 관리자 페이지에 들어와 줍니다. 관리자 페이지 맨 아래에 HTML 편집의 바로가기를 눌러 들어가줍니다.

다시 구글 태그 매니저에 들어와서 아래 이미지처럼 <head>영역에 들어갈 코드의 복사 버튼을 눌러 복사해줍니다.

그 후 우피의 페이지에 들어와서 <head> 영역에 코드를 아래와 같이 붙여넣어줍니다.

위 사진에서 <body> 영역의 코드도 똑같이 복사한 후 우피의 <body> 영역에 붙여 넣어줍니다.

그 후, <body> 오른쪽 저장 버튼을 눌러주면 끝!

구글 태그 매니저 설치가 완료되었습니다. 아무런 변화가 없다고요? 맞아요 아무런 설정을 하지 않았기 때문입니다. 지금은 저희집에 정수기를 설치만 했을 뿐, 서울에 있는 물을 가져오는지, 경기도에 있는 물을 가져오는 건지 설정하지 않았습니다. 추가 설정이 필요하단 말이니 넘어가주세요.

3. 구글 태그 매니저로 구글 애널리틱스 설치하기

구글 태그 매니저를 설치한 후 가장 먼저할 것은 구글 태그 매니저로 구글 애널리틱스 설치입니다. 이전 글에서 구글 애널리틱스 설치하는 방법을 알려드렸는데, 사실 그 방법은 구글 애널리틱스 초급 과정에 해당 되는 내용이죠. 이전 글과 같은 방식으로 구글 애널리틱스를 설치하면 기본적인 데이터를 살펴볼 수만 있을 뿐, 활용할 수는 없습니다. 구글 태그 매니저를 통해 우리가 원하는 데이터를 구글 애널리틱스에서 알아볼 수 있도록 설정을 해줘야 합니다. 정수기에 들어갈 물길을 지정해주는 거죠. 경기도의 물이 들어가냐, 서울의 물이 들어가냐 등. 복잡하신가요? 구글 태그 매니저를 제대로 활용하고 싶으시다면 디지털 마케팅에 대해 배워보시기 바랍니다.

서론이 길어졌네요. 구글 태그 매니저로 구글 애널리틱스를 설치한다면 앞의 글에서 설치했던 방식은 지워주셔야 합니다.

플러그인에 들어가 입력했던 구글 애널리틱스 아이디를 복사한 후 모두 지워준 다음 저장을 눌러주세요. 두개 다 입력되어 있다면 데이터가 중복으로 잡힐 수 있어, 한쪽만 설치해주려 합니다.

구글 애널리틱스 계정을 만드는 방법을 모르신다면 이전 글에서 계정 설치 방법을 보고 오셔야 합니다!

[Notion] 노션 페이지 데이터 분석 방법 정리 4가지 with.oopy

구글 애널리틱스 번호를 복사한 다음 아래 이미지처럼 구글 애널리틱스 추적 정보가 없어야 합니다.

복사한 구글 애널리틱스 추적 ID를 기억하신 다음 구글 태그 매니저로 들어갑니다. 왼쪽 사이드 바에서 태그를 눌러주세요. 그러면 오른쪽 새로 만들기버튼이 나오게 됩니다. 눌러주세요!

왼쪽 상단 태그 이름을 GA UA - ID로 입력해주고, 태그 구성을 클릭하면 오른쪽 패널이 나타납니다. 태그 유형에서 Google 애널리틱스: 유니버설 애널리틱스를 눌러줍니다.

새 변수를 클릭해 줍니다.

변수 이름을 GA UA - ID으로 입력해주고, 추적 ID에 아까 복사한 GA 추적 ID를 입력해줍니다. 오른쪽 상단에 저장 버튼을 누릅니다.

Google 애널리틱스 설정에 위에서 설정한 변수 이름으로 설정한 다음, 아래 트리거 버튼을 눌러줍니다.

트리거는 다른 설정이 되어있지 않아 All Pages를 눌러주고 저장을 눌러줍니다.

아래 빨간 사각형처럼 태그가 설정되어있는지 확인한 다음 오른쪽에 제출 버튼을 눌러줍니다.

변경사항 제출이라는 창이 뜨는데 변경 사항 이름을 입력하고, 게시 버튼을 눌러주면 구글 태그 매니저를 이용한 GA 설치가 완료됩니다.

4. 구글 태그 매니저 클릭 이벤트 설치하기

이제는 구글 태그 매니저를 이용할 때 가장 기본 이벤트인 클릭 이벤트를 설치해보겠습니다. 클릭 이벤트는 특정 페이지에서 우리가 원하는 특정 링크를 클릭했을 때 GA에서 데이터를 볼 수 있게 만들어줍니다. 저는 제 인스타그램을 클릭하면 이벤트로 인식하도록 만들어보겠습니다.

제 홈페이지 맨 아래에 보면 Instagram 링크가 있는데, 이 링크를 클릭한 수를 GA에서 데이터로 볼 수 있게 해주는거죠. 먼저 이 링크에 걸어둔 링크를 복사합니다.