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

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 Tag, der unmittelbar nach dem öffnenden steht. Tag.

2. Installieren Sie GTM in Ihrer React-App

Option 1: Manuelles Hinzufügen des GTM-Codes

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.

React App (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');

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

Fügen Sie das Tag Nach dem Schlagwort: Platzieren Sie das Tag direkt nach dem öffnenden Tag wie oben gezeigt.

Option 2: Verwendung einer React GTM-Bibliothek

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

Installieren Sie die GTM-Bibliothek:

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

npm install react-gtm-module

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 ( {/* Your app components */} ); };

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.