React + Маршрутизатор + Менеджер Тегов Google

Я потратил немного времени на разработку MVP на quickcypher.com - ... Я хотел начать вводить некоторую аналитику, и она отлично работала для отслеживания общих посещений, но все пошло наперекосяк, когда я попытался отслеживать различные URL-адреса на моем сайте, который использует React Router.

мой подход был таков: настройте тег GA, который срабатывает на некоторых страницах, используя триггер для пользовательского события "pageview". Когда что-то срабатывало, я, например, устанавливал на странице поля "/rap". Я запускал мероприятие в метод "componentDidMount" компонента верхнего уровня для каждого из моих представлений. Используя отладчик, я увидел пожар события, как и ожидалось,но я не могу заставить GA признать это событие. GA работает так, как ожидалось, когда я упрощаю тег для запуска на "всех страницах", поэтому я предполагаю, что это имеет какое-то отношение к React.

кто-нибудь успешно реализовал это или столкнулся с аналогичными проблемами? Мой подход неверен? Надеясь на какое-то руководство...ура!

10
analytics google-analytics google-tag-manager react-router reactjs

2 ответов

немного поздно для вечеринки здесь, но маршрутизатору react не нужен специальный код для интеграции с GTM. Просто поместите скрипт GTM на свою страницу (сразу после открытия <body> тег, как рекомендуется), и пусть ваше приложение работает как обычно.

в GTM создайте пользовательский триггер для изменения истории.

GTM Trigger Example

вы можете запустить его на все изменения истории.

all history changes

или только на некоторых из них. Только на например, ваше рабочее имя хоста.

only on production

затем добавьте тег для Google analytics (или что-то еще) и настройте его для запуска события изменения истории, нажав "дополнительно" в разделе "огонь" и выбрав триггер, созданный выше.

GA Example

также важно изменить Дополнительные Параметры нашего тега для запуска один раз за событие, а не один раз на странице. Без этого тега будет срабатывать только при начальной загрузке страницы.

once per event

45

это может быть связано с неправильной конфигурацией вашей учетной записи google analytics, но, предполагая, что вы можете запустить начальное событие просмотра страниц обратно в GA, вот рецепт, который нажимает на react-router's 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;
6