With the Custom Variables/Tagging feature, you are able to label and track the recordings where a user has performed a specific action or behavior. Such behaviors might include clicking a button, or filling in a specific form field.


Overview

There are a wide range of behaviors that can be detected using vanilla JavaScript and you can combine this with the Custom Variables/Tagging feature of Mouseflow.


In order to get started tracking specific user behaviors with Mouseflow, you will need to be able to add JavaScript code to your website.


Tagging clicks on a specific button

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. Here is an example of how your HTML should look.


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


To do this, you will want to tag the recording by running the following JavaScript whenever the user clicks this button.


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


In this code, we are simply telling Mouseflow to tag the session with the term "cta-clicked" so that it can be searched for later on from the Mouseflow dashboard. Please note that this is the line that tells Mouseflow to tag the session, and more setup is required to make sure it is tied to a user behavior.


How do I run this code at based on the user behavior?

To run the code based on user behavior, you will want to use an EventListener.


const ctaButton = document.querySelector("#call-to-action");

ctaButton.addEventListener("click", function() {
    window._mfq.push(["tag", "cta-clicked"]); 
});


Breaking up this code snippet, we can see that in first line we will try to assign the button element to a variable. Next, in line 3, we check to see that the element exists. If it does exist, then we add the EventListener with the aptly named addEventListener function.

In the above snippet is a click event listener hence the string "click" being passed as the first argument, and the function passed in the second argument of our addEventListener function will fire each time a user clicks on the element.


Track forms using custom variables

You can use an EventListener to listen to change in an input field.


<form id="my-form">
    <div class="form-group">
      <label for="color">First name</label>
      <input class="form-control" type="text" name="color" value="Green">
    </div>
    <div class="form-group">
      <label for="animal">Last name</label>
      <input class="form-control" type="text" name="animal" value="Mouse">
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
</form>


The above form has two input fields: color and animal. If you would like to be able to filter for specific values for this form field, you can do so by adding an EventListener.


const myForm = document.querySelector("#my-form");

myForm.addEventListener("submit", handleSubmit);


And define the handleSubmit function like so


function handleSubmit(e) {
    e.preventDefault();
    
    // Track form values as custom variables in Mouseflow
    var elements = document.getElementById("my-form").elements;
    for (var i = 0 ; i < elements.length ; i++){
        var item = elements.item(i);
        if (item.name){
          window._mfq.push(["setVariable", item.name, item.value]);
        }
    }
}