Knowledge Base/Integrations and advanced use/Advanced use

Custom Variables/Tagging

Mouseflow
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/your-website-id.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.

Tags: custom variables tagging filter recording

 

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
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
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
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
User photo
Rachana

With "Filtering by Variable" I can filter recordings. Is there a way I can filter Heatmaps as well? Actually, we have mobile responsive website and I wanted to understand visitors clicking behavior on any page from Mobile and Tablet.

April 7, 2015, 19:17
User photo
Morten Hornbaek
Mouseflow

Hi Rachana,

It's not currently possible to filter the heatmaps using our Custom Variables. That's something we're working on adding in our next major update, though.

However, we do have a technique that would let you create different heatmaps from the same page. Basically it allows you to segment the heatmaps based on visitors screen resolution. So you could have one heatmap of all mobile visitors, one for tablets and one for desktop users. You can read a full article on this here:
https://mouseflow.zendesk.com/entries/28120533-Tracking-responsive-...

April 7, 2015, 22:51
User photo
Rachana

I tried using Virtual pageviews as suggested in the link you mentioned. But that technique provides me filter option for "Recordings". I did not see any redefined URLs (ex: I did not see www.example.com/mobile instead of www.example.com) in the Heatmap list to differentiate pageviews on homepage from Mobile based on the Screen size. Is there anything that I am missing? Also, we are using Tag Management System (TMS), is there anything specific to remember when adding mouseflow thru TMS?

April 7, 2015, 23:40
User photo
Morten Hornbaek
Mouseflow

Hi Rachana,

The virtual pageviews should definitely have given you a redefined URLs in your heatmap list. It sounds like there might have been some issue with the implementation. I'd be more than happy to take a closer look at your specific case to see what's going on. Can you email support@mouseflow.com or create a support ticket with the details on this?

April 8, 2015, 01:05