Mouse
Last updated on
17 May 2021
This article describes how to use custom events from your website to trigger a dynamic tag management (DTM) rule.
Browser events
An event is a signal that something has happened on the web page. Developers can use these signals to react or take action.
Think of an event as a radio wave. Radio waves are broadcast for everyone to hear, but you have to tune into the right frequency to hear them. If you broadcast and nobody is listening, no harm done. The same is true for events: You can trigger an event and it won’t throw any errors if something isn’t listening for it. You can also listen for an event that never happens without causing any problems or throwing any errors.
Several resources cover HTML events:
Using event-based rules in DTM
When creating an event-based rule, you can set it up for specific default events. Each browser has default events that are triggered by certain actions, such as the following common ones:
- Mouse clicks
- Mouseovers (hovering over something on the page)
- Form field focus (the cursor goes inside a form field)
- Form field blurs (the cursor leaves a form field)
- Form submits
These events make sense; they are done every single day on the web. If the browser's default events don't allow you to track what you want to track, you can use JavaScript events instead.
What events are built in to DTM?
The following events are built in to DTM's event-based rules:
|
|
Keyboard |
Forums |
HTML 5 Video |
Mobile |
Other |
|---|---|---|---|---|---|
|
click mouseover |
keypress |
focus blur submit change |
ended loadeddata play pause stalled volumechange % complete time complete |
orientationchange zoomchange |
custom enters viewport element exists pushState or hashchange |
Custom events
To be able to listen to an event, you have to first trigger one. Events are defined in the site’s code by your developers. Identifying when and where to use an event can be a bit tricky. A simple rule of thumb: if it’s something you want to track and you can’t track it with a predefined DTM event type, use a custom event.
Triggering an event
Consider the following example with a custom event, since they allow you to add data. Let’s say you have a shopping cart, and when you add something to the cart it uses AJAX. A new page doesn’t load; instead a pop-up window or a message lets you know an item was added to the cart. When this happens, you can create a custom event that tells you exactly what was added:
var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice});
document.getElementById('minicart').dispatchEvent(addToCart);
The above code references data from an object named “data”. The custom “detail” data is defined as an object, which you can then reference when listening to the event. After building the event, you then trigger it on a specific element, in this case, an element on the page with the id “minicart”. Now you have a custom event that is broadcasting for anyone that wants to listen.
Adding a custom event listener
In DTM, adding a custom event listener is as easy as adding an event-based rule.
These steps configure a rule to listen in DTM:
-
Add a new event-based rule.
-
Give it a name.
-
Select the event type custom and enter the event name, which was defined as addToCart in the example above.
-
Define the tag or element that's going to have this event. Using CSS selectors, this is #minicart.
-
Configure the rule to fire the appropriate beacons.
Questions?
If you have questions about this article or any other DTM topic, stop by the DTM community forums. You can use the forum to ask questions, participate in discussions, and stay updated on the latest for each solution.
Thank you to Adam at Disruptive Advertising for allowing us to use portions of his blog post for this article.
Adobe MAX
The Creativity Conference
Oct 14–16 Miami Beach and online
Adobe MAX
The Creativity Conference
Oct 14–16 Miami Beach and online