suchen

Heim >Web-Frontend >js-Tutorial >So fügen Sie Google Tag Manager-Code zu einer React-Website hinzu

So fügen Sie Google Tag Manager-Code zu einer React-Website hinzu

WBOY
WBOYOriginal
2024-08-09 02:07:02804Durchsuche

How To Add Google Tag Manager Code in a React Website

Das Hinzufügen von Google Tag Manager (GTM) zu einer React-Website erfordert das Einfügen des GTM-Skripts in Ihre Anwendung. So können Sie es machen:

1. Erstellen Sie ein Google Tag Manager-Konto

Falls noch nicht geschehen, müssen Sie ein Google Tag Manager-Konto erstellen und einen Container für Ihre Website einrichten. Google stellt Ihnen zwei Codeteile zur Verfügung:

  • Ein Tag, der in den -Tag eingefügt wird Ihres HTML.
  • Ein optionales

2. Installieren Sie GTM in Ihrer React-App

Option 1: Manuelles Hinzufügen des GTM-Codes

  1. Fügen Sie das GTM-Skript in das Feld ein. Schlagwort: In einer React-App fügen Sie das GTM-Skript in die Datei public/index.html ein. 
   <!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>

Ersetzen Sie GTM-XXXXXX durch Ihre tatsächliche GTM-Container-ID.

  1. Fügen Sie das

Option 2: Verwendung einer React GTM-Bibliothek

Sie können auch eine React-Bibliothek verwenden, um die Integration zu vereinfachen.

  1. Installieren Sie die GTM-Bibliothek:

Verwenden Sie npm oder Yarn, um das React-GTM-Modul zu installieren:

   npm install react-gtm-module
  1. GTM in Ihrer App initialisieren:

Initiieren Sie GTM in Ihrer Haupt-React-Komponente (z. B. App.js) wie folgt:

   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;

Ersetzen Sie GTM-XXXXXX erneut durch Ihre tatsächliche GTM-Container-ID.

3. Überprüfen Sie die Installation

Nachdem Sie GTM zu Ihrer React-App hinzugefügt haben, veröffentlichen Sie die Änderungen und überprüfen Sie, ob der GTM funktioniert, indem Sie die Google Tag Assistant Chrome-Erweiterung verwenden oder den Abschnitt „Echtzeit“ in Google Analytics überprüfen.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Google Tag Manager-Code zu einer React-Website hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

chrome html npm yarn if for using public JS this
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Async und Defer verstehenNächster Artikel：Async und Defer verstehen

In Verbindung stehende Artikel

Mehr sehen