React 웹사이트에 Google 태그 관리자(GTM)를 추가하려면 애플리케이션에 GTM 스크립트를 삽입해야 합니다. 방법은 다음과 같습니다.

1. 구글 태그 관리자 계정 생성

아직 계정을 만들지 않았다면 Google 태그 관리자 계정을 만들고 웹사이트용 컨테이너를 설정해야 합니다. Google은 다음 두 가지 코드를 제공합니다.

• HTML의 에 들어가는
• 여는 태그 바로 뒤에 오는 선택적

2. React 앱에 GTM 설치

옵션 1: GTM 코드 수동 추가

1. 태그에 GTM 스크립트 삽입: React 앱에서 public/index.html 파일은 GTM 스크립트를 추가하는 곳입니다.

GTM-XXXXXX를 실제 GTM 컨테이너 ID로 바꾸세요.

1. 태그 뒤에 위와 같이 여는 태그 바로 뒤에

옵션 2: React GTM 라이브러리 사용

React 라이브러리를 사용하여 통합을 단순화할 수도 있습니다.

1. GTM 라이브러리 설치:

npm 또는 Yarn을 사용하여 반응 GTM 모듈을 설치합니다.

   npm install react-gtm-module

1. 앱에서 GTM 초기화:

기본 React 구성 요소(예: App.js)에서 다음과 같이 GTM을 초기화합니다.

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

   const App = () => {
       useEffect(() => {
           const tagManagerArgs = {
               gtmId: 'GTM-XXXXXX'
           };
           TagManager.initialize(tagManagerArgs);
       }, []);

       return (
           

               {/* Your app components */}
           
       );
   };

   export default App;

다시 GTM-XXXXXX를 실제 GTM 컨테이너 ID로 바꾸세요.

3. 설치 확인

React 앱에 GTM을 추가한 후 Google Tag Assistant Chrome 확장 프로그램을 사용하거나 Google Analytics의 '실시간' 섹션을 확인하여 변경 사항을 게시하고 GTM이 작동하는지 확인하세요.