Unbounce is a popular tool for landing pages - and for good reason. It enables developers to easily test and experiment with landing page design and content variations. To use Mouseflow for your Unbounce pages, follow these steps:

  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 finished, the full Mouseflow tracking code should look like this (with the version letter set to the page variant you're editing and "your-website-id.js" customized to what appears in your actual code snippet):
     <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";
  6. When you’re finished, click "Save Code" > "Save Changes"

  7. 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.

  8. 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.