如何将Google Tag Manager集成到React应用程序中？

Question

该项目的技术规格是ExpressJS和ReactJS。这是用作浏览器扩展程序。我正在使用“react-gtm-module”实现Google标签管理器。

import React, { Component } from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Landingpage from "./components/Landingpage.js";
import Landingpagetest from "./components/Landingpagetest.js";
import Ad from "./components/Ad.js";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import TagManager from 'react-gtm-module';
import Referral from "./components/Referral";
import OnInstall from "./components/OnInstall";

const tagManagerArgs = {
  gtmId: 'GTM-P5Q5Q84'
}
TagManager.initialize(tagManagerArgs)

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/"></Route>
          <Route path="/tabbing" component={Landingpage} />
          <Route path="/test" component={Landingpagetest} />
          <Route path="/ads" component={Ad} />
          <Route path="/:id" component={Referral} />
          <Route path="/oninstall" component={OnInstall} />
        </Switch>
      </Router>
    );
  }
}

export default App;

添加标签管理器后，预计在此网址OpenTabs Extension上触发标签管理器。
然而，使用Tag Assistant Legacy(by Google)检查，标记管理器不会在此页面上触发。
如果我首先在OpenTabs Website中点击记录Tag Assistant Legacy，则标记管理器开始触发。现在，如果我点击OpenTabs Extension的记录按钮，则相应的标记将显示出来。

这里的实现问题是什么？

- Abhijeet Pandit

Answer 1

在使用类组件时，由于该库依赖于componentDidMount()生命周期方法，您需要在其中利用'react-gtm-module'元素。

class App extends Component {
 componentDidMount() {
   const tagManagerArgs = {
        gtmId: 'GTM-P5Q5Q84'
    }
    TagManager.initialize(tagManagerArgs)
    } 
      render() {
        return ();
  }
}

- Alpay Genç