Knowledge Base/Integrations and advanced use

Custom Variables/Tagging

Mouseflow Support
posted this on July 3, 2013, 19:42

With Mouseflow, you can tag a recording with other information by using custom variables. Using this method, you can filter the recording list based on visitor data (e.g. name, email, keyword, referral source) or events (e.g. popup closed, video watched).

How It Works

To use custom variables, you need to understand a key/value pair. Essentially, a key is a container for data (e.g. "name", "email", etc.) and a value is the data itself (e.g. "Bob Smith", "bob@smith.com").

With a simple line of JavaScript, you can tag a recording with these key/value pairs. Of course, the power is in defining how these value(s) get populated — usually it's with a variable.

Use Cases

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

  • Customer ID
  • Name
  • Email Address
  • Zip Code
  • Order Amount/Number/Items
  • Advertising Campaign
  • Newsletter Campaign
  • KISSmetrics ID
  • Olark ID
  • Errors
  • Failed Validations
  • Search Queries
  • Events (e.g. Modal Clicked, Abandoned Cart, Upsell/Crosssell)
  • Miscellaneous Third-Party Data

Adding a Single Variable

To tag a recording with a key/value pair, 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"> 
var _mfq = _mfq || [];
(function() {
var mf = document.createElement("script"); mf.type = "text/javascript"; mf.async = true;
mf.src = "//cdn.mouseflow.com/projects/123.js";
document.getElementsByTagName("head")[0].appendChild(mf);
})();
_mfq.push(["setVariable", "KEY", "VALUE"]);
</script>


Adding Multiple Variables

If you want to tag a recording with another key/value pair, just add an additional line. Here's an example:

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


Filtering By a Variable

If a recording has been tagged, you can login to your account, click "Recordings", and apply the filter under the "Search by variable" section (bottom right). You can also use the variables to filter the results in our API

To set a key, simply select it from the dropdown menu. Then, enter the value to filter by in the text field below. Next, click "Update" and the filter will be applied to the recording list.

Notes

  • The URL on the "mf.src" line must be customized to match the tracking code in your account.
  • You should always test this to make sure it has the desired functionality.

Questions?

If you have questions or need help, feel free to open a ticket or call us at +1 (855) 668-7335.

 

Comments

User photo
josick

Hi

It is not very clear how do you get the visitor, to fill the key and value like name, email and so on so it gets into that variable?

July 9, 2013, 18:18
User photo
Mouseflow Support
Mouseflow Support

Hi Josick,

To track a visitor, you would define the key (e.g. email) and insert a value (e.g. bob@bob.com) when the user completes a form or logs into your website.

In your case, if a visitor fills out a contact form, you could make the email value available as a GET variable which is then used to tag the recording.

The line of code would look like this:

_mfq.push(["setVariable", "email", "<?php echo $_GET['email']; ?>"]);

This feature is easily used for e-commerce sites which often print out the email address of a visitor (e.g. Hello bob@bob.com!). They can re-use that variable in the tagging code to associate it with a session.

Hope that helps!

July 9, 2013, 18:46
User photo
josick

Yes thanks, it's clearer.

July 10, 2013, 10:13
User photo
Amos

A question though:

I noticed that I'll be able to filter the recordings but those custom variables, but will I be able to filter the Heatmaps as well?

Essentially, I would like to see Page Analysis of only a segment of the traffic (e.g. Referrer URL).

 

July 19, 2013, 18:06
User photo
brandon wong

can it integrate with kissmetrics analytics to pass those ID to track customer who have not yet get their email address

July 20, 2013, 20:11
User photo
Mouseflow Support
Mouseflow Support

@Amos: We're working on adding this capability to our heatmap engine. It is planned for a near future release.

@Brandon: Yes, you can tag sessions KISSmetrics IDs. The workflow is the same as other uses — a simple key/value pair.

August 8, 2013, 22:27
User photo
Asif Iqbal

I have implemented Custom Variable as per you mentioned, I cannot find SEARCH BY VARIABLE thing in RECORDING page. I have added below line:

_mfq.push(["setVariable", "Engine", "BookingWhizz"]);

Is there anything wrong with the code?

August 20, 2013, 15:49
User photo
Mouseflow Support
Mouseflow Support

Hi Asif,

The code looks good. Of course, we'd need to see the full tracking code where you implement it to be sure. Can you email tscott [at] mouseflow.com or create a support ticket with it? We can double check and let you know for sure.

Regards,

Trent S.

August 20, 2013, 21:02
User photo
Thomas Jörg

We have tagging enabled. But we cannot see "Search by variable" section (bottom right) on this page: http://account.e.mouseflow.com/my-account/recordings?website=e700d2... What can be done?

October 30, 2014, 15:44
User photo
Morten Hornbaek
Mouseflow

Hi Thomas,

It looks like you've omitted the starting '_' (underscore) from the variables you've inserted on your site. You need to call:

_mfq.push(["setVariable", "KEY", "VALUE"]);

Instead of:

mfq.push(["setVariable", "KEY", "VALUE"]);
October 30, 2014, 16:51