Let's say you have a call-to-action button on one of your pages, and you would like to filter for all recordings where a user has clicked this button. To do this, you will want to tag the recording by running a line of JavaScript whenever the user clicks this button.

First, we will need to understand what is the HTML of that CTA button.

Here is an example of how your HTML might look.

<button type="button" id="call-to-action">Click Me!</button>

Next, use our article on tagging to learn how to tag Mouseflow sessions.

Here is some example JavaScript for tagging the Mouseflow session.

window._mfq.push(["tag", "cta-clicked"]);

Putting it all together

We only want this JavaScript to run whenever the button is clicked, so we must use an EventListener.

const ctaButton = document.querySelector("#call-to-action");
ctaButton.addEventListener("click", function() {
window._mfq.push(["tag", "cta-clicked"]);
});

Breaking down the code, in the first line we assign the button element to a variable.

Next, we add the EventListener with the aptly named addEventListener function.

We are looking for clicks, hence the string "click" being passed as the first argument of this function, and another function is passed as the second argument of our addEventListener call. This second function contains the code that will execute each time a user clicks on the element. It contains the code to tag the Mouseflow session.

Did this answer your question?