Google 태그 관리자(GTM) 설치하기

2023년 5월 20일 수정11-15분 읽기태그: Web Dev, Gatsby, Web Analytics, GTM, GA4

Google 태그 관리자를 이용하면 gtag.js를 직접 추가하지 않고 Google 애널리틱스를 설치할 수 있다. Google 태그 관리자를 웹사이트에 한 번 설치하면 이후에는 GA4 등 Google 태그뿐만 아니라 다른 외부 태그도 웹에서 쉽게 설치하고 관리할 수 있다.

준비물

Gatsby v5 웹사이트: Gatsby로 만든 웹사이트가 필요하다. 프로젝트 생성 방법은 다음 문서를 참고한다. → Gatsby Quick Start
Google 태그 관리자에 대한 지식: Google 태그 관리자(GTM)에 대해 알고 있어야 한다. → Google 태그 관리자

Google 태그 관리자의 역할

웹사이트를 개발하면 웹 분석을 위해 Google 애널리틱스, 카카오 픽셀, 페이스북 픽셀 등 각종 외부 서비스를 많이 사용한다. 이를 위해 각 서비스에서 제공하는 코드 스니펫(태그)를 웹사이트 코드에 추가해야 한다. Google 태그 관리자 ^{Google Tag Manager, GTM}를 이용하면 이런 태그를 웹 코드에 직접 작성하지 않고 태그 관리자 웹사이트에서 설정할 수 있다.

Google 태그 관리자를 사용하면 아래와 같은 장점이 있다.

각종 태그 설치 및 수정을 웹 UI로 편하게 관리
웹 개발 소스 코드와 외부 서비스 코드를 분리
버전 관리 및 쉬운 복구 기능
미리보기 및 디버깅의 편리성
퍼포먼스 마케터 등 웹 개발자가 아닌 사람이 태그를 직접 관리 가능

Google 태그 관리자에서 컨테이너 만들기

Gatsby 웹사이트에 Google 태그 관리자를 설치하려면 먼저 컨테이너를 만들어야 한다. 컨테이너는 각종 태그를 묶어주는 관리 단위이다. 보통 웹사이트라면 웹사이트 당 1개 컨테이너를 만들면 된다.

컨테이너는 계정에 속해야 한다. a)새 계정에 새 컨테이너를 만들거나, b)기존 계정에 새 컨테이너를 만들 수 있다. 브라우저에서 Google 태그 관리자 홈페이지로 이동 후 계정 생성 여부에 따라 아래 절차를 진행한다.

새 계정에 새 컨테이너 만들기

새 컨테이너가 속할 계정이 없다면 새 계정을 함께 만든다. 계정 만들기 버튼은 아래 두 화면에서 찾을 수 있다.

Google 태그 관리자 > 다른 계정의 컨테이너 관리 페이지 > 관리자 > 계정 만들기

계정 만들기 화면에서 계정 설정 정보를 입력한다. 회사 프로젝트라면 회사 이름으로 만들면 된다. 개인용 웹사이트를 관리하려고 '개인' 이름으로 계정을 만들었다.

Google 태그 관리자 > 새 계정 추가 > 계정 설정 섹션에 이름, 국가 등 정보를 입력한다

계정 만들기 화면에서 컨테이너 설정 정보도 함께 입력한다. 이름을 입력하고 플랫폼을 웹으로 선택했다.

Google 태그 관리자 > 새 계정 추가 > 컨테이너 설정 섹션에 이름 등 정보를 입력한다

기존 계정에 새 컨테이너 만들기

이미 새 컨테이너가 속할 계정이 있다면 바로 새 컨테이너를 만들 수 있다. 컨테이너 만들기 버튼은 아래 두 화면에서 찾을 수 있다.

Google 태그 관리자 > 홈(모든 계정) 페이지 > 기존 계정 > 설정 버튼 > 컨테이너 만들기

Google 태그 관리자 > 기존 계정의 컨테이너 관리 페이지 > 관리자 > 컨테이너 만들기

컨테이너 만들기 화면에서 컨테이너 설정 정보를 입력한다. 이름을 입력하고 플랫폼을 웹으로 선택했다.

Gatsby 웹사이트에 Google 태그 관리자 설치하기

컨테이너를 만들었다면 Gatsby 웹사이트에 GMT 설치 코드를 <head> 요소와 <body> 요소에 추가해야 한다. 설정이 단순하므로 설치 코드를 직접 추가하면 의존성을 줄일 수 있다. gatsby-plugin-google-tagmanager 플러그인을 사용해서 설치하는 방법도 소개한다.

Gatsby 웹사이트에 GTM 스니펫 추가하기

