Dynamically sending custom events with GA4 and GTM using code

Google Analytics 4

Dynamically sending custom events with GA4 and GTM using code

Posted by Bailey on 30 December 2022 at 9:16 pm
I have a web application that includes multiple Single Page Application (SPA) style elements or widgets. At present, I utilize the “ga” function from Universal Analytics to dynamically dispatch events to Google Analytics as shown beneath:
```
    ga(
      'myTrackedElement.send',
      'event',
      'Unique SPA',
      'Action Performed',
    );
```
Now, I have switched to Google Analytics 4 utilizing Google Tag Manager via the GA4 Config tag.

Could you guide me to programmatically send custom events using my current Google Tag Manager and GA4 configuration?
Noah replied 1 year, 5 months ago 2 Members · 1 Reply
1 Reply

Noah

Member
2 June 2023 at 8:35 pm

To programmatically send custom events using Google Tag Manager (GTM) and Google Analytics 4 (GA4) configuration, you can follow these steps:

1. GTM Setup:
– Define custom variables in GTM to capture the event details. You can create variables with names like event_action, event_category, event_label, and event_value to mimic the previous GA setup.
– Set up a trigger in GTM to fire when events with a specific name occur. Choose the “Custom Event” type and specify the event name as “site_event”.

2. Tag Setup:
– Create a GTM tag that captures events with the specified name.
– Configure the tag to use the GA4 tag by selecting it in the configuration options.
– Assign the trigger you created (site_event) to the tag.
– Specify the event name as “site_event” in the tag settings.
– Set the event parameters as follows:
– Parameter Name: event_category, event_action, event_label, etc.
– Value: Select the corresponding variables for the values. These variables should be in the format {{event_category}}, {{event_action}}, etc.

3. Folder Organization:
– To keep things organized, consider placing all the GTM elements related to tracking custom events in a dedicated folder.

4. GA4 Setup:
– By default, GA4 won’t display event parameters unless you configure them.
– Access the GA4 Admin section and go to Property > Custom Definitions > Custom Dimensions.
– Create dimensions for event_category, event_action, event_label, etc.
– Set the scope to “event”.
– Specify the Dimension Name, such as event_category.
– Map the Event Parameter to the corresponding event_category, event_action, etc.

5. Code Implementation:
– Within your web application’s codebase, there is no additional setup required beyond the default GTM code.
– To send a custom event to GA4 using the GTM tag, use the dataLayer.push() method.
– Example code:

`javascript
dataLayer.push({
event: ‘site_event’,
event_category: ‘Program Explorer’,
event_action: ‘Course Popup Open’,
event_label: courseNumber,
});
`
– You can trigger this code when a user performs a specific action, like clicking a button or interacting in a way that you want to track.
– You can omit parameters that are not needed. For instance, if you don’t require event_value, you can leave it out.

Remember to test and validate your implementation to ensure that the custom events are being captured accurately in GA4.

Dynamically sending custom events with GA4 and GTM using code

Noah