Page Comparison

...

...

Current state

• After installing the code, will move to the current state table below

Current State (Update 26/11/2020)

Future State

• After installing the code, will move to the current state table below

...

Current State (Update 26/11/2020)

Mouseflow tracking code

%begin_globals_asset_metadata_pageType^eq:homePage%
<script type="text/javascript">
// Enable mouseflow tracking on the page

var _mfq = _mfq || [];
(function() {
var mf = document.createElement("script"); mf.type = "text/javascript"; mf.async = true;
mf.src = "//cdn.mouseflow.com/projects/4a7ff1cf-f5b8-4dd8-95da-13bfe4f4e580.js";
document.getElementsByTagName("head")[0].appendChild(mf);
})();

</script>
%end_asset%
<!-- mouseflow -->

Mouseflow tracking install steps

Within squiz, if using any of the customisations under the new hub design (Victoria Hub#1321146) use the following steps:

1. Go to the asset metadata

2. Under the metadata field “External JS file (externalJs #1323850)” add the asset “mouseflow #1785436”. If there is an asset already in the External JS file metadata, put a request in for a developer to try and include mouseflow in the existing metadata.

3. Commit, then preview and view page source and search for ‘mouseflow’ and you should see the following script:

   Code Block
   language html
   <script type="text/javascript"> // Enable mouseflow tracking on the page var _mfq = _mfq || []; (function() { var mf = document.createElement("script"); mf.type = "text/javascript"; mf.async = true; mf.src = "//cdn.mouseflow.com/projects/4a7ff1cf-f5b8-4dd8-95da-13bfe4f4e580.js"; document.getElementsByTagName("head")[0].appendChild(mf); })(); </script>

If using a customization of the old design (Common#387822) use the following steps:

1. Go to the asset metadata

2. Under the metadata field “enableMouseflowVUW (enableMouseflowVUW #364679)”, select enableMouseFlow

3. Commit, then preview and view page source, search for ‘mouseflow’ and you should see the following script:

   Code Block

   <script type="text/javascript"> // Enable mouseflow tracking on the page var enableMouseflow = "1"; if(enableMouseflow == "1"){ var _mfq = _mfq || []; (function() { var mf = document.createElement("script"); mf.type = "text/javascript"; mf.async = true; mf.src = "//cdn.mouseflow.com/projects/4a7ff1cf-f5b8-4dd8-95da-13bfe4f4e580.js"; document.getElementsByTagName("head")[0].appendChild(mf); })(); } </script>

4. Ensure that the line var enableMouseflow = "1"; shows = “1” and not = “0” otherwise the script will not run.

Our Mouseflow plan

Currently, we are using the Pro Plan, which has 150k recorded sessions (credits), 20 websites, 12 months of storage and unlimited heat maps.

Recordings are counted in credits, which equals one user session (recording).

Session

A session is created when a new user accesses your site, or when the Mouseflow session ends and the user performs a new action on your site. A Mouseflow session ends if one of the following scenarios occur:

• The user is inactive for more than 30 min.

• The user is active on a page for more than 1 hour.

• The user has more than 100 page views.

• The user clears browser cookies

• The user loads the website in an incognito tab.

• If you perform a 'mouseflow.stopSession()' call at any time on your site.

...

...

Mouseflow tracking install steps

Open the metadata for the page in squiz. (If it is a site asset, go to the sites “home” page instead)

• If the metadata field “External JS - Footer _{(externalJsFooter #1515678)}“ exists, add the asset “mouseflow script current#1913605”. (This is for when Victoria Hub #1321146 metadata schema is in use)

  • If enabling on a home page you must add this to both the site asset and the home page to work, due to a bug in squiz.

• Otherwise, if the metadata field “afterScripts _{(afterScripts #385570)}” exists, add the following code in the textbox: (This is for when Common Migration #379620 metadata schema is in use)

  • Note, this doesn’t have to be enabled on both homesite and site assets to work.

<!--@@ Mouseflow @@--> %globals_asset_contents_raw:1913605% 

Commit the changes.

...

How to tell if mouseflow is installed

View the page source, do a search for “mouseflow”, and you should find some variation of the following code:

<!-- Mouseflow Current 1913605 -->
<script type="text/javascript">
   const mouseflowAssetId = "%asset_name% %asset_assetid%"; //Used for debugging on the front end
   var _mfq = _mfq || [];
   (function() {
       var mf = document.createElement("script"); mf.type = "text/javascript"; mf.async = true;
       mf.src = "//cdn.mouseflow.com/projects/4a7ff1cf-f5b8-4dd8-95da-13bfe4f4e580.js";
       document.getElementsByTagName("head")[0].appendChild(mf);
   })();
</script>

...

Our Mouseflow plan

Currently, we are using the Pro Plan, which has 150k recorded sessions (credits), 20 websites, 12 months of storage and unlimited heat maps.

Recordings are counted in credits, which equals one user session (recording).

Session

A session is created when a new user accesses your site, or when the Mouseflow session ends and the user performs a new action on your site. A Mouseflow session ends if one of the following scenarios occur:

• The user is inactive for more than 30 min.

• The user is active on a page for more than 1 hour.

• The user has more than 100 page views.

• The user clears browser cookies

• The user loads the website in an incognito tab.

• If you perform a 'mouseflow.stopSession()' call at any time on your site.

According to the last 12 month credits used, the most credits we used in a year were around 70k, so we still have room to expand the mouseflow tracking on our site.

...

Mouseflow tracking code

Used in asset mouseflow script current #1913605, https://cms.wgtn.ac.nz/_designs/common/javascript/client-side/mouseflow-script-current/_admin

<script type="text/javascript">
   const mouseflowAssetId = "%asset_name% %asset_assetid%"; //Used for debugging on the front end
   var _mfq = _mfq || [];
   (function() {
       var mf = document.createElement("script"); mf.type = "text/javascript"; mf.async = true;
       mf.src = "//cdn.mouseflow.com/projects/4a7ff1cf-f5b8-4dd8-95da-13bfe4f4e580.js";
       document.getElementsByTagName("head")[0].appendChild(mf);
   })();
</script>

...

Custom configuration of mouseflow

...

Bookmarklet to detect if mouseflow code implemented

Put the following code in the url of your bookmark

javascript: (function () {
    let mouseflowObject, mouseflowScript = false;
    let mouseflowAsset = null;
    if (typeof (_mfq) === "object") mouseflowObject = true;
    document.querySelectorAll("script").forEach((elem) => { if (elem.src.indexOf("cdn.mouseflow.com") >= 0) mouseflowScript = true; });
    if (typeof (mouseflowAssetId) === "undefined") mouseflowAsset = 'missing';
    else mouseflowAsset = mouseflowAssetId;

    window.alert("Mouseflow object exists: " + mouseflowObject + "\nMouseflow Script injected: " + mouseflowScript + "\nMouseflow object used: " + mouseflowAsset);
})();