React + Маршрутизатор + Диспетчер тегов Google

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

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

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


reactjs react-router google-tag-manager google-analytics analytics
person SleepyProgrammer    schedule 07.04.2015    source источник

Ответы (2)


arrow_upward
76
arrow_downward

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

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

Пример триггера GTM

Вы можете активировать его для всех изменений истории.

все изменения истории

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

только в производстве

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

Пример GA

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

один раз за событие

person chrisguitarguy    schedule 31.05.2016
comment
Это должен быть принятый ответ. Просто и это работает. Если вам нужен более сложный пример с событиями и прочим, то это совсем другая история. - person kjonsson; 07.06.2016
comment
@doublecheeseburger, вы также можете проводить мероприятия в GTM, но это может стать довольно громоздким. - person chrisguitarguy; 05.07.2016
comment
@chrisguitarguy В истории изменений реакция переходит на сервер (ajax) и обновляет страницу после того, как результаты возвращаются с сервера. Но перед этим срабатывает изменение истории и выполняется код тега. Как мы можем справиться с такой ситуацией и дождаться, пока реакция обновит страницу? - person Waqas Malik; 13.07.2017
comment
@WaqasMalik Я бы рекомендовал использовать уровень данных GTM (просто глобальный массив) и добавить пользовательское событие, которое можно прослушать, чтобы запустить GA (или любой другой тег) в GTM. - person chrisguitarguy; 13.09.2017
comment
Кажется, это не срабатывает при загрузке страницы. Я считаю, что и все страницы, и изменение истории должны быть включены. - person Gabriel R.; 17.04.2019

arrow_upward
7
arrow_downward

Это может быть связано с неправильной настройкой вашей учетной записи Google Analytics, но если предположить, что вы можете запустить начальное событие просмотра страницы обратно в GA, вот рецепт, который подключается к хуку willTransitionTo react-router. Он также использует 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;
person pxwise    schedule 29.04.2015
comment
У меня не работает. Метод не запускается на маршрутизаторе. Я использую ReactRouter, что должно быть и в вашем случае. Этот метод устарел? - person sachinjain024; 07.03.2016
comment
Да. React Router устарел .run начиная с React Router 1.0.0! github.com/reactjs/react-router/ blob/master/upgrade-guides/ - person Edoardo L'Astorina; 24.03.2016