With Mouseflow, it's easy to generate separate heatmaps for campaigns and recipes within Adobe Test&Target.
Use
This integration makes use of the mouseflowPath variable to create a custom heatmap/data bucket. This will allow you to track and compare individual A/B test variations using Mouseflow.
Setup
Setting up the Adobe Target Integration on your site is relatively easy but it does require a small amount of coding.
Note: If you're using Google Tag Manager please see our article on customizing the Mouseflow tracking code in GTM.
1. Log in to your site and locate your Mouseflow Tracking Script.
You will usually find your tracking script in the backend of your website.
2. Modify your Mouseflow tracking code
Once you have located your Mouseflow Tracking Code you need to modify it to have create recordings and heatmaps for the different A/B test variations.
An example of the modified tracking code looks like this:
<script type="text/javascript">
// Mouseflow tracking code
window._mfq = window._mfq || [];
(function() {
var mf = document.createElement("script"); mf.type = "text/javascript"; mf.defer = true;
mf.src = "//cdn.mouseflow.com/projects/your-website-id.js";
document.getElementsByTagName("head")[0].appendChild(mf);
})();
// Get current path
var currentPath = document.location.pathname;
// Check for tnt
if (typeof(s_tnt) == 'undefined') {
var s_tnt = '';
}
s_tnt += '${campaign.id}:${campaign.recipe.id}:${campaign.recipe.trafficType},';
var sCampaignName = '${campaign.name}';
var sRecipeName = '${campaign.recipe.name}';
// if we have tnt data
if (sCampaignName.length > 0 && sRecipeName.length > 0) {
// Append tnt data to mouseflowPath
var mouseflowPath = currentPath + '-' + sCampaignName + '-' + sRecipeName;
}
</script>
If you do not wish to generate separate heatmaps for different recipes, simply remove references to ${campaign.recipe.id}
, ${campaign.recipe.trafficType}
, and sRecipeName
.