Implementing Client-Side Waiting for Pageview Events in Google Analytics 4

Google Analytics 4

Implementing Client-Side Waiting for Pageview Events in Google Analytics 4

Posted by Amelia on 1 July 2022 at 3:06 pm
Hey, so I’ve just starting messing with Google Analytics 4 on a neat little community website I manage. One of the things we’re trying to do is track each time a QR Code on a physical flyer we’re distributing is scanned. Cool, right?

The QR Code url leads to a page that loads up gtag.js, fires off a pageview event with utm_ codes from the url, and then uses some nifty client-side javascript to redirect users to a 3rd party ticket sales site that, unfortunately, doesn’t support Google Analytics.

Managed to come up with the following page content:
```
    
    <script src="https://www.googletagmanager.com/gtag/js?id=<my_measurement_id>"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', '<my_measurement_id>');
    </script>
    <script>
        window.addEventListener("load", function () {
            window.location = "<my_redirect_url>"
        }, false);
    </script>
```
When I check out the Debug View page in the Google Analytics portal, I can see the pageview events and the page does actually redirect to the right place. But here’s the thing: I basically stumbled into making this work – a fair bit of trial, error and luck was involved. So, can I really trust that this reliable? Does it just happen to work on my machine while I’m testing it, or could this be a case of “works on my machine” syndrome where things fall apart once it’s out in the big bad world?

And if that’s a possibility, is there a “correct” or more reliable way to delay running the javascript till the pageview event has been sent?

I also have this nagging question – can client-side script “observe” events that are sent, or can we set a callback for when the pageview event has been sent?

And just tossing this out there… I’ve sort of made it work, but is there a better or simpler way to ensure a redirect only happens after the pageview event is sent? Open to any suggestions!
Alexander replied 1 year, 5 months ago 3 Members · 2 Replies
2 Replies

Elijah

Member
12 July 2022 at 6:34 pm

Sure, I totally understand the struggle of getting the hang of Google Analytics. But you seem to have got it figured out nicely. As you have found, the trick is to delay the redirection until after the page view event has been sent. This ensures that Google Analytics has a chance to record the activity properly.

In case you’re interested, DarrellT shared a helpful link to a similar issue. It’s worth checking out if you want to dive a little deeper into what’s going on.

So feel free to take a look and keep up with your investigation. Google Analytics can be tricky, but once you get the hang of it, it’s an incredibly powerful tool.

Keep going! You’re doing great.
Alexander

Member
17 November 2022 at 3:14 pm

Your code inserts the Google Tag Manager and fires off a pageview event, which is then captured by Google Analytics. Post this, it redirects users to another site. This method generally works in most cases, especially if you see those events firing off in the Google Analytics Debug View. However, the issue can arise from the fact that Google Analytics sends data asynchronously, which means it doesn’t wait for a response from the server before moving on to the next task.

In your case, the redirection might occur before the data is completely sent to Google Analytics and this could mean loss of some data. Unfortunately, Google Analytics doesn’t offer any out-of-the-box way to know if an event has been fully sent. One way around this is to use a JavaScript timer or delay to give Google Analytics some extra milliseconds or even a couple of seconds before the redirection occurs.

However, a foolproof way would be to set up server-side tracking, where your server sends the data to Google Analytics instead of relying on the client’s browser. But that would be more complex, requiring server-side setup and may be beyond immediate need.

Lastly, always ensure to test across different devices and network conditions to make sure your implementation works not just on your own device, but for users in different conditions.

Implementing Client-Side Waiting for Pageview Events in Google Analytics 4

Elijah

Alexander