Events¶
Events are the triggers in Dxtra Tag Manager's rule engine. They define when rules should evaluate. Each rule requires at least one event.
Event Types¶
Page Ready¶
Fires when the DOM is fully parsed (equivalent to DOMContentLoaded). Use for actions that need to interact with page elements before all resources have loaded.
| Setting | Description |
|---|---|
| Repeatable | Whether the event can fire multiple times |
Page Loaded¶
Fires when the page and all resources (images, scripts, stylesheets) have finished loading (equivalent to window.onload).
| Setting | Description |
|---|---|
| Repeatable | Whether the event can fire multiple times |
Page In Focus¶
Fires when the browser tab gains focus. Useful for resuming paused content or restarting timers.
Page Blur¶
Fires when the browser tab loses focus. Useful for pausing content or tracking time on page.
History Change¶
Fires when the URL changes via the History API (pushState, replaceState) or hash change. Essential for single-page applications.
SPA Requirement
For History Change events to fire, install the script with SPA support: tm.js?opts=spa or tm.js?opts=spa,hash
Click Elements¶
Fires when an element matching a CSS selector is clicked.
| Setting | Description |
|---|---|
| CSS Selector | Selector for target elements (e.g., .buy-button, #signup-form button) |
| Repeatable | Fire once or on every click |
The clicked element's data is available through the Element Click data container.
Form Submit¶
Fires when a form matching a CSS selector is submitted.
| Setting | Description |
|---|---|
| CSS Selector | Selector for target forms (e.g., #contact-form, .newsletter-signup) |
Element In View¶
Fires when an element matching a CSS selector enters the viewport. Uses the Intersection Observer API.
| Setting | Description |
|---|---|
| CSS Selector | Selector for target elements |
| Threshold | Percentage of element visible before firing (0-100) |
Tag In View¶
Fires when a placement tag becomes visible in the viewport. Only available for placement tags.
Tag Click¶
Fires when a placement tag is clicked. Only available for placement tags.
Tag Timer¶
Fires after a specified delay once a placement tag is loaded. Only available for placement tags.
| Setting | Description |
|---|---|
| Delay (ms) | Milliseconds to wait before firing |
| Repeat | Whether to fire repeatedly at the interval |
JS Error¶
Fires when a JavaScript error occurs on the page. Error details are available through the Browser Error data container.
CMP Check¶
Fires when a consent management platform (CMP) provides consent status. Use this to gate tags on user consent.
Consent categories available:
- Strictly Necessary
- Analytics / Performance
- Marketing / Advertising
- Functional
Element Attribute Match¶
Fires when an element's attribute matches a specified value. Useful for tracking dynamic content changes.
| Setting | Description |
|---|---|
| CSS Selector | Selector for target elements |
| Attribute | HTML attribute to monitor |
| Value | Expected attribute value |
Event State¶
Events can be configured as:
| State | Behavior |
|---|---|
| Repeatable | Fires every time the condition is met |
| Single | Fires once per page load |
| Session | Fires once per session |
Multiple Events in a Rule¶
When a rule has multiple events, any matching event triggers rule evaluation. The events act as an OR condition -- the rule fires if Event A or Event B occurs (as long as conditions are met).
Using Events with Conditions¶
Events trigger rule evaluation, but conditions determine whether actions execute:
Event: Click Elements (CSS: ".add-to-cart")
Condition: Query String "campaign" Contains "sale"
Action: Track Event "sale_add_to_cart"
This tracks add-to-cart clicks only when the URL contains a "sale" campaign parameter.
Common Event Patterns¶
Track All Page Views¶
Track Button Clicks¶
Event: Click Elements (CSS: ".cta-button")
Conditions: (none)
Action: Track Event "cta_click"
Consent-Gated Analytics¶
Event: CMP Check
Condition: consent category "analytics" equals "true"
Action: Load JS (Google Analytics script)
SPA Page Navigation¶
Scroll Depth Tracking¶
Event: Element In View (CSS: "#page-footer")
Conditions: (none)
Action: Track Event "scroll_to_footer"
Related Documentation¶
- Overview -- Tag Manager concepts
- Rules -- Rule logic and conditions
- Actions -- Action types
- Consent Integration -- CMP Check event details
- Debugging -- Debug event firing