React + Router + Диспетчер тегов Google

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

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

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

Ответ 1

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

В GTM создайте настраиваемый триггер для изменения истории.

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

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

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

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

Ответ 2

Это может быть связано с неправильной настройкой вашей учетной записи Google Analytics, но при условии, что вы можете запустить исходное событие просмотра страницы в GA, вот рецепт, который вступает в реакцию-маршрутизатор 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;

Ответ 3

В принятом ответе говорится, что мы должны удалить скрипт GTM после тега body. Но у GTM также есть скрипт, который нужно добавить в заголовок тега. Требуются ли оба для этого решения для работы?