如何将 Google 标签管理器与 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;

因此，添加标签管理器后，预计会在此 url OpenTabs Extension上触发标签管理器。
但是，标签管理器不会在此页面上触发，使用检查如果我第一次点击OpenTabs Website上的Tag Assistant Legacy(by Google)
Record ，标签管理器就会开始触发，现在如果我点击OpenTabs Extension的 Record ，相应的标签就会显示。Tag Assistant Legacy

这里的执行问题是什么？

Answer 1

You need to utilize the 'react-gtm-module' element within the componentDidMount() lifecycle method when using a class component due to the library's dependency on this lifecycle method.

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