Implementing Google Analytics 4(GA4) on Website Using Google Tag Manager(GTM)

Wonje Janganalytics • Tue May 14 2024 21:49

GA4 Basic

1. Creation of GA4 Account and Property

Enter your account name into the "Account name" field and click Next button.
Input your property name into the "Property name" field and set time zone and currency.
Configure Business details.
Choose the baseline report in the business objectives section.
Create your data stream in Admin > Data collection and modification > Data stream to collect data from your website.

2. Recommended Settings

1) /Admin/Data collection and modification/Data collection

Utilize Google Signal data collection for deeper insights into your users.

2) /Admin/Data collection and modification/Data retention

Set user and event data retention to 14 months.

3) /Admin/Data collection and modification/Data filter

Activate data filter for internal traffic if you want to ignore access from yourself or manager

4) /Admin/Data collection and modification/Data stream

Configure useful options in the data stream tab.

Ensure enhanced measurement(form interaction not recommended) for measuring events such as page views, scrolls, outbound clicks, etc.

Configure your domain to specify your domains for cross-domain measurement
Internal traffic allows your website to ignore events from specific IP(you should active this in data filter tab)
List unwanted referrals to prevent websites such as PayPal, from being recorded on GA4. For example, if a user navigates to PayPal to buy something and the session expires, once the checkout is completed and the user returns to your website, PayPal will not be recorded as a referral.

3. Types of Events

Automatically tracked events(e.g. first visit, session start, user engagement).
Enhanced measurement events(e.g. page view, scroll, outboard clicks, site search, etc...).
Recommended events that help you measure additional features and behavior.
Custom events.

Triggering Tags in Google Tag Manger(GTM)

In this part, assuming you already have GTM container set up.

1. How Events are Detected and Recorded in GA4

When user explore your website, events are generated which can be automatically pushed to the data layer or manually implemented by developer(e.g. custom event, recommended event). If you set triggers for these events in Google Tag Manager(GTM) with a Google Analytics 4(GA4) event tag, it will trigger to fire, and the data will be sent to GA4.

2. Setup

1) Variables

First, configure built-in variables to deal with events, such as "Click Classes" variable, which can be used to specify element group. Second, create user-define variables such as the measurement ID for GA4.

2) Triggers

(1) Built-in Triggers

Set the triggers to fire at all events or specific events using variables to specify event.

(2) Custom trigger

Similar to built-in triggers but require setting specific event names received from your site.

3) Tags

In GTM, there is several types of tags. In this section the Google Tag and Google Analytics: GA4 Event of Google Analytics feature are used.

(1) Google Tag

Enter your measurement ID to "Tag ID" field.

When to Use?
Use this if you want a unified approach to manage tags for multiple Google products. And it is ideal for websites that need to implement multiple Google services(e.g. GA4, Google Ads) and want a simplified tag management process.
* pre-defined triggers such as All Pages, Consent Initialization and Initialization

(2) Google Analytics: GA4 Event

Enter Measurement ID to "Measurement ID" field. Enter your event name to "Event Parameter" field and set the value field(e.g. variables).

When to Use?
Use this if your primary focus is tracking specific events in a GA4 property. And it is ideal for detailed event tracking and sending specific data to GA4, prociding more granular control over event parameters and configuration
* triggers you create

3. Example of Custom Event Tracking

In this section, we implement custom event(e.g. 'upload_post') and track it using the Google Analytics: GA4 Event tag.

1) Website

/app/write/page.js

1/* ... */
2const handleUploadPost = async () => {
3  /* ... */
4  window.dataLayer.push({
5    event: "upload_post",
6    postId: resData._id,
7  });
8}

2) GTM

(1) Create data layer variable for the parameter

(1) Create custom trigger

Enter the event name that you pushed to data layer into "Event name" field

(2) Create tag

Enter the names you want to display in the GA4 report into "Event Name" and "Event Parameter" fields, and set the "Value" field to the variable what you created

(3) Check the preview to verify that GTM detects the event and the parameter received.

(4) Check if the custom event is received in GA4 using the debug view in GA4

* To create a custom dimension for the parameter, set the dimension in [admin - custom definition - create custom dimension].

TYPeee