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

  • 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.