Looking for the basic documentation on using FunnelFlux's on-page Javascript tracking? Check here.

Here we'll discuss the code in depth as well as some extra details.

A Basic Breakdown

If using the FunnelFlux universal on-page JS for the no-redirect method, you will declare critical and non-critical tracking parameters in the code.

The base universal funnel code always contains the following:

var fflux = new ffluxQuery(); 
    fflux.ffq('set', ['flux_url', document.URL]);
    fflux.ffq('set', ['flux_ref', document.referrer]); 
    fflux.ffq('set', ['flux_f', 'FUNNEL_ID_HERE']);
    fflux.track();

This tells FunnelFlux to track the visitors based on the specific funnel you grabbed this code from, as well as URL and referrer.

An additional piece of important information FunnelFlux needs to track users effectively is the node they are on.

This will be obtained in a few ways:

If unknown, the system will try to match the current page URL to a lander/offer in the current funnel (the automatic done-for-you mode)
If not declared the system assumes a user is loading the default traffic node
You may pass flux_fn=NODE_ID in the URL
You may declare flux_fn instead of flux_f in the JS above, which declares a default node ID to your JS for the system to fall back on

Making JS specific to a lander node (setting a default)

If you right click a node in your funnel > send traffic here, you can toggle the no-redirect mode to get the JS for that specific node:

You should use this code only if you are using the lander in that one funnel -- it doesn't declare the funnel ID, rather flux_fn , the node ID, so is JS specific for that page.

In general, it is better to just use the universal JS snippet in the advanced settings area, and just pass flux_fn in the URL if ever needed.

Note flux_fn is a specific node within a specific funnel, so you should not have flux_fn and flux_f declared in the same JS together.

Additional Data You May Embed

You can embed a variety of data in the JS that will serve as defaults if nothing is present in the URL or already known for the user (e.g. they loaded a tracking link that redirected them to this lander).

The easiest way to get embed data is to right click a node in your funnel > send traffic here > no-redirect on > toggle embed of traffic source params.

This will give you code containing something like this:

var fflux = new ffluxQuery(); 
    fflux.ffq('set', ['flux_fts', 'FTS_ID_HERE']);
    fflux.ffq('set', ['subid', '[IMPRESSIONID]']);
    fflux.ffq('set', ['publisher', '[WEBSITEID]']);
    fflux.ffq('set', ['campaign', '[CAMPAIGNNAME]']);
    fflux.ffq('set', ['flux_url', document.URL]);
    fflux.ffq('set', ['flux_ref', document.referrer]); 
    fflux.ffq('set', ['flux_fn', '141643611201208924']);
    fflux.track();

Here, the funnel/traffic source parameter flux_fts has been embedded, as well as a few traffic source parameters with their default tokens/placeholders.

In this situation if a user organically loaded the page, FunnelFlux would default to the specific traffic source you had selected as well as the default URL tracking fields above.

Note the above code has flux_fn set in it -- so the page visit would also default to that specific node in the funnel you generated this code for.

Remember - use either flux_fn or flux_f , but do not use both at the same time.

As for the embedded traffic source URL tracking field data, FunnelFlux always checks the URL for any parameters as well and if present will take those values and override these defaults.

In other words, if your URL was:

https://lander.com/index.php?subid=123&publisher=456&campaign=789

... then those 123, 456 and 789 values would be retrieved and be sent to FunnelFlux instead since they are passed under the subid, publisher and campaign parameters that FunnelFlux is expecting, as per the Javascript code.

Updating Tracking Fields Dynamically

If you have certain custom fields defined in your traffic source settings that you want to update based on user behaviour, you can do this using both PHP nodes as well as our on-page Javascript.

Example: in the traffic source config you have gender defined as a field. You can't pass it from the traffic source specifically, but you want it as a field so that you can store data in the database under it and can show it in reporting.

On your landing page you then have a survey where user's pick their gender, you update that field for the specific user and store it.

You can do this using our update function, followed by executing the track function a second time, like so:

fflux.ffq('update', ['fieldname', 'new-value']);
fflux.track();

In general, you should wrap this in a function that you call when needed.

Example: when a user picks their gender in a survey form, set their choice and then on clicking next, execute the function that pushes the update:

<div id="survey">
    <button onClick="chooseGender('male')">I am male</button>
    <button onClick="chooseGender('female')">I am female</button>
    <button onClick="updateGender()">NEXT QUESTION</button>
</div>

<script>
var gender;
function chooseGender(choice){
    gender = choice;
}

function updateGender(){
fflux.ffq('update', ['gender', gender]);
fflux.track();
}
</script>

The above is a very generic example just to show how you could do this.

You could execute this for any tracking fields present for the current traffic source and can run it multiple times if you need to update existing values.

