24

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

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

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

4

2 回答 2

78

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

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

GTM 触发器示例

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

所有历史变化

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

仅用于生产

然后为您的谷歌分析（或其他）添加一个标签，并通过单击“触发”下的“更多”并选择上面创建的触发器将其配置为触发您的历史记录更改事件。

遗传算法示例

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

每个事件一次

于 2016-05-31T21:10:59.883 回答
7

这可能是由于您的谷歌分析帐户配置错误，但假设您可以将初始页面浏览事件触发回 GA，这里有一个利用 react-routerwillTransitionTo钩子的配方。它还使用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;
于 2015-04-29T00:42:41.283 回答