I have React SPA when I use gtag to track users in Google Analytics. I am confused with data which I see in Real-Time Google Analytics. When app starts or user is routed to new react route I fired event like this to set correct page and log pageView
window.gtag('config', UA-123456789-1, {
groups: 'MYGROUP',
page_path: '/contacts',
})
When user click on button or make some interesting action I fire event like this
window.gtag('event', 'Some button click', {
sendTo: 'MYGROUP',
event_category: 'buttons on main page',
})
Many events is button click on page one and this click move user to another page (on this new page is fired gtag configure). When I watch events in Real-Time Analytics page view, pages is shown like one page delayed. For example gtag events flow and RealTime result
- gtag Configure page "/about" -> in GA is showing /about
- gtag Event "signIn click" (move user to sign in)
- gtag Configure page "/signin" -> in GA is showing /about
- gtag Event "contacts click" (move user to contacts)
- gtag Configure page "/contacts" -> in GA is showing /signIn
Do you know why this happens? Do I need log both events and pageView. I am not sure where this delay starts. In some cases I see for example first two pages correctly and third is delayed, sometimes is delayed from first event. Event and configure is fired close together.
Given it’s an SPA, you should manually send the pageview as prescribed here: https://developers.google.com/analytics/devguides/collection/gtagjs/pages#page_view_event.