Google 태그 관리자 설치 코드 얻기

설치 코드는 선택한 컨테이너 페이지의 아래 두 위치에서 찾을 수 있다.

Google 태그 관리자 > 컨테이너 관리 페이지 > 작업공간 > 컨테이너 ID

Google 태그 관리자 > 컨테이너 관리 페이지 > 관리자 > Google 태그 관리자 설치

Google 태그 관리자 설치 코드를 확인한다. <head> 요소에 GTM <script> 요소를 추가하고 <body> 요소에 <noscript> 요소를 추가해야 한다.

Google 태그 관리자 설치 화면에서 GTM 설치 코드를 얻을 수 있다.

셋업용 컴포넌트 만들기

GTM 설치 코드를 담을 파일을 생성하고 1)에서 얻은 두 개의 요소를 추가한다. 컨테이너 ID(GTM-XXXXXXX)를 본인 것으로 수정한다.

src/components/gtm-setup.tsx

import React from "react"
import {oneLine} from "common-tags";
 
const gtm: string = 'GTM-XXXXXXX'
 
// Google Tag Manager
export const gtmScript = <script
    key="gtm-js"
    dangerouslySetInnerHTML={{__html: oneLine`
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','${gtm}');
`}}/>
 
// Google Tag Manager - noscript
export const gtmNoscript = <noscript
    key="gtm-noscript"
    dangerouslySetInnerHTML={{__html: oneLine`
        <iframe src="https://www.googletagmanager.com/ns.html?id=${gtm}" height="0" width="0" style="display:none;visibility:hidden"></iframe>
`}}/>

onRenderBody 설정하기

2)에서 만든 설치 코드를 불러와서 gatsby-ssr.tsx 파일의 onRenderBody 함수 내용에 추가하면 설정이 완료된다.

gatsby-ssr.tsx

import * as React from "react"
import {GatsbySSR} from "gatsby"
import {gtmNoscript, gtmScript} from "./src/components/gtm-setup";
 
 
export const onRenderBody: GatsbySSR["onRenderBody"] = ({ setHeadComponents, setPreBodyComponents }) => {
    setHeadComponents([gtmScript])
    setPreBodyComponents([gtmNoscript])
}

gatsby-plugin-google-tagmanager 플러그인 사용하기

Gatsby Plugins 페이지에서 google로 검색하면 공식 플러그인 3개가 상단에 나온다. 이 중 Google 태그 관리자를 설치하는 gatsby-plugin-google-tagmanager 플러그인이 검색 결과 상단에 표시된다.

Gatsby Plugins 페이지에서 'google'으로 검색하면 가장 위에 gatsby-plugin-google-tagmanager 플러그인이 나온다. (2023.5.20 기준)

먼저 플러그인을 설치한다.

npm install gatsby-plugin-google-tagmanager

플러그인이 설치되었다면 gatsby-config.ts 파일에 플러그인 이름과 옵션을 함께 추가한다.

gatsby-config.ts

import type {GatsbyConfig} from 'gatsby';
 
const config: GatsbyConfig = {
    plugins: [
        {
            resolve: 'gatsby-plugin-google-tagmanager',
            options: {
                id: 'GTM-XXXXXXX', // 컨테이너 ID
                includeInDevelopment: true,  // 개발 서버로 Google Tag Assistant 사용하려면 true로 설정.
            }
        },
    ]
};
 
export default config;

Google Tag Assistant 미리보기로 GTM 설치 확인하기

어떤 방식으로든 Google 태그 관리자 코드를 추가했다면 Google 태그 관리자 웹사이트에서 설치 결과를 확인한다.

로컬 개발 서버를 실행한다.
```
gatsby develop
```
Google 태그 관리자 웹사이트의 해당 컨테이너 페이지에서 미리보기 버튼을 누른다.

컨테이너 작업공간 페이지에서 '미리보기' 버튼을 클릭한다.
Google Tag Assistant 페이지에서 http://localhost:8000 개발 서버 주소를 입력하고 Connect 버튼을 누른다.

Google Tag Assistant 페이지에서 http://localhost:8000 개발 서버 주소를 입력한다.
웹페이지가 디버그 UI로 변경된다. Summary에서 1 Initialization 영역을 클릭하면 GTM 코드가 초기화된 것을 확인할 수 있다.

Google Tag Assistant 디버그 화면에서 GTM이 설치되어 초기화 된 내용을 단계별로 확인할 수 있다.

참고 자료

이 글에서 참고한 자료는 다음과 같다.

Google Tag Manager Help Center
Gatsby Plugins: gatsby-plugin-google-tagmanager