Firstly you need to add the provided BeX code to the page where you wish to have events and transaction tracking.
After that create a script element at the bottom of the website, so that all elements are loaded before the script executes.
This part explores all the possible API functions and variables available to you for tracking, it also contains basic demos to how it should be implemented.
The entire API for tracking is located in the window.bextag.tracking object, when needed you can also use the window.bextag.cmds array to invoke functions once the BeX script is loaded.
Note: Any optional parameters that you don't wish to specify put as null.
An example of how you would do that is the following:
var bextag = window.bextag = window.bextag || {};
var cmds = bextag.cmds = bextag.cmds || [];
cmds.push(function() {
// Enter your code here
});
To use all the functions properly we need to specify some configuration values to the API. These values are then sent with the event functions used.
First we need to specify the campaign name, this is required if we want to send actions. To specify the campaign name we can use the setCampaignName function. An example of how to use the function looks like the following:
var bextag = window.bextag = window.bextag || {};
var cmds = bextag.cmds = bextag.cmds || [];
var tracking = bextag.tracking = bextag.tracking || {};
cmds.push(function() {
tracking.setCampaignName('Test campaign name','optional customer_id');
});
Note: It's highly recommended you specify the campaign name when the BeX script is loaded.
The tracking API includes multiple logging parts to help you figure out what exactly is happening at each stage of the function. Enabling the debugging system is very easy simply copy and paste the code below in the browser console.
sessionStorage.setItem('_bexDebug', true);
location.reload();
Note: The debug is only active per session, closing the tab will remove the debug.
Registering and removing transaction items allows you to control the items that get sent to BeX when the transaction event is sent. This allows BeX to get a more detailed profile of the user based on the items they have purchased. It is highly recommended to do this step.
Note: Only send the items that the user actually purchased, extra could lead to confusion.
To register a transaction item you need to use the addTransactionItem function, which takes the following parameters:
var bextag = window.bextag = window.bextag || {};
var tracking = bextag.tracking = bextag.tracking || {};
document.querySelector('#addToCartButton').addEventListener('click', function() {
tracking.addTransactionItem('Test Item', 10.0, 'Test Id', 'Test category', 1);
});
To remove a transaction item you need to use the removeTransactionItem function, which takes the following parameters:
var bextag = window.bextag = window.bextag || {};
var tracking = bextag.tracking = bextag.tracking || {};
document.querySelector('#removeFromCartButton').addEventListener('click', function() {
tracking.removeTransactionItem('Test Id');
});
For passing data between pages and reloads we can use the integrated pass-through data, which is transfered through the session storage, meaning the data is stored until the session is closed.
To set the pass-through data we can use the passData function.
The action event function takes the following parameters:
var bextag = window.bextag = window.bextag || {};
var tracking = bextag.tracking = bextag.tracking || {};
document.querySelector('#submitButton').addEventListener('click', function() {
tracking.passData('test', { key1: 'value1' });
});
To get the pass-through data we can use the getPassedData function.
The action event function takes the following parameters:
var bextag = window.bextag = window.bextag || {};
var tracking = bextag.tracking = bextag.tracking || {};
document.querySelector('#submitButton').addEventListener('click', function() {
let testData = tracking.getPassedData('test');
});
To delete the pass-through data we can use the removePassedData function.
The action event function takes the following parameters:
var bextag = window.bextag = window.bextag || {};
var tracking = bextag.tracking = bextag.tracking || {};
document.querySelector('#submitButton').addEventListener('click', function() {
tracking.removePassedData('test');
});
Funnels are a great way to track what steps the user took before they got to the eventual ending of the funnel. The ending of the funnel can be hit in multiple ways, either by sending a transaction event or by manually destroying the funnel.
Funnels work on the base of "steps" which are actions that have a funnelStep specified in the parameters, both the steps and funnel id are sent along with the action automatically.
Note: There can only be 1 funnel active at a time, attempting to activate more than one will result in an error. Keep in mind that funnels are site specific!
The funnel can be created by using the openFunnel function, like seen in the example code below.
var bextag = window.bextag = window.bextag || {};
var tracking = bextag.tracking = bextag.tracking || {};
document.querySelector('#goToStoreButton').addEventListener('click', function() {
tracking.openFunnel(funnelId);
});
You can optionally specify the funnelId - any string.
To manually stop or destroy a funnel you can use the closeFunnel function, like seen in the example code below.
var bextag = window.bextag = window.bextag || {};
var tracking = bextag.tracking = bextag.tracking || {};
document.querySelector('#finishBrowsing').addEventListener('click', function() {
tracking.closeFunnel();
});
ProTip: It's always better to have funnels end automatically via transactions, only manually stop them when you have no transaction to do.
Action events are used to notify BeX analytics that a user has completed a specific "action". These actions can range anywhere from simply clicking a specific button to filling out a form. They are called whenever you wish to track a specific action the user can do so you can later see it in the statistics.
The function used to send action events is sendAction.
The action event function takes the following parameters:
var bextag = window.bextag = window.bextag || {};
var tracking = bextag.tracking = bextag.tracking || {};
document.querySelector('#submitButton').addEventListener('click', function() {
tracking.sendAction('Test category', 'Submit', null, 'Test Value', null, null, null, 1);
});
ProTip: By using funnels you are able to get a more accurate representation of how the user moved around the site.
Transaction events are used to notify BeX analytics that a user has completed a purchase. They are built from basic transaction information(total price, shipping price...) and the transaction items which can be registered and removed with the API specified above under "Adding and removing transaction items". The events can then be linked back to the store provider's database, this will allow us to connect the store's user to the BeX's user.
The function used to send transaction events is sendTransaction.
Note: Transaction events should only be called when a purchase has been confirmed!
The transaction event function takes the following parameters:
var bextag = window.bextag = window.bextag || {};
var tracking = bextag.tracking = bextag.tracking || {};
document.querySelector('#purchaseButton').addEventListener('click', function() {
tracking.sendTransaction(15.0, 5.0, null, 'Test Order Id');
});
ProTip: It's recommended that you register transaction items before sending the transaction event.
Tag events or "tags" can be used for sending a specific tag object containing a name and id to multiple "impression pixel" providers. The current list of impression pixel providers that the API's tag supports is:
Note: This API function will always send the tags to BeX's providers and will not send them to the website's providers unless specified otherwise.
The tag sending function takes the following parameters:
var bextag = window.bextag = window.bextag || {};
var tracking = bextag.tracking = bextag.tracking || {};
tracking.sendTag('Simple tag name', 'tag_0', false, [ 'gtag' ]);
Retargeting information can be stored and retrieved through the API.
Adds retargeting data for the specified domain (required), category and item URL.
var bextag = window.bextag = window.bextag || {};
var tracking = bextag.tracking = bextag.tracking || {};
tracking.addRetarget(domain,item_category,item_url,max_items)
Accepted parameters:
Data is saved to the cross-domain storage tracking.frameStore, item _bex_tracking
var bextag = window.bextag = window.bextag || {};
var tracking = bextag.tracking = bextag.tracking || {};
var retargeting_data = tracking.getRetarget()
{
domain1: {
cat1: [{ item: item_url, ts: timestamp }],
cat2: ...
},
domain2: ...
}
Every domain has a list of retargeted categories, with a list of visited URLs with timestamps for each category. Item URL and/or category can be also null - denoting a visit to the domain itself (missing category+URL), or a visit to some general category page (missing URL).