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.

Important note:

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.

Prerequisites:

You must have the AnyTrack Tag in the head section of your site before any of the snippets can be activated.

Trigger Events 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', 'Lead')">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');
        });
    });
});

Note:

You must update the div.my-class as well as the MyEventName to match your website requirements

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);

Note:

You must update the div.my-class as well as the MyEventName as well as the number of milliseconds.