Track almost anything with custom event listeners
Track almost anything with custom event listeners
1. 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.
2. Add the listener code into the Custom HTML tag.
Add the following code into the tag: (function() { var event = 'submit'; var callback = function(event) { if (event.target.getAttribute('id') === 'contact') { window.dataLayer.push({ event: 'custom_submit', formId: event.target.getAttribute('id') }); } }; document.addEventListener(event, callback, true); })(); Change 'submit' on the var event = 'submit'; line to the browser event you want to listen to. See the Mozilla Developer Network documentation for a list of potential browser events. 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.
3. 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.
4. Create Custom Event triggers and variables to work with the custom event listener.
Navigate to Triggers > New > Trigger Configuration, and select Custom Event as the trigger type. 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. 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. 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.
5. 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.
6. 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.