Setup GA4

This blog show how to setup GA4 on top of the existing Google Analytics, will also configure the default page view event track.

Google Analytics Admin UI

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

Get Started GA4

Create Property

Install Data Stream

After create new GA4 property, base on the Setup Assistant you can install the default track.

Data Streams

At the data stream, you can configure to connect to your existing GA without doing any additional configuration.

For instance, the existing site is using below old Google Analytics to track the page view, but you can still go to below screen to configure to use 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 Configure use gtag

There's few scenarios with GA4 with existing google analytics, one is 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, and if you configure GA4 with existing google analytics, when you load the page you'll see following request sent as page view. You should be ble to see 2 request, one is collect?v=1, another is collect?v2, which one is old analytics and another is fire 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 following code, you should see 2 request 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 the old GA 4.

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

As you can see, this is how you can sent custom events to both GA4 and old Google Analytics.