Trigger AnyTrack Events for custom website elements
Learn how to trigger the AnyTrack Event Tag for custom website elements
AnyTrack automatically triggers events such as FormSubmit, AddToCart, or OutboundClick. However, in some cases, you might want to trigger events based on rules, criteria, or element visibility that are specific to your business or website.
For example, you want to trigger an event when someone sees a specific button, modal, or form. These elements might appear after a certain time, or if the visitor does something specific, that will display them.
Before you begin:
You must be familiar with Javascript, HTML, and CSS to use these tracking snippets. If you're not familiar with all of these coding languages, please forward the article to a developer.
Reminder:
The AnyTrack Tag must be present in the
head
section of your site before any of the snippets can be activated.
Trigger Events onclick
onclick
You can add to each HTML element an onclick
attribute that will trigger an event when a user clicks on the element.
For example, the following will trigger a Lead event every time a user clicks on the "View Details" button:
<button onclick="AnyTrack('trigger', 'click')">View Details</button>`
Trigger Events on Specific Element Classes
You can use the following code to find and trigger an event for all HTML elements matching a specific CSS class name:
AnyTrack(function() {
document.querySelectorAll(
'div.my-class').forEach(
function(elm) {
elm.addEventListener(
'click',
function() {
AnyTrack('trigger', 'MyEventName');
});
});
});
Time-sensitive elements
If those elements only appear after a certain time or after the user makes an action (ie. on a popup modal), you can use the following snippet that will crawl the page for every 800
milliseconds.
setInterval(function() {
document.querySelectorAll(
'div.my-class').forEach(
function(elm) {
if (elm.tracked) return;
elm.tracked = 1;
elm.addEventListener(
'click',
function() {AnyTrack('trigger', 'MyEventName');
});
});
}, 800 );
Reminder:
Don't forget to update the
div.my-class
,MyEventName
as well as the number of milliseconds.
How to prevent AnyTrack from triggering events on some pages?
If you are running AnyTrack both on production and development environments you may want to disable AnyTrack from trigger events on your development pages.
We recommend to disabling AnyTrack TAG entirely or use different property id for each environment. If that's not possible, you can still disable AnyTrack from trigger page view events using the quiet mode.
Enabling the Quit Mode
Running the following command will enable the quit mode on the current page.
Updated 4 months ago