Note: this will not work for organic traffic since that has no specific fields set. However, you could make a new traffic source called "Organic Traffic" or similar and define fields there. Then, generate no-redirect JS for this traffic source and embed it on the lander with the flux_fts value present to declare it as a default.

Extra Tracking Code Functions

You may have noticed the universal JS code has some interesting looking contents near the end:

fflux.track({ 
    timeOnPage: false, 
    timeOnPageResolution: 3000, 
    noCookies: false,
    tokenInjection: {
      intoUrl: false,
      intoForms: { selector: null },
      intoLinks: { selector: null },
      tokens: {}
    }
});

So what do these do?

Time on Page

This is covered in another document, you can read that here. In short, the JS will send pings to your tracker to record the time a user spends on a page.

Passing Session ID

This is a feature that helps keep tracking coherent despite obstacles, and it is tied into various features discussed here.

You can read more here.

Cookieless Tracking

This is an advanced feature designed for situations where dropping cookies is not possible, or where there is something blocking cookies. Example situations:

Facebook mobile browser/iOS - known issues with third-party cookie blocking that leads to clickthroughs coming up as organic traffic
You're changing domains between tracker > action links (not advised) and need to make sure the tracking continues without issues
A user's browser is blocking cookies
You want to avoid the need for cookie consent in the world of GDPR, so want to track without using cookies entirely

This feature is deserving of its own documentation, which you can find here.

Token Injections

This is a cool feature that ties into cookieless tracking as well as tracking with Clickbank and ClickFunnels.

Here's what each of these lines means:

intoUrl

True or false, will update the current page URL to display any data you declare in the tokens section

intoForms

Null/off by default. Provide a form selector e.g.

intoForms: { selector: 'form' }

or a form with class "some-class"

intoForms: { selector: 'form.some-class' },

and upon submission, FunnelFlux will inject data as hidden fields, as defined in the tokens section.

intoLinks

Provide a selector e.g. a or a.flux_cta and the JS will find these link elements and append URL parameters to them.

This is used to pass session IDs between pages in cookieless tracking and even allows for linking between pages without action links, as you can append data to tell the next page's JS about the user.

Tokens

This is where we list out the field names and values we want to inject into the URL, forms or links.

For example:

tokens: { vtid: '{hit-id}', cbf: '[[cbf]]' }

This is used in our Clickbank tracking method to pass vtid=xxx&cbf=yyy into links to the next pages.

So a URL on the page such as:

<a href="http://someurl.com/">Some link</a>

Would be rewritten by the JS to give:

<a href="http://someurl.com/?vtid=xxx&cbf=yyy">Some link</a>

Likewise with forms, the form would submit and pass vtid = xxx, cbf = yyy as extra data that the form would receive.

As another example, if you had this:

tokens: { hitid: '{hit-id}', funnel: '{funnel-id}' }

and intoURL was set to true, when you load:

http://someurl.com/lander/

it would load then the URL would change to:

http://someurl.com/lander/?hitid=xxxxxxxxx&funnel=xxxxxxxxxx

This of course would happen without the page reloading.

We use this technique to append a session ID to the URL when using cookieless tracking, so that the tracker in later action links/pages can see this in the referrer.

By the way -- if anything is present in the URL, you can pass it onward as a token by wrapping the field name in two square brackets.

So if you loaded

http://someurl.com/lander/?some-param=banana

You could then pass onward that value of banana to URLs, forms etc. using:

tokens: { fav-fruit: '[[some-param]]' }

These JS functions are extremely useful and can be used as you please to accomplish many different tasks, though they are beyond the scope of most normal usage.

Additional Javascript Functions

We have some other functions from the Javascript code that you can use elsewhere in your landing pages:

fflux.getURLParams()
fflux.getURLParam(key)

What do these do?

getURLParams() will return an object containing all URL querystring parameters
getURLParam(key) will return the value of a specific URL querystring parameter

In most cases it will be easier to use the latter.

Example:
Your URL for a lander is:

https://lander.com/index.html?key1=banana&key2=apple

In your page code you can use fflux.getURLParam('key1') to get the value "banana" and likewise fflux.getURLParam('key2') will retrun the value apple.

This is quite easy to accomplish with Javascript in general but its nice to know that if you are using the FunnelFlux tracking code, you don't need to add any extra javascript to do this.

However, there is one critical requirement: make sure you put the FunnelFlux Javascript at the top of your page, ideally in the <head> section, so that these functions are defined before you try to use them.

If you want to use these functions in the head, e.g. in JS alerts, you will also need to make sure the FunnelFlux JS code comes before such alert code.

We will update this section as we add further functionality. Here's what we have on our roadmap:

Adding JS functions that request country, city, device etc. from your tracking via an API, so that you can use dynamic data that you would normally pass with tokens during a redirect
Adding time on page tracking
Adding bot detection