Virtual pageviews tracking using gtag (google site tag) and GA4

by

Google introduced a new generation of google analytics ( aka Google Analytics v4) back in late 2020. Those that would like to use it can choose to do so in google analytics console – will likely be directed to a gtag snippet method of integration. Gtag stands for -> the global site tag.

The global site tag (gtag.js) is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform.

Let’s not mistake Gtag.js (the global site tag) with ga.js (google analytics site tag) or gtm.js (google tag manager). Confusing enough right?

Default gtag snippet you may grab from analytics admin might look something like this:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-H9CCTPLF12"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-H9CCTPLF12');
</script>

GTAG collects pageview on pageload

Something that wasn’t immediate obvious to me was that this new snippet of code above would automatically collect pageview on page load implicitly – without us asking it to.

You can open a browser dev console and search for following url: https://www.google-analytics.com/g/collect?v=2 to confirm this.

Implicit GTAG pageview collection

Im sure this is completely OK and fine with most setups.

Now for those of us who would like to be more precise & explicit with pageview trackinglike it happened to be in my edegcase, we can disable such behavior by adding { 'send_page_view': false } configuration, ex:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-H9CCTPLF12"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-H9CCTPLF12', { 'send_page_view': false });
</script>

GTAG virtual pageview tracking

Now towards more of the topic of our article, this example shows how to track virtual pageviews using gtag:

gtag('event', 'page_view', {
    page_title: document.title,
    page_location: window.location.href,
    page_path: window.location.pathname,
    send_to: 'G-H9CCTPLF12'
});

Thanks for reading

Leave a Comment