반응형
next js 에서 google analytics tagmanager를 사용하려면 두가지 단계를 거쳐야 한다.
1. <head>에 GTM 스크립트를 배치한다
여기서 여러가지 방법이 있지만 가장 간단한 react-gtm-module 라이브러리를 이용하려고 한다.
2. google tag manager에서 history 변경 트리거를 생성한다.
사용방법
1. React-gtm-module 설치
yarn add react-gtm-module
타입스크립트 사용중이라면 yarn add @types/react-gtm-module
2. gtm추적 코드 삽입
gtmId를 env파일에 보관한다(경로는 임의등록)
// .env.production
PUBLIC_ENV=production
GA_TRACKING_ID=GTM-xxx이후 _app.js에서 아이디를 불러와 사용한다
import { useEffect } from 'react';
import TagManager from 'react-gtm-module';
function MyApp({ Component, pageProps }) {
useEffect(() => {
TagManager.initialize({ gtmId: 'GTM-XXXXX' });
}, []);
return <Component {...pageProps}/>
}
export default MyApp
내 코드에서는 이런식으로 사용했다.
production인 경우에만 구글 Tag Manager를 추가했고, 페이지 이동 시 트리거가 발동하도록 했다.
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import TagManager from 'react-gtm-module';
function MyApp({ Component, pageProps }:AppProps) {
const router = useRouter();
// google tag manager 초기화
useEffect(() => {
const isProd = process.env.PUBLIC_ENV === 'production';
const GA_TRACKING_ID = process.env.GA_TRACKING_ID;
let gtmId = '';
if(isProd && GA_TRACKING_ID) {
gtmId = GA_TRACKING_ID;
}
if(gtmId) {
TagManager.initialize({ gtmId });
}
} ,[])
// 페이지 이동 시 트리거 발동
useEffect(() => {
TagManager.dataLayer({
dataLayer: {
event: 'pageView',
page: {
url: router.asPath,
title: window.document.title,
},
},
})
} ,[router.asPath])
useEffect(() => {
TagManager.initialize({ gtmId: 'GTM-XXXXX' });
}, []);
return <Component {...pageProps}/>
}
export default MyApp반응형
'Today I Learn > React' 카테고리의 다른 글
| [React] 라이브러리 없이 모달 구현하기(TailWind Css, 애니메이션 효과, 배경 스크롤 막기) (0) | 2024.11.26 |
|---|---|
| 검색어 하이라이트 (0) | 2023.08.09 |
| [Next.js] 뒤로가기 시 스크롤 위치 유지하기(scrollRestoration) (0) | 2023.03.31 |
| [React/TypeScript]특정 영역 프린트 기능 구현 (0) | 2023.03.10 |
| [React.js]해당 월에 맞는 일 수 나타내기(select box 날짜 선택) (0) | 2022.02.16 |