Knowledge base | mouseflow

Custom Variables / Tagging

With Mouseflow, you can associate additional information with a session by using custom variables or tags. This allows you to sort/filter various tools in Mouseflow based on your own data to isolate a specific segment of visitors.

A custom variable allows you to push a key/value pair into Mouseflow - two pieces of information like user_id = "1234" or order_number = "5678". A tag allows you to push a single string into Mouseflow - one piece of information like popup_fired or order_placed. In addition, there are some tags that are already set up for you.

Use Cases

Here is a list of some of items you might want to track:

  • Customer ID
  • Order Amount/Number/Items
  • Campaign ID
  • Error Codes
  • Search Terms
  • Events (e.g. Modal Clicked, Abandoned Cart, Up-sell/Cross-sell)

Adding a Single Variable in the Tracking Code

To push a single custom variable, add the following line (in bold) to your tracking code. Set the "key" and "value" to match your requirements, accordingly.

Here's an example:

<script type="text/javascript">
    window._mfq = window._mfq || []; 
    (function() { 
        var mf = document.createElement("script");
        mf.type = "text/javascript"; mf.async = true; 
        mf.src = "//cdn.mouseflow.com/projects/your-website-id.js";
        document.getElementsByTagName("head")[0].appendChild(mf); 
    })(); 
    window._mfq.push(["setVariable", "KEY", "VALUE"]);
</script> 

Adding Multiple Variables in the Tracking Code

To push multiple custom variables, just add additional lines. Set the "key" and "value" to match your requirements, accordingly.

Here's an example:

<script type="text/javascript">
    window._mfq = window._mfq || [];
    (function() {
        var mf = document.createElement("script");
        mf.type = "text/javascript"; mf.async = true;
        mf.src = "//cdn.mouseflow.com/projects/your-website-id.js";
        document.getElementsByTagName("head")[0].appendChild(mf);
    })();
    window._mfq.push(["setVariable", "KEY1", "VALUE1"]);
    window._mfq.push(["setVariable", "KEY2", "VALUE2"]);
</script> 

Adding a Variable Separate from the Tracking Code

You can add a variable by itself, without implementing it in your tracking code. This may be useful if you are using Google Tag Manager or another integration. Set the "key" and "value" to match your requirements, accordingly.

Here's an example:

<script type="text/javascript">
    window._mfq = window._mfq || [];
    window._mfq.push(["setVariable", "KEY1", "VALUE1"]);
</script> 

Scope

A custom variable can be set many time per session. Each time the variable is set, it will overwrite any previous values. So if a user is assigned KEY1 / VALUE1 at the start of the session, and is later assigned KEY1 / VALUE2, the latter variable will overwrite the first. So the session will only be tagged with KEY1 / VALUE2.

However, if you want to set a variable and make sure it's never overwritten, you can do so using an extra argument in the call:

window._mfq.push(["setVariable", "KEY1", "VALUE1", "session", false]); 

In the example above, the variable "KEY1", will get a value of "VALUE1", and that value will never be overwritten, even if another call is made later in the session.

Adding a Single Tag Using the Tracking Code

To push a tag, add the following line (in bold) to your tracking code. Set the "my-tag" part to match your requirements, accordingly.

Here's an example:

<script type="text/javascript">
    window._mfq = window._mfq || [];
    (function() {
        var mf = document.createElement("script");
        mf.type = "text/javascript"; mf.async = true;
        mf.src = "//cdn.mouseflow.com/projects/your-website-id.js";
        document.getElementsByTagName("head")[0].appendChild(mf);
    })();
    window._mfq.push(["tag","my-tag"]);
</script> 

Adding Multiple Tags Using the Tracking Code

To push multiple tags, just add additional lines. Set the "my-tag" part to match your requirements, accordingly.

Here's an example:

<script type="text/javascript">
    window._mfq = window._mfq || [];
    (function() {
        var mf = document.createElement("script");
        mf.type = "text/javascript"; mf.async = true;
        mf.src = "//cdn.mouseflow.com/projects/your-website-id.js";
        document.getElementsByTagName("head")[0].appendChild(mf);
    })();
    window._mfq.push(["tag","my-tag"]);
    window._mfq.push(["tag","my-other-tag"]);
</script> 

Adding a Tag Separate from the Tracking Code

If you want to add a tag without changing your tracking code, you'll just need to enter a short snippet of code. This may come in handy if you are using Google Tag Manager or another extension.

Here's an example:

<script type="text/javascript">
    window._mfq = window._mfq || [];
    window._mfq.push(["tag","my-tag"]);
</script>

Notes

  • The URL on the "mf.src" line must be customized to match the tracking code in your account. In particular, "your-website-id.js" should be replaced with the unique ID for your website.

  • You should always test this to make sure it has the desired functionality.