Learn business growth with Google Analytics 4 › Forums › Google Analytics 4 › Dynamically sending custom events with GA4 and GTM using code › Reply To: Dynamically sending custom events with GA4 and GTM using code
-
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.