[GTM] React에 Google Tag Manager 적용하기

React에 Google Tag Manager 적용하기

적용순서

React에 Google Tag Manager를 적용하기 위해서는 다음 두 가지 단계가 필요합니다.

1. Google Tag Manager 계정 생성 및 설치
2. React 소스에 GTM 코드 추가

 

Google Tag Manager 계정 생성 및 설치

1. Google Tag Manager 계정 및 컨테이너 생성
   • Google Tag Manager 에서 새로운 계정을 생성합니다.
   • 계정 생성 후, 마케팅 관리자가 계정을 관리할 수 있는 권한을 할당합니다.
   • 드롭다운 메뉴를 클릭해서 “Web”을 선택한 다음, 운영 중인 Applications 플랫폼 유형을 선택합니다.
   • 계정과 컨테이너를 선택합니다.
   • 페이지 맨 아래에서, 태그 설치를 클릭합니다. 설치 코드를 복사하여, 웹 사이트에 삽입합니다.
   • 위 단계를 따르며 Google Tag Manager를 설치하고, 브라우저의 태그 inspects구에서 설치된 코드를 확인할 수 있어야합니다.

Google Tag Manager 컨테이너를 설치했다면, React 애플리케이션 소스에 GTM 코드를 삽입해야 합니다.

 

React 소스에 GTM 코드 추가

1. node module 설치

npm install react-gtm-module

2. 다음으로 React 컴포넌트를 추가합니다.

import React, { useEffect } from 'react';
import TagManager from 'react-gtm-module';

const GoogleTagManager = ({ gtmId }) => {
  useEffect(() => {
    TagManager.initialize({ gtmId });
  }, [gtmId]);

  return <></>; // Empty fragment since this component doesn't render anything
};

export default GoogleTagManager;

코드설명

1. Google Analytics component 생성
2. useEffect를 선언하여 컴포넌트 마운트 시 태그매니저가 초기화되도록 선언한다.

 

3. App.js

App.js에 GoogleTagManager 컴포넌트를 추가하고 gtmId를 props로 전달한다.

import React from 'react';
import GoogleTagManager from './GoogleTagManager';

const App = () => {
  return (
    <>
      {/* Your application components */}
      <GoogleTagManager gtmId="GTM-XXXXXXX" />
    </>
  );
};

export default App;