Question

我已经花了一些时间在quickcypher.com上开发MVP。我想开始进行一些分析，它只是跟踪总访问次数很有用，但是当我尝试跟踪使用React路由器的网站上的不同网址时，情况就出现了。

我的方法是：设置一个GA标签，在某些页面上触发，使用触发器进行自定义＆＃34; Pageview＆＃34;事件。当事情发生时，我会将字段页面设置为＆＃34; / rap＆＃34;例如。我在＆＃34; componentDidMount＆＃34;中解雇了这个事件。我的每个视图的顶级组件的方法。使用调试器，我按预期看到事件发生了火灾，但对于我的生命，我无法通过GA来确认事件。当我简化标签以及＃34;所有页面＆＃34;时，GA按预期工作，因此我假设它与React有关。

有没有人成功实施过此类问题或遇到类似问题？我的方法都错了吗？希望得到一些指导......干杯！

Answer 1

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

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

您可以在所有历史记录更改中触发它。

或者只针对其中一些人。例如，仅在您的生产主机名上。

然后为您的Google Analytics（或其他）添加标记，并将其配置为触发历史记录更改事件，方法是点击“启动”下的“更多”并选择上面创建的触发器。

将标记的高级设置更改为每个事件触发一次，而不是每页触发一次也很重要。如果没有这个，标签只会在初始页面加载时触发。

Answer 2

这可能是由于您的Google Analytics分析帐户配置错误，但假设您可以将初始综合浏览量事件发送回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;

React + Router + Google Tag Manager

2 个答案: