React + 路由器 + Google 标签管理器

Question

我在 quickcypher.com 花了一些时间开发 MVP。我想开始进行一些分析，它非常适合跟踪总访问量，但是当我尝试跟踪我网站上使用 React Router 的不同 URL 时，事情就变糟了。

我的方法是：设置一个在某些页面上触发的 GA 标记，使用自定义 "pageview" 事件的触发器。当事情确实发生时，我会将字段页面设置为“/rap”，例如。我在每个视图的顶级组件的 "componentDidMount" 方法中触发事件。使用调试器，我看到事件按预期触发，但我无法让 GA 确认该事件。当我简化要在 "all pages" 上触发的标签时，GA 会按预期工作，因此我假设它与 React 有关。

有没有人成功实施这个或运行解决类似的问题？我的方法全错了吗？希望得到一些指导...干杯！

Answer 1

这可能是由于您的 google 分析帐户配置错误，但假设您可以将初始网页浏览事件触发回 GA，这里有一个利用 react-router willTransitionTo 的方法钩。它还使用 react-google-analytics。首先npm install react-google-analytics.

然后像这样配置您的应用程序：

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;
var ga = require('react-google-analytics');
var GAInitiailizer = ga.Initializer;

// some components mapped to routes
var Home = require('./Home');
var Cypher = require('./Cypher');

var App = React.createClass({
  mixins: [Router.State],
  statics: {
    willTransitionTo: function(transition, params, query, props) {
      // log the route transition to google analytics
      ga('send', 'pageview', {'page': transition.path});
    }
  },
  componentDidMount: function() {
    var GA_TRACKING_CODE = 'UA-xxxxx';
    ga('create', GA_TRACKING_CODE);
    ga('send', 'pageview');
  },
  render: function() {
    return (
      <div>
        <RouteHandler />
        <GAInitiailizer />
      </div>
    );
  }
});

var routes = (
  <Route path="/" handler={App} >
    <DefaultRoute handler={Home} />
    <Route name="cypher" path="/cypher" handler={Cypher} />
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler />, document.body);
});

module.exports = App;

Answer 2

这里的聚会有点晚了，但是反应路由器应该不需要特殊的代码来与 GTM 集成。只需将 GTM 脚本放到您的页面上（按照建议，紧接在开始 <body> 标记之后），然后让您的应用运行正常。

在 GTM 中为历史更改创建自定义触发器。

您可以在所有历史更改时触发它。

或仅在其中一些。例如，仅在您的生产主机名上。

然后为您的 google 分析（或其他）添加一个标签，并通过单击 "Fire On" 下的 "More" 并选择上面创建的触发器，将其配置为触发您的历史记录更改事件.

更改代码的 高级设置 以针对每个事件触发一次而不是针对每个页面触发一次也很重要。否则，代码只会在初始页面加载时触发。

React + 路由器 + Google 标签管理器

React + Router + Google Tag Manager

analytics

google-analytics

google-tag-manager

reactjs

react-router