Overview
The integration consists in the inclusion of a JavaScript tag that allows acquiring the intentions of users during their navigation on your website. The snippet is made up of two parts:
- The loader: a JavaScript library that has to be loaded on every page. It is required for the other snippets to interact with the Transactionale servers and to enable the UI for end users.
- The tracker: allows tracking the navigation events for your visitors (products they display or buy) that we will use to make the best targeted recommendations.
Implementing the tracker is quick, simple and invisible for users. The quality of our recommendations depends directly on the quality of the tracker implementation, including installing the tag on all the pages, providing all the available parameters, etc.
The tag:
- does not alter in any way the look of the website and is completely invidible to users
- it’s asynchronous and does not slow down loading of the site
- must be integrated in the correct parts of the required pages of the website
Put the loader tag in all the pages
The loader tag goes in the <head> of your base template.
<script>
window._trx = window._trx || [];
window._trx.push({
event: 'setAccount', account: '**API-KEY**', country: 'IT'
});
</script>
<script src="https://static.transactionale.com/trx/v2/trx.js" async="true"></script>
Put the viewPage tag in all the pages
This tag should be inserted preferably before the closing </body>, or in any case after the loader inside the <head> tag.
<script>
window._trx.push(
{ event: 'viewPage'}
);
</script>
You can also invoke the viewPage along with the loader creation:
<script>
window._trx = window._trx || [];
window._trx.push(
{ event: 'setAccount', account: '**API-KEY**', country: 'IT' },
{ event: 'viewPage' }
);
</script>
<script src="https://static.transactionale.com/trx/v2/trx.js" async="true"></script>
Put the trackTransaction in the order confirmation page
This tag should be inserted preferably before the closing </body>, or in any case after the loader inside the <head> tag.
You must fill as many fields as you can with the actual values relative to the order just submitted.
<script>
window._trx.push(
{
event: 'trackTransaction',
transaction: {
id: 'xxxxx', // Order ID
total: xxx.xx, // Required
currency: 'EUR' // EUR by default
},
// The customer object can be removed if the website does not support a dedicated opt-in for data sharing with third parties
customer: {
firstName: 'name', // Optional
lastName: 'surname', // Optional
email: 'indirizzo@email.com', // Optional
optin: false // Optional - if false all the provided data will be discarded
},
// touchpointId: 123, // Always show the provided touchpoint
touchpointType: 'auto' // auto, web, mail
}
);
</script>
<!-- Only for publishers - Defines the spot where the banner or the offers will be displayed -->
<div id="tr_touchpoint_container"></div>
Automatic touchpoint selection
By setting auto as touchpointType, the best touchpoint will be activated automatically according to the values provided. In case the web touchpoint is activated and no touchpointId is provided, the default one will be used.
Web and auto touchpoints
If you are using a web (or auto) touchpoint, you should define where you want the offers to appear in your page.
To do this, insert a <div id="tr_touchpoint_container"></div> in the desired place.
Offers banner
If you want to use the banner version of the web touchpoint, you have two available layouts to choose from: horizontal (default) or vertical.
You can enable a vertical layout by adding the tr-touchpoint-layout-vertical class to the <div> like this:
<div id="tr_touchpoint_container" class="tr-touchpoint-layout-vertical"></div>
The banner will appear similar to the following:
Verify integration and webhook
You can check the correct functioning of the technological integration and the webhook url through these simple instructions: