Send a new config to gtag when a new "page" is loaded in an SPA does not show the new path in realtime analytics

Question

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.

Answer 1

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.