Using the ‘Visitor Clicks on an Element’ Filter within Real-Time Behaviors

This guide explains how to use the “Visitor clicks on an element on the page” filter to trigger marketing automation campaigns based on specific user interactions. This filter is versatile and allows you to respond to user engagement by tracking clicks on designated elements of your website.

Overview

The “Visitor clicks on an element on the page” filter allows you to trigger a marketing campaign whenever a visitor interacts with a specific element, such as buttons, links, or images, on your website. By leveraging this filter, you can create personalized campaigns that respond to user behavior in real time.

How to Set Up the “Visitor Clicks on an Element” Filter

Step 1: Identify the Element You Want to use as Trigger

• Navigate to the webpage containing the element you want to use as trigger.

• Open your browser’s Developer Tools (Right-click on the page and select Inspect, or press F12).

• Locate the element you wish to track by hovering over the HTML structure in the Elements panel.
  

Step 2: Retrieve the CSS Selector

To accurately track clicks on your chosen element, you will need its CSS selector:

1. Right-click on the highlighted HTML code in the Elements panel.

2. Select Copy > Copy CSS Selector from the context menu.

This should work similarly across all major browsers (Chrome, Firefox, Edge, etc.).

Step 3: Add the Filter in Your Marketing Automation Setup

• Go to Marketing Automation > Target Groups > Real-Time Behaviors.

• Create a new real-time behavior or edit an existing one.

• Select the context “Page” and choose the filter “Visitor clicks on an element on the page”.

• Paste the copied CSS selector into the filter input field.

Best Practices for Using CSS Selectors

To ensure your tracking is reliable and resilient, consider the following best practices when using CSS selectors:

1. Use Simple and Generic Selectors: Opt for selectors that are less likely to break if the website structure changes. For example, instead of:

    #main > div > section > ul > li:nth-child(3) > button

   Use something like:
   

   .cta-button

   This approach ensures your filter remains stable even if the page layout is updated.

2. Avoid Overly Specific Selectors: HTML elements can change position or structure when a page is updated. Relying on overly detailed selectors (e.g., nth-child) may cause your filter to break.
   

3. Test Your Selector: After setting up the filter, test it by interacting with the targeted element on your site to confirm it works as expected.
   

Example Use Cases for the “Visitor Clicks on an Element” Filter

Here are some practical scenarios where you can use this filter:

• Encouraging Form Submissions: Trigger a follow-up email if a visitor clicks on a “Submit” button but doesn’t complete the form.

• Promoting Limited-Time Offers: Show a pop-up with a special discount if a visitor clicks on a “Learn More” link.

• Upselling Products: Trigger a recommendation campaign if a visitor clicks on the “Add to Wishlist” button.

Troubleshooting Tips

If the filter does not trigger as expected, consider the following:

1. Verify the CSS Selector: Ensure the selector is unique to the element you want to track and does not inadvertently match other elements on the page.

2. Check Browser Compatibility: Confirm that your website is not blocking elements with scripts that may interfere with tracking.

3. Test in Real-Time: Use a staging environment to test your setup before deploying it to your live website.