4. GA4 이벤트 생성(2) - 인터랙션 이벤트 설정 2 : GTM 삽입하기

 

 

이번 아티클에서는, 앞서 살펴본 인터랙션 이벤트와 GTM의 기본 원리를 바탕으로, 실제 GTM 세팅과 확인을 진행해 보겠습니다. 프로세스 상으로는 '컨테이너 생성'을 진행하고, 이 '컨테이너를 서비스에 삽입'하는 부분을 진행하는 것입니다.

 

우선은 Google Tag Manger로 들어가서 새로운 계정을 생성해 보도록 하겠습니다. 

 

Google 애널리틱스

 

 

 

참고로 GTM은 [계정] > [컨테이너] 레벨로 이루어져 있습니다. 계정은 복수로 생성이 가능하니, 우선 아무것도 없는 상태에서 [계정 만들기]를 실행해 새로운 계정을 추가하겠습니다. 아래 이미지를 확인해 주세요

 

 

계정 이름은 구분하기 좋은 이름을 삽입하고, 그다음은 컨테이너 이름을 설정합니다. 한 가지의 계정에서 여러 개의 서비스를 운영한다고 가정하면, 예시처럼 웹사이트(서비스) 이름을 넣는 것이 좋겠습니다. 그리고 타겟 플랫폼은 실습을 위해 '웹'을 선택하도록 합니다.

 

 

 

 

이제 계정 생성 작업이 완료되면 위와 같이 GTM 관리자 설치 코드가 출력됩니다. GA 추적 코드와 비슷한 방식이죠? 이제 이 설치 코드를 대상 페이지의 head와 body 태그에 삽입하면 됩니다. 

 

우리가 실습하는 티스토리 블로그 관리자 메뉴로 들어가서 [꾸미기] > [스킨 편집] > [HTML 편집] 메뉴로 들어가 줍니다. 그리고 head 태그를 우선 찾아 줍니다. 

 

 

위 이미지의 드래그된 부분이 GTM 태그입니다. head 영역에는 기존에 삽입해 둔 GA 기본 추적코드가 존재합니다. 하지만 GTM에서는 자신들의 태그를 head의 가능한 윗부분에 넣으라고 안내하는데, 관행으로서는 GA 추적 코드를 위에 두고 GTM 코드를 아래에 둡니다. 

 

그리고 body 태그 영역에도 코드를 삽입해 줍니다. 

 

 

이제 모두 완료되었으면 HTML 편집기의 [적용]을 눌러 작업을 완료합니다. 그런데 GTM 설치는 가시적으로 결과를 확인할 수 없기 때문에 제대로 설치되었는지 확인이 어렵습니다. 이는 크롬 확장 프로그램 Tag Assistant로 확인이 가능합니다.

 

Tag Assistant Legacy (by Google)

 

 

 

Tag Assistant를 설치하고 나서, [ENABLE]을 클릭하고 - 활성화가 된 상태에서 사이트를 리프레쉬하면 해당 사이트에 설치된 태그들이 정상 작동하는지 status 확인이 가능합니다. 아래 이미지를 볼까요?

 

 

 

GA 기본 추적코드와 태그 매니저가 잘 설치 되었음을 확인할 수 있습니다. 초록/파란색은 정상을 의미하고, 문제가 있다면 노란색 혹은 붉은색으로 표시됩니다.