Using MouseFlow to track a users movements on your Form

This article explains how to use mouseflow.com to track and view all of a user interactions with your form. This integration requires that you have your own mouseflow account.  

Creating your MouseFlow Account

1. Go to mouseflow.com and sign up for a free trial 
2. After signing up, MouseFlow will provide you with a code snippet similar to the one below. Copy this to your clipboard.
3. Log into your MouseFlow account, and go to Settings.
4. Add forms.logiforms.com under Domains, to indicate you want to record data from logiforms.com
5. If you didn't save the integration code, you can also get it from this page by clicking the tracking code button.

Adding the Code to your Logiforms Form

1. In a new tab, login to your Logiforms account and open the form you want to add tracking to.
2. Add a Free Text Element at the top of the first page of your form.
3. Edit the text property of the Free Text Element and within the Free Text Editor switch to source code view and paste the code:

   <script type="text/javascript">
     window._mfq = window._mfq || [];
     (function() {
       var mf = document.createElement("script");
       mf.type = "text/javascript"; mf.async = true;
       mf.src = "//cdn.mouseflow.com/projects/c1213e98-c2fd-4db4-bde0-7b034b9f5097.js";
       document.getElementsByTagName("head")[0].appendChild(mf);
     })();
   </script>
   

4. Save the changes to the Form.

Adding Code to the AutoResponder Thank you Page

In addition to the code added to the form, you'll need an autoresponder thank you page setup, where you can add the code below to stop the tracking and also pass some specific wildcard values to MouseFlow, so you can identify the records in your database, to the recordings in your mouseflow account.

1. Create a new AutoResponder Profile, or use an Existing Profile
2. Edit the AutoResponder Thank you page, within the Free Text Editor switch to source code view and past the code below (don't forget to change the projectID!) above the closing </body> tag:

   <script type="text/javascript">
     window._mfq = window._mfq || [];
     (function() {
       var mf = document.createElement("script");
       mf.type = "text/javascript"; mf.async = true;
       mf.src = "//cdn.mouseflow.com/projects/c1213e98-c2fd-4db4-bde0-7b034b9f5097.js";
       document.getElementsByTagName("head")[0].appendChild(mf);
     })();
   // custom tags using wildcards
   _mfq.push(new Array("setVariable", "RECORDID", "[RECORDID]"));
   _mfq.push(new Array("setVariable", "CLIENT NAME", "[client name]"));
   // end session
   setTimeout(function(){
      console.log('stopSession called');
      mouseflow.stopSession()
   }, 2000);
   </script>
   

   WildCard Values

   Notice the bold lines above, the two lines of the code used on the AutoResponder Thank you Page. This code will create tags within MouseFlow that will allow you to relate the recordings to the records in your database. You can add additional lines here to pass through additional wildcard values.

   Autoresponder Redirect URLs

   Using autoresponder redirect URL's with this integration is not supported. You must display the AutoResponder Thank you Page so the code above can run to record the RecordID and also end the recording session.

After your code is setup, open your form in a new window and fill it out. Once your done, log in to your MouseFlow account and click on the DASHBOARD link. You should then be able to see your recordings, and click to replay them.

Please keep in mind, that there can sometimes be a delay in the MouseFlow recordings, as explained in this article. If you do not see your recordings, please wait 24 hours before contacting support to review the issue.