React SPA - GTM Analytics React-Helmet Предыдущая страница Название страницы

Question

Я использую Диспетчер тегов Google, чтобы передать события просмотра страниц на уровень данных для отслеживания Google Analytics. Это происходит в componentDidMount () (и иногда componentWillReceiveProps(), если я слушаю изменения параметра строки запроса с помощью свойства location с помощью withRouter).

Я использую реагирующий шлем для динамического обновления заголовка и других тегов при изменении компонентов.

Я заметил проблему с неправильным заголовком страницы в Google Analytics. Он часто показывает заголовок предыдущей страницы вместо того, на котором я сейчас нахожусь. Похоже, что реагирующий шлем не обновляет тег до тех пор, пока после componentDidMount ().

Пример функции просмотра страницы

Мой тег аналитики в GTM вызывается каждый раз, когда это событие помещается на уровень данных

const firePageViewEvent = () => {
      console.log("Pageview event fired (from tracking script)");

      if (window && window.dataLayer) {
          console.log("window and dataLayer exist, pushing pageview event.");
          let dataLayer = window.dataLayer || [];
          dataLayer.push({
              'event': 'reactPageViewEvent'
          });
      } else {
          console.log("window or dataLater does not exist, cannot push pageview event.");
      }
};

Answer 1

Я могу подтвердить, что перенос функции в функцию setTimeOut() с задержкой 0 мс действительно работает, чтобы гарантировать, что событие будет выдвинуто только после того, как реагирующий шлем сможет выполнить свою задачу.

Это позволяет мне постоянно получать заголовок текущей страницы в Google Analytics.

См. Комментарий к проблеме GitHub

Обновленная функция

const firePageViewEvent = () => {
    setTimeout(() => {
        console.log("Pageview event fired (from tracking script)");

        if (window && window.dataLayer) {
            console.log("window and dataLayer exist, pushing pageview event.");
            let dataLayer = window.dataLayer || [];
            dataLayer.push({
                'event': 'reactPageViewEvent'
            });
        } else {
            console.log("window or dataLater does not exist, cannot push pageview event.");
        }
    }, 0);
};