React 웹사이트에 Google 태그 관리자(GTM)를 추가하려면 애플리케이션에 GTM 스크립트를 삽입해야 합니다. 방법은 다음과 같습니다.
아직 계정을 만들지 않았다면 Google 태그 관리자 계정을 만들고 웹사이트용 컨테이너를 설정해야 합니다. Google은 다음 두 가지 코드를 제공합니다.
<!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.m.sbmmt.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.m.sbmmt.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로 바꾸세요.
React 라이브러리를 사용하여 통합을 단순화할 수도 있습니다.
npm 또는 Yarn을 사용하여 반응 GTM 모듈을 설치합니다.
npm install react-gtm-module
주 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로 바꾸세요.
React 앱에 GTM을 추가한 후 Google Tag Assistant Chrome 확장 프로그램을 사용하거나 Google Analytics의 '실시간' 섹션을 확인하여 변경 사항을 게시하고 GTM이 작동하는지 확인하세요.
위 내용은 React 웹사이트에 Google 태그 관리자 코드를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
