How to create a custom-event trigger in Google Tag Manager

Introduction

Google Tag Manager (GTM) supports custom triggers that fire tags in response to specific website events. Custom events are useful when standard click or form-submission tracking is not enough and tracking needs to follow JavaScript events on the website.

For example, custom events can track specific button clicks, video views, scroll depth or other website actions.

Steps to set up a custom-event trigger

Step 1: Send a custom event from JavaScript

To use a custom event, make sure your website sends it through dataLayer.push.

Example JavaScript that sends a custom event:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'customEventName',  // Custom event name
  'category': 'Button Click',
  'action': 'Click',
  'label': 'Download PDF'
});

Important: customEventName is the event name to use in the trigger settings.

Step 2: Create a custom-event trigger in GTM

  1. Open the tab "Triggers" and click "New".
  2. Select "Custom Event".
  3. Under Event name, enter the event name sent by JavaScript, for example: customEventName).
  4. Choose whether the trigger should fire on "All Custom Events" (all events) or "Some Custom Events" (selected events only).
  5. For selected events, add a condition such as:
    • Event name equals customEventName
    • Category contains Button Click
  6. Click "Save".

Step 3: Create a tag that uses the trigger

  1. Open the tab "Tags" and click "New".
  2. Choose the tag type, for example:
    • Google Analytics: GA4 Event to send data to Google Analytics.
    • Facebook Pixel – Custom Event for Facebook tracking.
  3. For Google Analytics 4, configure the event as follows:
    • Event Name: {{Event}}
    • Event Parameters: Add the data sent through the dataLayer, such as category, action, and label.
  4. Under Triggering, select the trigger you created in the previous step.
  5. Click "Save".

Step 4: Test and publish

  1. Click "Preview" to check that the trigger works correctly.
  2. Trigger the event on your website, for example by clicking the button that runs the dataLayer.push).
  3. In GTM debug mode, check whether the event appears under "Events".
  4. If everything works correctly, click "Submit" and then "Publish" to apply the change.

What if the event does not fire?

Check the data layer: Open the Console in Chrome DevTools and enter:

console.log(window.dataLayer);

Check whether your event appears in the list.

Check the trigger in GTM Preview: Make sure the event appears and the data-layer values are sent correctly.

Check that the JavaScript runs correctly: Check that the code runs at the intended moment, such as when a button is clicked.

Back to top ↑