我花了一些时间在quickcypher.com上开发MVP。我想开始进行一些分析,它只是跟踪总访问次数很有用,但是当我尝试跟踪使用React Router的网站上的不同网址时,情况就出现了问题。
我的方法是:设置一个GA标签,在某些页面上触发,使用触发器进行自定义“pageview”事件。当事情发生时,我会将字段页面设置为“/ rap”。我在每个视图的顶级组件的“componentDidMount”方法中触发事件。使用调试器,我按预期看到事件发生了火灾,但对于我的生命,我无法让GA承认此事件。当我简化标签以触发“所有页面”时,GA按预期工作,所以我假设它与React有关。
有没有人成功实现过这个或遇到类似的问题?我的方法都错了吗?希望得到一些指导......干杯!
这可能是由于您的谷歌分析帐户配置错误,但假设您可以将初始网页浏览事件发送回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;