Javascript tracking of page views

Avatar

By Zeno

updated about 1 month ago

Global Javascript Snippet

Before tracking any Javascript events, you need to include our global snippet.

This can be found in Settings > Tracking Codes in the navigation.

It can be placed anywhere on your page and should only be included once per page.

Tracking Page Views

Firstly, note that our global snippet already includes a page view event in the fluxInitTracking() function that is called once our snippet has finished loading:



So, you do not need to add further code if your goal is to just track a page view.

That aside, you can send page view events at any time using the method flux.track("view").

In full, our view tracking method is:

flux.track("view", { optional arguments }, optionalCallbackFunction)

All JS methods can only be used once our global snippet has loaded and created the flux object, else they will return a flux is not defined error.

Optional Arguments

Additional attribute overrides for view and conversion events can be sent as the second argument of flux.track. They must be an object.

Tracking Attributes

Pages may have a fluxDefaults embedded placed on them before our JS that set default tracking attributes like page ID, funnel ID, etc.

Additionally, you can pass these directly into the view event code. Values here will override any JS defaults.

The priority in which our tracking API uses these is event-level arguments > URL parameters > fluxDefaults object. So, code pushed into the event is the highest priority.

The available attributes are:

  • p - page ID
  • f - funnel ID
  • n - node ID
  • ts - traffic source ID
  • vid - visitor ID

Note that we validate visitor ID automatically, so pushing incorrect values will result in it being ignored.

So, you may for example push view events with a specific page ID declared:

flux.track("view", { p: 'some_page_id' })

Or with a specific funnel and node ID:

flux.track("view", { f: 'some_funnel_id', n: 'some_node_id })

Tokens to Resolve

Secondly, you may pass tokens you would like our API to return, in addition to the defaults of {visitor} and {current-node-id} that are always returned.

Tokens must be passed under the name resolveTokens with all tokens present in an array, with the token encapsulated in curly brackets as is used inside the FunnelFlux UI.

For example:

flux.track("view", { resolveTokens: ['{country-name}','{isp}','{browser}'] })

When sent, the response from our API will include these items. They can then be accessed using the flux.get() method, see our documentation here.

If using these tokens we recommend using a callback function or event listener so that you process and use them only once they are returned.

Optional Callback Function

The third and optional argument of the view method is a callback function.

flux.track("view", {}, callbackFunctionName)

If no optional attributes are sent in the second argument, you should include a blank object - do not omit it. The following code will not work:

flux.track("view", callbackFunctionName)

As it sends the function as the second argument rather than third.

This can be any function you create, as long as it exists in the code prior to the event executing. Firing events as above when the function has not yet been defined will result in the view failing.

This function will be called immediately after our event listener fluxView happens, so both are effectively equivalent from a sequence point of view. Use whichever suits best. 

See our documentation on other methods/functions for information on event listeners that are available.


Tracking Views in a Single Page App

If you want to send page view events manually and independently of our global snippet (such as in a single page app), you should remove the callback/function from our global snippet.

As in the below (non-minified) global snippet, you would remove the callback after new Lumetric() and the corresponding function after our main snippet code:



From here, you can then manually fire the page view events as described earlier.

As long as the page URL changes before our view event initiates, the API should receive the expected URL, which it will match against pages in the current funnel to determine node ID.

If required, you can push page ID values in each event to override the URL matching used.

You should not need to load the global snippet more than once provided flux = new Lumetric() has executed fine, and the flux object is available.

Our snippet already includes a check for if flux exists, and if so, it does not attempt to download and re-inject the script, nor execute flux = new Lumetric().

The API Request and Response

View events will send a POST request to DOMAIN/js/funnel:



You can filter to find this request by searching for "funnel" and Fetch/XHR requests.

The response, if successful, will look like this:



The resolvedToken items can be accessed easily with the flux.get() method.

In some cases errors may occur, or the response could be broken. 

A few simple checks confirm if the tracking request was successful:

  • The fluxView event was dispatched (see event listeners)
  • The POST response has error = null
  • The POST response has a real value for resolvedTokens["{current-node-id}"]

Did this answer your question?