React + Router + Google Tag Manager

Question

React + Router + Google Tag Manager

Sle*_*mer 19 analytics google-analytics google-tag-manager reactjs react-router

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

我的方法是:设置一个GA标签,在某些页面上触发,使用触发器进行自定义"pageview"事件.当事情发生时,我会将字段页面设置为"/ rap".我在每个视图的顶级组件的"componentDidMount"方法中触发事件.使用调试器,我按预期看到事件发生了火灾,但对于我的生命,我无法让GA承认此事件.当我简化标签以触发"所有页面"时,GA按预期工作,所以我假设它与React有关.

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

Answer 1

chr*_*guy 61

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

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

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

或者仅限于其中一些.例如,仅在您的生产主机名上.

然后为您的Google分析(或其他)添加标记,并通过点击"开启"下的"更多"并选择上面创建的触发器,将其配置为触发历史记录更改事件.

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

这似乎不会在页面加载时触发。我认为所有页面和历史记录更改都需要启用。 (2认同)

Answer 2

pxw*_*ise 7

这可能是由于您的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;

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，10 月前
查看次数：	19629 次
最近记录：	6 年，8 月前