Getting data from the FunnelFlux Javascript
Zeno avatar
Written by Zeno
Updated over a week ago

The FunnelFlux javascript tracking provides some information about the visiting user that can be grabbed and used for whatever purpose.

We will be expanding the JS over time to provide more information - such as user country, ISP, etc., so that you can use this information in your landers without needing to pass it in the URL or rely on external providers.


The javascript's useful output

When the FunnelFlux JS loads it generates an iFrame on the page with the id _ffq_track

This iFrame contains a message with data about the visitor - a typical message may look like this (though it would not have nice formatting like this):

window.parent.postMessage({
  "idHit": "325721182056347732",
  "hitTimestamp": 1529576310,
  "entranceTimestamp": 1529576310,
  "hitCost": 0,
  "idVisitor": "325721182056347732",
  "visitorTagIds": null,
  "idIncomingTraffic": "325721182056347732",
  "idTrafficSource": "17",
  "idFunnel": "203212058743938454",
  "idNode": 203744182158054903,
  "nodeType": 2,
  "timeOnPage": null,
  "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36",
  "mainLanguage": "en-US",
  "otherLanguages": null,
  "referrer": "",
  "bIsNewVisitor": true,
  "bFilteredTraffic": null,
  "bFunnelEntrance": true,
  "aTrackingFields": [],
  "frameId": "_ffq_track_",
  "ok": 1
}, '*');


So, right now it contains the visitor hit ID, their visitor ID, the funnel and node ID, a list of any tags, and so on.


Accessing and using this data

The easiest way to access and use this data is by adding some javascript to "listen" for this message then do something.

Importantly, code to do this should come before the FunnelFlux JS -- no point trying to listen for something after it has happened right?

Here is example code to retrieve visitor ID:

<script type="text/javascript">
window.addEventListener("message", function(e) {
if( e.data.ok && e.data.frameId == '_ffq_track_' ) {
    var ffVisitorID = e.data.idVisitor;
}
}, false);
</script>


The above code creates a new variable ffVisitorID  and sets this to whatever is in the tracking JS message that spawns when the page loads.

If you wanted to directly set some HTML properties you could do so in the JS as well:

<script type="text/javascript">
window.addEventListener("message", function(e) {
if( e.data.ok && e.data.frameId == '_ffq_track_' ) {
    document.getElementById('visitorid').value = e.data.idVisitor;
}
}, false);
</script>

 
The above could be used to set some hidden form field with ID visitorid  to have the FunnelFlux visitor ID in it -- useful if you want to pass visitor ID's to email systems through their opt-in forms.


Getting data provided by tokens

Ever wanted to get tracker data like country name, device model, ISP etc. without having to use redirects and pass these in the URL?

Yep, can do that. You can use any token in the JS to add the corresponding output to the iFrame so you can use it in your page code.

Simply update your JS to include relevant tokens:

fflux.track({
   timeOnPage: false,
   timeOnPageResolution: 3000,
   noCookies: false,
   tokenInjection: {
     intoUrl: false,
     intoForms: { selector: null },
     intoLinks: { selector: null },
     tokens: {
       'country': '{location-countryname}',
       'isp': '{connection-isp}'
     }
   }
});


Now the postMessage output will include a flux_inject section that contains these tokens. Example:

"flux_inject": {
    "intoUrl": false,
    "intoForms": {
        "selector": null
    },
    "intoLinks": {
        "selector": null
    },
    "tokens": {
        "country": "United States",
        "isp": "Comcast LLC"
    }
}


You can then access all these tokens using the same approach as earlier:

<script type="text/javascript">
window.addEventListener("message", function(e) {
if( e.data.ok && e.data.frameId == '_ffq_track_' ) {
    var userCountry = e.data.flux_inject.tokens.country;
    var userIsp = e.data.flux_inject.tokens.isp;
}
}, false);
</script>


If you want to use this data dynamically in page text, we suggest wrapping the code that makes those updates inside the above code (i.e. after the var definition parts) so that they all execute in order once the postMessage is available, to make the process as fast and efficient as possible.


What we plan to add

There is a general trend of moving away from redirection-based tracking, which will make it increasingly difficult to rely on passing data in URLs with tokens.

But, dynamic pages that use a passed model, ISP, and tracking field parameters are quite common in the marketing industry - we will try to make the JS as competent at providing these as a redirect.

Our current list of data to add includes:

  • User location (continent/country/city) (DONE)

  • User ISP / mobile carrier (DONE)

  • Device type, model, manufacturer (DONE)

  • Is located in EU country? (yes/no)

  • Is known datacenter? (yes/no)

  • Previous node ID

  • Previous lander node visited (if applicable)

  • Session ID

We removed IP from the response as part of making the tracking system better align with GDPR - we may add it back in the future with it automatically anonymised for EU countries though at this stage have no plans to add it back.

Did this answer your question?