React 웹사이트에 Google 태그 관리자 코드를 추가하는 방법
- WBOY원래의
- 2024-08-09 02:07:02731검색
React 웹사이트에 Google 태그 관리자(GTM)를 추가하려면 애플리케이션에 GTM 스크립트를 삽입해야 합니다. 방법은 다음과 같습니다.
1. 구글 태그 관리자 계정 생성
아직 계정을 만들지 않았다면 Google 태그 관리자 계정을 만들고 웹사이트용 컨테이너를 설정해야 합니다. Google은 다음 두 가지 코드를 제공합니다.
- <스크립트> HTML의
- 선택적인
2. React 앱에 GTM 설치
옵션 1: GTM 코드 수동 추가
- 태그: React 앱에서 public/index.html 파일은 GTM 스크립트를 추가하는 곳입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
<!-- Google Tag Manager -->
<script>
(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-XXXXXX');
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<div id="root"></div>
</body>
</html>
GTM-XXXXXX를 실제 GTM 컨테이너 ID로 바꾸세요.
옵션 2: React GTM 라이브러리 사용
React 라이브러리를 사용하여 통합을 단순화할 수도 있습니다.
- GTM 라이브러리 설치:
npm 또는 Yarn을 사용하여 반응 GTM 모듈을 설치합니다.
npm install react-gtm-module
- 앱에서 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 (
<div className="App">
{/* Your app components */}
</div>
);
};
export default App;
다시 GTM-XXXXXX를 실제 GTM 컨테이너 ID로 바꾸세요.
3. 설치 확인
React 앱에 GTM을 추가한 후 Google Tag Assistant Chrome 확장 프로그램을 사용하거나 Google Analytics의 '실시간' 섹션을 확인하여 변경 사항을 게시하고 GTM이 작동하는지 확인하세요.
위 내용은 React 웹사이트에 Google 태그 관리자 코드를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：비동기 및 지연 이해다음 기사：비동기 및 지연 이해