GTM losowo pomija początkową odsłonę w aplikacji pojedynczej strony

Mam tag w Menedżerze tagów Google, który śledzi odsłony SPA, identyczne z opisanym w this guide. Zasadniczo jest to Universal Analytics z połączonym identyfikatorem Google Analytics, który jest uruchamiany na Historia Zmiana (w pewnym momencie All Pages wyzwalacz został również dodany bez powodzenia).GTM losowo pomija początkową odsłonę w aplikacji pojedynczej strony

W mojej bieżącej aplikacji GTM pomija tag Pageview przy początkowych odsłonach na wszystkich trasach, które nie mają rozpoznawania asynchronicznego. Zwykle trasy uruchamiają tag czasami (1 z 5 razy), może się to nieco różnić w zależności od warunków (buforowany vs uncached, localhost vs production).

Na trasach, które mają przeliczniki o długim czasie trwania (> 1s), tag Pageview jest zawsze uruchamiany przy początkowych odsłonach stron (5 z 5 razy).

Pageview tag jest uruchamiany normalnie na wszystkich trasach po inicjalizacji aplikacji (pushState).

To zachowanie zostało potwierdzone za pomocą konsoli debugowania GTM i monitorowania w czasie rzeczywistym GA.

Instalacja wydaje się być zalecana, GTM snippet jest załadowany w <head>, aplikacja Angular 2 jest ładowana pod koniec <body>.

<html> 
    <head> 
    <script>/* Google Tag Manager snippet */</script> 
    ... 
    </head> 

    <body my-app> 
    ... 
    <script src="my-app-bundle.js"></script> 
    </body> 
</html>

i kątowa 2 bootstrapped jak zwykle:

platformBrowserDynamic().bootstrapModule(MyAppModule);

Próbowałem przenieść GTM snippet dookoła, przed i po my-app-bundle.js, nawet zastąpić go synchroniczny:

<script> 
    window.dataLayer = ... 
</script> 
<script src="https://www.googletagmanager.com/gtm.js?id=..."></script>

Nie było żadnej różnicy z urywkiem domyślnym.

Znalazłem metodą prób i błędów, które Pageviews zaczyna działać normalnie na początkowych odsłon jeśli aplikacja jest bootstrapped ze znacznym opóźnieniem, 200-1000ms (wydawało na pierwszy DOMContentLoaded załatwia sprawę ale opóźnienie nie była na tyle):

setTimeout(() => { 
    platformBrowserDynamic().bootstrapModule(MyAppModule); 
}, 1000);

mam nadzieję, że ten problem jest znany ekspertów, którzy zrobiłem GTM ze SPA/kątowe 2 zastosowań. Niestety, nie mogę dostarczyć MCVE dla tego przypadku, ale uważam, że można go zreplikować za pomocą dowolnej aplikacji Angular 2 (2.3.1) z routingiem i kontem Menedżera tagów Google.

Zazwyczaj Angular 2 aplikacje mogą być bezpiecznie bootstrapowane pod koniec <body>.

Co się tam dzieje i jak należy prawidłowo monitorować odsłonę strony za pomocą GTM bez warunków wyścigu?

UPDATE: Podczas przełączania z GTM użyciem GA bezpośrednio z

router.events.subscribe(e => { 
    if (e instanceof NavigationEnd) 
    ga('send', 'pageview', location.pathname); 
})

wszystko działa poprawnie na początkowych i kolejnych odsłon bez żadnych warunków wyścigowych.

UPDATE 2:

Oto kalendarium, jak to wygląda w przypadku sukcesu z długo działającą resolverowi trasy, gtm.js i main.bundle.js są ładowane na początku (nie ma znaczenia, w jakiej kolejności), analytics.js (analytics_debug.js kiedy GA Debugger jest włączony) jest ładowany podczas rozpoznawania nazw trasa kończy i Pageview tag zostanie uruchomiony, to znaczy po ~ 10s:

Źródło

2017-01-14 estus

Nie jestem pewien, czy pomogłoby to w tym przypadku; ale przycisk logowania google musi być ręcznie renderowany w NgAfterViewInit z powodu bardzo podobnego problemu. Czy istnieje funkcja ręczna, którą można wywołać w tej bibliotece, aby wywołać pożądane zachowanie? – BradleyDotNET

@BradleyDotNET Niestety, nie. Wygląda na to, że aplikacja A2 powinna być dostosowana do cyklu życia GTM, a nie odwrotnie (obecnie wygląda na to, że aplikacja powinna się załadować do okna 'load', aby to pasowało). – estus

Jak zasugerował @kemsky, cykl życia GTM jest powiązany z wewnętrznym wydarzeniem gtm.load, co dzieje się w oknie onload. Tak więc DOMContentLoaded może być za wcześnie, aby się załadować.

Biorąc pod uwagę, że skrypt GTM został załadowany przed skryptu SPA,

window.addEventListener('load',() => { 
    platformBrowserDynamic().bootstrapModule(MyAppModule); 
});

zwrotna zostanie uruchomiony, gdy GTM jest gotowy do odbierania zdarzeń historia zmian i nie powinno być żadnych warunków wyścigowych.

Źródło

2017-01-29 06:55:33 estus

Ale to opóźni startup aplikacji. Jakikolwiek sposób naprawić to bez kary za wydajność? – hex

@ hex Myślę, że tak czy owak. Innym sposobem byłoby włamanie kodu źródłowego GTM, co nie jest opcją. Z mojego doświadczenia wynika, że opóźnienie było znikome (musiałem przełączyć się na GA, aby w jakikolwiek sposób uniknąć nadmiaru GTM). Możesz zaktualizować swoje pomiary, jeśli będziesz mieć problemy z wydajnością z powodu 'window.addEventListener ('load' ...)'. – estus

It lo oks jak skrypty analityczne są ładowane z <script async=true>:

j.async = true; lub a.async = 1;

Spróbuj usunąć async i sprawdź, czy to pomaga.

Źródło

2017-01-22 22:08:14 kemsky

Było już wspomniane w pytaniu, "wymień go nawet na synchroniczne:". – estus

Próbowałeś z 'gtm.js', ale w rzeczywistości' gtm.js' ładuje 'analytics.js' i jest również załadowany asynchronicznie. wygląda na to, że nie powinieneś używać gtm ani używać zdarzenia 'gtm.load' do uruchamiania aplikacji. – kemsky

Nie sądzę, że tak jest. Trudno uwierzyć, że GTM jest tak głupi. Zaktualizowałem pytanie za pomocą zrzutu ekranu, który potwierdza, że tak nie jest. GTM ładuje analytics.js na żądanie. Problem nie polega na tym, że GA nie jest załadowany, ale tag nie jest uruchamiany (jest widoczny na pasku debugowania GTM). – estus

Można zmienić spust swojego odsłon tagu UA od zwykłego „odsłona” i trzymać się niestandardowego zdarzenia opalane na NavigationEnd

router.events.subscribe(e => { 
    if (e instanceof NavigationEnd) { 
    dataLayer = window.dataL 
    dataLayer.push({'event':'custom pageview event'}); 
    } 
})

Źródło

2018-02-19 09:05:48

GTM losowo pomija początkową odsłonę w aplikacji pojedynczej strony

Odpowiedz

Powiązane problemy