Unbounce is a popular tool for landing pages - and for good reason. It enables users to easily test and experiment with landing page design and content variations.

Use it to

Name recordings after the Unbounce variant (if a user lands on page B, the recording will reflect this). This allows you to filter the recording list, heatmap list, funnels, and form analytics reports based on your experiments and variants.

The integration sets a custom variable in Mouseflow so you can filter the list of recordings by experiment name and variation name. This lets you filter for a page (with all variants combined into one), exclude all variants from a page (to view traffic not bucketed into tests), or view a specific variation for a page.

Note: To access the filter options in Mouseflow, click the 'Add Filter' button in the top-left hand side and then -> choose Variables -> select the appropriate experiment and value (either a variation name or * (for all variations to be combined)).

Setup

This detailed guide will walk you through the steps involved in integrating Mouseflow into Unbounce.

1. Choose a custom sub-domain for your Unbounce pages (e.g. unbounce.mydomain.com).

2. Create the necessary CNAME record(s), following these instructions.

3. Log in to your Unbounce account. From the Domains tab, click 'Add a Domain', and follow the on-screen prompts. It's important that the domain used to serve content from Unbounce is a subdomain of your primary website in Mouseflow. If not, you'll need to explicitly add the new domain (used for Unbounce) in Mouseflow under "Settings" > "Domains".

4. In Unbounce, create a new page. From the Pages tab, select the appropriate page. If you haven't already, click the 'Change URL' button and follow the on-screen prompts to activate your custom sub-domain.

5. Click "Edit" to modify the first-page variant, click "JavaScripts" (in the lower-left corner), click "Add Script to this Variant", change the Script Name to "Mouseflow", change the Placement to "Before Body End Tag", and paste your Mouseflow tracking code in the box (including the script tags). After the opening/initial script tag, add one extra line of code (which you'll customize slightly for each page variant):

var mouseflowPath = document.location.pathname + "/version-a";

When you’re finished, click "Save Code" > "Save Changes"

<script type="text/javascript"> 
var mouseflowPath = document.location.pathname + "/version-a";
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);
})();
</script>


6. You should repeat the previous step for all other pages/variants, as needed. Be sure to customize the version appropriately for each of the different page versions - doing so will ensure you get heatmaps for each variant.

7. From the Pages tab, select the page(s) you modified, and click "Publish Page". You’re all set! You should start to see data in your Mouseflow account shortly.

Did this answer your question?