How to trigger an event only if an element is visible in the browser viewport?

AnyTrack enables you to trigger custom events that matches your specific campaign needs using the tracking script.

In this tutorial we will show you how you can add a custom script on your website to track whenever a specific element is visible on the user viewport.

Note: This tutorial requires some understanding of HTML and basic knowledge of how website elements structure on a page.

Step 1: Finding your element in the page

In order to track a specific element in the page, you will need to tell the browser how to find this document within the HTML code. 

In order to view the element HTML code, scroll down to the element you want to track and right click on the element:

On the menu, click on “Inspect Element” and you will see how the element is represented within the HTML code:

Step 2: Determinate your element selector

Option 1: Using an element id attribute

The easiest way to find an element in a website is using the id attribute. Simply find your element in the HTML adn check if the element has an id attribute. For example:

<button id="my-button">Click Me</button>

In this example the button has an id attribute with a value of my-button.

If your element doesn't have an id attribute, we recommend that you edit the element code (not in the browser, in your website CMS) and add an id to the element. This is the best way to find an element on a page.

Option 2: Using an element unique class names

If your element doesn’t have an id attribute or if you wish to track the element with CSS class names, it’s possible to track it using one or more class names you have on the element. 

On the element HTML code, find the element class names using the class attribute. For example:

<button class="cta-button primary">Click Me</button>

This element has 2 class names: cta-button and primary.

Step 3: Add an Custom Event Trigger

After you figure out what’s the event selector should be, you’re ready now to add a JavaScript code on your page, that will trigger a custom event when your users view this element in the first time.

Copy and paste the following code on each page you want to track a scroll to the element in the viewport:

AnyTrack("onViewport", "#my-button", function() {
  AnyTrack("trigger", "ViewButton");
});

Please note this code contain two parts:

1. A viewport tracking code with a selector #my-button
2. A custom event trigger for the event ViewButton

We will review those parts now in detail.

Placing your Element Selector

On this code, you will need to replace the #my-button string with your own element selector from the previous step. Please note that the selector string is case sensitive.

If your selector is based on the element id, you should use the # character and right afterwards write your element id. For example, for the element:

<button id=”footer-button”>My Button</button>

The selector string should be #footer-button.

If your selector is based on the element CSS class names, you should put a dot . before each class name and join all the class names together without spaces.

For example, for an element with class attribute class="class-1 SecondClass", your selector should be .class-1.SecondClass.

Trigger a Custom Event

Once the tracked element entered the browser viewport, the script will trigger a custom ViewButton event using the following code:

AnyTrack("trigger", "ViewButton");

You can change and replace this code to meet your specific needs. Please see this guide of how to trigger events using JavaScript.