-
프론트엔드_GTM Tag 태깅 작업 방법그 외 다양한 웹 지식 2021. 8. 9. 10:11반응형
프론트엔드 일을 하다가 처음으로 GTM이라는 것을 실시했다.
아무래도 마케팅 기반의 회사다보니 AE들이 주를 이루었고, 이분들이 GA를 통해서 확인 할 수 있도록 GTM을 심는 일을 해야했다.
나도 처음이다보니 공부를 하면서 실시를 하게 되었다.
GTM이란?
GTM이라는 것은 Google Tag Manager를 뜻한다.
이는 Google에서 제공하는 데이터 분석 지원 서비스 이며, 추적코드(태그)를 비교적 쉽게 적용 가능하고, 구글 외에 플랫폼에도 설치 및 관리기능을 제공하고 있다.
또한 기본적으로는 비개발자가 사용 할 수 있도록 만들어졌으므로 GTM에서 자동 에러체크를 하여 문제를 알려준다는 장점도 볼 수 있다.
내가 생각하는 모양은 이러하다.
GTM을 통해 내가 GA에서 보고 싶은 것을 만들어내고, 웹사이트와 연결만 해놓는다면, 웹사이트에서는 어떤 액션이 일어나면 GTM이 그것을 감지해서 GA에 보내주는 식이다.
GTM Event 설정
page load와 별개로 콘텐츠와 유저 간의 상호작용을 의미한다.
GA로 수집되는 데이터를 통틀어서 HIT라고 부르는데, 이에는 페이지뷰, 이벤트, 전자상거래 데이터가 포함되어진다.
추적코드가 설치 된 웹사이트에 접속하면 기본적으로 페이지뷰 HIT는 전송되지만, 이벤트는 전송되지 않는데 그렇기 때문에 이벤트 태그를 실행하기 위해서는 데이터 추적을 위한 값이 필요하다.
GTM Event 요소
- 컨테이너(Container) : 태그, 트리거, 변수가 들어있는 보관함
- 태그(Tag) : 실행되는 코드 조각. 외부로 정보를 전송하는데 사용된다.
- 트리거(Trigger) : 클라이언트의 이벤트를 감지해서 태그가 실행되도록 보내는 신호
- 변수(Variable) : 변경 될 수 있는 값. 태그가 실행될 때 전달 된다
기본적인 사용 방법을 살펴보자!
1. GTM 계정 만들기
- 계정 이름, 국가, 컨테이너 이름, 웹(경우에 따라 앱 등)을 선택한다.
- <head>, <body>에 스니펫 태그를 삽입한다.
2. GA 계정 만들기
- 계정 설정 : 계정 이름, 계정 데이터 공유 설정 전체 체크
- 측정하려는 대상 : 웹(경우에 따라 앱 등)
- 속성 설정 : 웹사이트 이름(GTM 컨테이너 이름과 동일하게 작성), 웹사이트 URL, 업종 카테고리, 시간대 등 설정
3. GTM 태그
- 사이드 Nav bar의 "변수" -> 새로 만들기 -> GA_Tracking_ID(같지 않아도 된다) -> Google 애널리틱스 설정 -> 추적 ID(UA로 시작하는 GA 추적 ID) 설정
- 태그 메뉴 -> Google 에널리틱스: 유니버셜 애널리틱스 -> 페이지뷰(페이지에 들어올때마다 작동하게 한다) -> Google 애널리틱스 설정(설정해두었던 GA_Tracking_ID) -> 트리거(All plages)
4. 미리보기로 잘 작동하는지 확인
5. 제출을 통해서 GA에 연결
반응형'그 외 다양한 웹 지식' 카테고리의 다른 글
Nextjs + Docker를 통한 멀티 스테이지 빌더(multi-stage builder) (0) 2024.03.20 Docker 이미지 플랫폼 호환성 에러 (linux/amd64) (0) 2024.01.09 타임존(UTC, GMT)과 날짜 포맷(Date format) 그리고 luxon (0) 2023.06.28 웹페이지 미리보기 : OGP(OG) (Open Graph protocol) (0) 2022.01.03 Open Graph Protocol 오픈 그래프 프로토콜 간단하게 알아보기 (0) 2021.12.06