Setup GA4 with Existing Google Universal Analytics

Table of Contents

1. Introduction
2. Google Analytics Admin UI
3. Get Started with GA4
4. Create Property
5. Install Data Stream
6. Data Streams
7. Setup GA4 with Google Analytics
8. Old Google Analytics Configured with gtag
9. How to Send Custom Events to Both Old Google Analytics and GA4
10. Conclusion

Introduction

This blog shows how to set up GA4 on top of existing Google Analytics. It will also configure the default page view event tracking.

Google Analytics Admin UI

After logging in to Google Analytics, go to the Admin section and create a new property under your current site's account.

Get Started with GA4

Create Property

Install Data Stream

After creating a new GA4 property, based on the Setup Assistant, you can install the default tracking.

Data Streams

At the Data Streams section, you can configure it to connect to your existing Google Analytics without doing any additional configuration.

For instance, if the existing site is using the old Google Analytics code below to track the page view, you can still go to the screen below to configure GA4.

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
    ga('create', 'UA-{track id}', 'auto');
    
    ga('send', 'pageview');

Setup GA4 with Google Analytics

Old Google Analytics Configured with gtag

There are a few scenarios with GA4 and existing Google Analytics. One is when the existing GA is using gtag with Google Tag Manager.

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-133754662-2');

For this scenario, if you configure GA4 with existing Google Analytics, when you load the page you'll see the following requests sent as page views. You should be able to see two requests: one is collect?v=1 and another is collect?v=2. One is for the old Analytics and the other fires the new GA4 page view events.

How to Send Custom Events to Both Old Google Analytics and GA4

With the same configuration as above, if you run the following code, you should see two requests fire from your browser.

gtag('event', 'test click', { event_category: 'test section', 'event_label': 'test label', 'value': 5});

Check the collect?v=1, which is for the old Google Analytics:

v: 1
_v: j96
a: 1317303408
t: event
_s: 2
dl: http%3A%2F%2Flocalhost%2Fposts%2Fsetup-ga4-with-existing-universal-analytics
ul: en-us
de: UTF-8
dt: Setup%20GA4%20with%20existing%20Google%20Universal%20Analytics
sd: 24-bit
sr: 2560x1440
vp: 1351x391
je: 0
ec: test%20section
ea: test%20click1
el: test%20label
ev: 5
_u: SACAAUABAAAAAC~
jid: 493718282
gjid: 1617926160
cid: 560151159.1649313427
tid: UA-133754662-2
_gid: 448660023.1649313427
_r: 1
gtm: 2ou3u0
z: 918613138

Check the collect?v=2, which is for GA4:

v: 2
tid: G-LV51V3774K
gtm: 2oe3u0
_p: 1317303408
sr: 2560x1440
_z: ccd.AAB
ul: en-us
cid: 560151159.1649313427
_s: 3
dl: http://localhost/posts/setup-ga4-with-existing-universal-analytics
dr: http://localhost:3000/
dt: Setup GA4 with existing Google Universal Analytics
sid: 1649489401
sct: 1
seg: 1
en: test click1
_et: 6212
ep.event_category: test section
ep.event_label: test label
epn.value: 5

Conclusion

As you can see, this is how you can send custom events to both GA4 and old Google Analytics. By configuring GA4 alongside your existing Universal Analytics, you can track page views and custom events in both systems simultaneously without significant code changes.