Trigger AnyTrack Events 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

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.