How to create custom event triggers in Google Tag Manager

Author:

Creating custom event triggers in Google Tag Manager (GTM) lets you track specific actions on your website, such as button clicks, form submissions, video interactions, and more. Custom event triggers are particularly useful when you need to track interactions that don’t fall under GTM’s pre-configured event types. Here’s a step-by-step guide to creating custom event triggers in GTM:

1. Understand What Custom Events Are

A custom event trigger in GTM is activated by an event that you define in your website’s code, which is then detected by GTM. Typically, custom events are useful when:

  • You have a JavaScript-based interaction on your website, like an AJAX form submission.
  • You want to track specific events that don’t have a direct HTML element trigger.

For instance, if your site has a custom JavaScript function that fires when a user scrolls to the bottom of the page, you can set up a custom event in GTM to capture that action.

2. Set Up Your Custom Event in JavaScript

To use a custom event, you need to send data to GTM when the action happens. This is done using dataLayer.push(), which sends an event to GTM’s data layer. Here’s an example:

javascript
// Example: Pushing a custom event to the GTM data layer
dataLayer.push({
'event': 'customEventName' // Replace with your custom event name
// Optional: Add other data you want to track, e.g., 'category': 'Video', 'action': 'Play'
});

In this example:

  • The event key is required and represents the custom event name (e.g., “customEventName”).
  • You can add other key-value pairs to pass more data about the event.

3. Creating a Custom Event Trigger in GTM

Now that your event is set to be captured in GTM, you can configure a custom event trigger:

  1. Log in to GTM and select the appropriate container.
  2. In the left-hand menu, go to Triggers and click on New.
  3. Name the trigger descriptively, so you remember what it’s for (e.g., “Scroll Bottom Custom Event”).
  4. Under Trigger Configuration, select Custom Event.
  5. In the Event Name field, type the exact name of your custom event as defined in the dataLayer.push() (e.g., “customEventName”).
  6. Trigger Type: Choose whether the trigger should fire on All Custom Events (any custom event in your data layer) or Some Custom Events (only events that match specific conditions).

4. Add Conditions for Specific Events (Optional)

If you want to fire the trigger only when certain conditions are met, choose Some Custom Events and define the conditions. For instance:

  • If you want the trigger to fire only for specific page views, add a condition based on the Page URL or Page Path.
  • Use additional data layer variables to refine the conditions. For instance, if your event includes a category and action key, you can add conditions to fire the trigger only if these values match specific criteria.

Example condition: Event equals customEventName and category equals Video.

5. Create a Tag to Use the Custom Event Trigger

With your custom event trigger ready, you can now attach it to a tag:

  1. Go to the Tags section and click New.
  2. Choose the tag type you want, such as Google Analytics: GA4 Event or Universal Analytics Event.
  3. Configure the tag with the appropriate tracking parameters:
    • For Google Analytics, you might set the Event Category, Event Action, and Event Label fields using values from your custom event.
  4. Under Triggering, select the custom event trigger you created.

6. Preview and Test Your Custom Event Trigger

Testing is essential to ensure that your custom event trigger is working correctly:

  1. Click Preview in GTM to enter Debug mode.
  2. Open your website in the debug window that appears.
  3. Perform the action on your site that should trigger the custom event (e.g., scroll to the bottom, click a button).
  4. In the GTM debug panel, go to the Events section and look for your custom event name. This indicates that GTM has detected the event.
  5. Check that the tag associated with your custom event trigger fired correctly. If it did, the tag will appear under the Tags Fired section for that event.

7. Publish Your Container

Once you’ve tested and confirmed that everything is working as expected, publish your container:

  1. In GTM, click on Submit.
  2. Add a version name and description if needed, then click Publish.

8. Verify in Analytics (If Applicable)

If you’ve set up your tag to send data to Google Analytics (or another tool), verify that the data is coming through in that platform:

  • For GA4: Go to the Realtime or Events report in GA4 to check for your custom events.
  • For Universal Analytics: Go to Behavior > Events > Top Events to check if your event category, action, or label data appears.

Example Use Cases for Custom Event Triggers

Here are a few scenarios where custom event triggers are helpful:

  • Tracking Video Interactions: Push custom events into the data layer when users start, pause, or complete a video. Use these events to fire tags that track video engagement.
  • Tracking Scroll Depth: If your website uses JavaScript to detect when users reach certain scroll points, you can push a custom event into the data layer when a user reaches 50% or 100% of the page.
  • Tracking Dynamic Content Interactions: If users interact with AJAX-driven content or custom modals, use custom events to track these interactions.

Tips for Using Custom Event Triggers Effectively

  • Naming Consistency: Use clear, consistent naming conventions for your custom events in the dataLayer.push() method and GTM trigger to avoid any confusion.
  • Event Parameters: Include additional parameters in the data layer whenever possible (e.g., category, action, label) to make tracking easier and more detailed.
  • Regular Testing: Each time you change code on your site or modify GTM settings, test your custom events to ensure they still work as expected.

By following these steps, you’ll be able to effectively create and manage custom event triggers in Google Tag Manager, allowing you to track a wide range of user interactions and optimize your analytics and marketing strategy accordingly.

Categories: Digital Marketing