[react] react 구글 태그 매니저

[react] react 구글 태그 매니저

 

react에서는 react-gtm-module을 설치하여 구글 태그 매니저를 사용합니다. 

https://www.npmjs.com/package/react-gtm-module

react-gtm-module

 

react-gtm-module 설치

npm i react-gtm-module

 

상위페이지 app.js - 메인에서 initialize함수, userId 보냄

• index.html 의 태그 매니저 관련 <script>를 코드 필요 없음, 삭제할 것
• 기존의 index.js에서 TagManager.initialize(tagManagerArgs) 를 불러 왔다가 유저마다의 진입 페이지를 확인하기 위하여 삭제 하였음 -> 이유: index.js에서 userId 확인 불가능
• app.js에서 태그매니저 initialize로 불러와 userId 보냄

import TagManager from 'react-gtm-module';

function App() {
 	userId = xxx //내부에서 userId 불러오기

  const tagManagerArgs = { //태그 매니저
    gtmId: 'GTM-xxx',
    dataLayer: {
      event: 'xxx',
      user_id: userId
      method: 'xxx',
      page: 'app'
    },
    dataLayerName: 'dataLayer'
  }

  useEffect(() => {
    if (userId) {
      TagManager.initialize(tagManagerArgs)
    } else {
      TagManager.initialize(tagManagerArgs)
    }
  }, [])

 

하위 페이지

event 발생되는 하위 페이지에 TagManager.dataLayer(tagManagerArgs) 코드로 전달

import TagManager from 'react-gtm-module';

const tagManagerArgs = { 
    gtmId: 'GTM-xxx',
    dataLayer: {
        event: 'login',
        user_id: userId,
        method: 'login_method',
        page: 'xxx'
    },
    dataLayerName: 'dataLayer'
}

TagManager.dataLayer(tagManagerArgs)