google-analytics - 如何使 React 应用程序 SEO 友好

Question

如果我想使用 Google 分析并同时在 React 中使我的网站 SEO 友好，最好的方法是什么？

目前我使用 react-router 和 flux pattern 来更改路由，然后在 componentDidMount 中触发一个操作，通过 ajax 加载我的数据，然后更新发出更改的商店，最后我重新渲染受影响的组件。在 ajax 加载期间，我发送一个事件，以便我的商店知道 ajax 正在加载并在我的组件中呈现一个微调器。

我注意到，当我将我的跟踪数据发送到 Google 时，ajax 尚未完成加载，我只发送新页面 URL 而不是标题或我通过 ajax 加载的任何其他数据(我想这对 SEO 来说很糟糕这对我的 GA 数据绝对不利)。

这是我的 GA 设置(我使用 react-ga):

Router.run(routes, Router.HistoryLocation, function(Handler, state) {
    ga.pageview(state.pathname);
    React.render(<Handler />, document.body);
});

典型的组件设置(允许我根据 URL 呈现正确的数据):

componentDidMount: function() {
    ItemStore.addChangeListener(this._onChange);

    if(itemSlug) {
        ItemActions.loadItemBySlug(this.props.slug);
    }
}

如果可能的话，我希望能够进行单点 GA 跟踪。我还希望 SEO 处理对于页面是正确的:

• 页面标题
• 原始数据
• H1
• 等...

解决这个问题的最佳方法是什么？

我应该为此使用 react-router 中的 willTransitionTo 选项吗？ (如果我选择此解决方案，是否可以使用加载微调器？)

statics: {
    willTransitionTo: function (transition, params, query, callback) {
        // LOAD AJAX HERE ?
        callback();
    }
}

我如何以正确的方式处理 willTransistionTo 解决方案，似乎找不到任何相关的好例子？

我应该添加更多代码，还是清楚我要实现的目标？

Answer 1

在商店获取新数据并呈现后触发 ga.pageview。