У меня есть тег Pageview в Диспетчере тегов Google, который отслеживает просмотры страниц SPA, идентичные тем, которые описаны в этом руководстве. В основном это Универсальная аналитика со связанным идентификатором Google Analytics, который запускается в История изменений (в какой-то момент триггер All Pages также был добавлен без успеха).
В моем текущем приложении GTM пропускает тег Pageview при начальных просмотрах страниц на всех маршрутах, у которых нет асинхронных преобразователей. Обычно маршруты иногда срабатывают по методу (1 из 5 раз), это может немного различаться в зависимости от условий (кэшированные или неактивные, localhost vs production).
На маршрутах, у которых есть резольверы с длинной длительностью ( > 1s) Pageview, всегда запускается в начальных просмотрах страниц (5 из 5 раз).
Pageview запускается нормально на всех маршрутах после инициализации приложения (pushState).
Это поведение было подтверждено консолью отладки GTM и мониторингом в реальном времени GA.
Настройка кажется рекомендуемой, фрагмент GTM загружен в <head>, Angular 2 приложение загружается в конце <body>.
<html>
<head>
<script>/* Google Tag Manager snippet */</script>
...
</head>
<body my-app>
...
<script src="my-app-bundle.js"></script>
</body>
</html>
И Angular 2 загружается как обычно:
platformBrowserDynamic().bootstrapModule(MyAppModule);
Я попытался переместить фрагмент GTM вокруг, до и после my-app-bundle.js, даже заменив его синхронным:
<script>
window.dataLayer = ...
</script>
<script src="https://www.googletagmanager.com/gtm.js?id=..."></script>
Не было никакого различия со стандартным фрагментом.
Я нашел методом проб и ошибок, что Pageviews начинает нормально работать при начальных просмотрах страниц, если приложение загружается со значительной задержкой, 200-1000 мс (сначала казалось, что DOMContentLoaded делает трюк, но задержка была 't достаточно):
setTimeout(() => {
platformBrowserDynamic().bootstrapModule(MyAppModule);
}, 1000);
Я надеюсь, что эта проблема знакома экспертам, которые сделали GTM с помощью SPA/ Angular 2 приложений. К сожалению, я не могу предоставить MCVE для этого случая, но я считаю, что он может быть реплицирован с любым приложением Angular 2 (2.3.1) с маршрутизацией и учетной записью Диспетчера тегов Google.
Обычно Angular 2 приложения могут быть безопасно загружены в конце <body>.
Что там происходит и как отслеживать просмотры страниц нужно надлежащим образом обрабатывать с помощью GTM без условий гонки?
UPDATE. При переключении с GTM на использование GA напрямую с помощью
router.events.subscribe(e => {
if (e instanceof NavigationEnd)
ga('send', 'pageview', location.pathname);
})
все работает нормально на начальном и последующем просмотрах страниц без условий гонки.
ОБНОВЛЕНИЕ 2:
Здесь в начале загружается временная шкала того, как она выглядит в случае успеха с долговременным распознавателем маршрута, gtm.js и main.bundle.js (это не имеет значения, в каком порядке), analytics.js (analytics_debug.js, когда включен GA Debugger) загружается, когда завершается настройка распознавателя маршрута и тэг Pageview, то есть после ~ 10 секунд:
