React SPA - GTM Analytics React-Helmet Заголовок предыдущей страницы
Я использую Диспетчер тегов Google, чтобы отправлять события просмотра страниц в уровень данных для отслеживания Google Analytics. Это происходит в componentDidMount () (и иногда componentWillReceiveProps (), если я прислушиваюсь к изменениям параметра строки запроса с помощью свойства location с помощью withRouter).
Я использую реактивный шлем для динамического обновления моего заголовка и других тегов по мере изменения компонентов.
Я заметил проблему с неправильным заголовком страницы в Google Analytics. Часто отображается заголовок предыдущей страницы вместо той, на которой я сейчас нахожусь. Похоже, что react-шлем не обновляет тег до componentDidMount ().
Пример функции события просмотра страницы
Мой тег аналитики в GTM вызывается каждый раз, когда это событие помещается на уровень данных.
const firePageViewEvent = () => {
console.info("Pageview event fired (from tracking script)");
if (window && window.dataLayer) {
console.info("window and dataLayer exist, pushing pageview event.");
let dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'reactPageViewEvent'
});
} else {
console.info("window or dataLater does not exist, cannot push pageview event.");
}
};
Ответы 1
Я могу подтвердить, что включение функции в функцию setTimeOut () с задержкой 0 мс действительно работает, чтобы гарантировать, что событие будет отправлено только после того, как у response-шлема есть шанс сделать свое дело.
Это позволяет мне постоянно получать заголовок текущей страницы в Analytics.
См. Комментарий к проблеме github
Обновленная функция
const firePageViewEvent = () => {
setTimeout(() => {
console.info("Pageview event fired (from tracking script)");
if (window && window.dataLayer) {
console.info("window and dataLayer exist, pushing pageview event.");
let dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'reactPageViewEvent'
});
} else {
console.info("window or dataLater does not exist, cannot push pageview event.");
}
}, 0);
};эта проблема все еще существует ... github.com/nfl/react-helmet/issues/189! Давайте создадим dataLayer.push ({'event': 'pageTitleUpdated'} произойдет, когда это будет сделано. Или отправьте значения, которые будут использоваться GA, когда они доступны, и настройте GA для использования их вместо значений DOM по умолчанию.
Возможно, сейчас есть лучшее решение, но более года назад это был единственный обходной путь, который можно было найти.