Business Benefits
Track browser events not currently supported by GTM’s default triggers.
Create a new Custom HTML tag in Google Tag Manager.
Navigate to Tags > New > Tag Configuration, and select Custom HTML as the tag type in the Google Tag Manager container.
Add the listener code into the Custom HTML tag.
Add the following code into the tag:
```1. Change `'submit'` on the `var event = 'submit';` line to the browser event you want to listen to. See the [Mozilla Developer Network documentation](https://developer.mozilla.org/en-US/docs/Web/Events) for a list of potential browser events.
2. In the `callback` function, replace the content with whatever you want to do once the event has been registered by the browser. For example, the code in the example above checks if the submitted form had the ID `contact`, in which case a `dataLayer.push()` call is done with details about the event.
## Add a *Page View* trigger to the tag to ensure the Custom HTML tag fires as early as possible.
Add a condition to the trigger if you only want to listen to the custom events on specific pages. For example, in the trigger below, the custom `'submit'` event is listened to only on pages where the URL contains `/contact-us/`.
You can also add the listener directly to the element rather than to the `document` node. In this case, you might want to change the ***Custom HTML*** tag to trigger on ***DOM Ready***, ***Window Loaded***, or other triggers if the element is added dynamically to the page.
## Create *Custom Event* triggers and variables to work with the custom event listener.
1. Navigate to ***Triggers*** > ***New*** > ***Trigger Configuration***, and select ***Custom Event*** as the trigger type.
2. Set the ***Event Name*** field to what you push into `dataLayer` in the callback. For example, following the example of the listener code, it would need to be set to `custom_submit`.
3. To create ***Data Layer*** variables for the other keys pushed into `dataLayer`, navigate to ***Variables*** > ***New*** > ***Variable Configuration***, and select ***Data Layer*** as the variable type.
4. Set the ***Data Layer Variable Name*** to the key pushed into `dataLayer` in the callback. For example, following the example from Step 2, it would need to be set to `formId`.
## Add the triggers and variables to the tags you want to fire when the custom event is registered by the listener tag to send the data to the endpoint.
## Test the custom event listener in *Preview Mode* to ensure it works, and check the JavaScript console for errors if it doesn't.
- Navigate to ***Preview Mode*** in Google Tag Manager and perform the action required to make the custom event listener fire (for example, submit a form). You should see the custom data layer event in the list of ***Preview Mode*** events.
- Make sure that the event you are listening to is a valid browser event. Additionally, make sure the element is on the page when the ***Custom HTML*** tag tries to attach the event listener to it if you're adding the listener directly to an HTML element (rather than `document`).
- To troubleshoot, check the ***JavaScript Console*** for errors.Last edited by @hesh_fekry 2023-11-14T11:10:25Z