The TUNE Javascript SDK offers client-side functionality for session storage and conversions to Advertisers. By utilizing the Javascript SDK, you'll have the accuracy of server-side postbacks with the setup effort of client-side pixel tracking. This tutorial will walk you through the steps of setting up your Offer, adding the SDK to a page to start & store sessions, and then post a conversion.
Before you Begin
This tutorial assumes you already have your Offer set up. For additional information on creating your first Offer, please visit our article on Creating an Offer.
There are a few steps you'll need to go through before using the Javascript SDK to interact with an Offer.
The Javascript SDK utilizes "server-side" postbacks. In order for the Javascript SDK to work, you'll need to set the attribution method of your offer to Server Postback w/Transaction ID.
In the Offer's default offer URL, you'll want to ensure you're forwarding the transaction_id as a parameter on the URL.
For example, if you're directing traffic to:
https://advertisersite.com/storefront
You'll want to ensure the transaction_id is being appended like so:
https://advertisersite.com/storefront?transaction_id={transaction_id}
Step 1: Adding the Snippet
Adding the Tune Javascript SDK is simple. Paste the code below to the head of any site to add the SDK's functionality:
<script>
!function(){var o=window.tdl=window.tdl||[];if(o.invoked)window.console&&console.error&&console.error("Tune snippet has been included more than once.");else{o.invoked=!0,o.methods=["init","identify","convert"],o.factory=function(n){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(n),o.push(e),o}};for(var e=0;e<o.methods.length;e++){var n=o.methods[e];o[n]=o.factory(n)}o.init=function(e){var n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://js.go2sdk.com/v2/tune.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(n,t),o.domain=e}}}();
tdl.init("YOUR TRACKING SERVER DOMAIN")
</script>
After you paste it, you'll need to replace "YOUR TRACKING SERVER DOMAIN" with your network's tracking server domain. Your tracking server domain can be found in your TUNE account under Offers > Manage Offers by selecting an offer in the Generate Tracking panel. Unless you have set a custom tracking domain, it will look something this:
https://demo.go2cloud.org
The above code will load additional methods asynchronously as to not affect your page's load times. As soon as the code has loaded, you can then call other methods to either track a session or post a conversion. You can do so by calling either of the other two methods: identify or convert.
Supporting Multiple Networks with the Same JS SDK
In cases where an advertiser is working with multiple different TUNE networks, the Javascript SDK can support all of them at the same time. In these cases, the setup is as follows:
For the Advertiser
The 'init' call for the JS SDK should reflect all of the partners the advertiser is working with. This is how the initialization call should be structured in these cases:
tdl.init({
'[Network ID For Network A]': '[Tracking Domain for Network A]',
'[Network ID For Network B]': '[Tracking Domain for Network B]',
...
})
The Network ID for a network is available within a TUNE account on the Company > My Account, within the 'Network Details' area.
tdl.init({
'testnet1': 'https://testnet1.go2cloud.org',
'othernet2': 'https://othernet2.go2cloud.org'
})
For the Network
In cases where a network is working with an advertiser using the TUNE Javascript SDK across multiple networks, they need to ensure that they're including their Network ID in the Offer URLs used for that advertiser. This Network ID is the same ID noted in the Company > My Account page as 'Network ID'. The Network ID should be included at the end of the Offer URL as follows:
...&network_id=[NETWORK ID FOR THIS NETWORK]
https://offer.myadvertiser.com?transaction_id={transaction_id}&network_id=hasoffersdemoStep 2: Identify
Note: The following section assumes you've installed the SDK's base code on your page as described above.
The identify method is called when you want to store or generate a user's session. If you're familiar with our traditional tracking links, this method largely corresponds to a "click".
At its more basic, the identify method can be called like so:
tdl.identify()
That will pull the transaction_id parameter from the URL's query string and store it in the user's browser's local storage.
We recommend using a backend template or theme to help inject the call into the footer or header of every page of your site a user might first visit. That way, no matter which page or product the user first lands on, they will always have their session stored.
The identify function can also be used to generate a session before storage by passing optional parameters to the method itself. You can learn more about it in the SDK method reference.
Step 3: Convert
The convert method enables you to record a conversion using the user's currently stored session. Since the session's transaction ID has the associated affiliate and offer IDs, you do not need to include these when calling the convert method.
At its most basic, the convert method is simply:
tdl.convert()
The convert function is fully capable of handling goals and conversion parameters. Including these optional fields will allow you to record additional information during conversion. If we wanted to record a goal conversion with an additional parameter included, an example would be:
tdl.convert({
'goal_name': 'purchase',
'adv_sub': 'abc123'
})
You can also pass the ID of a goal in a similar manner:
tdl.convert({
'goal_id': '4',
'adv_sub': 'abc123'
})
For more information on using the convert function, please visit the SDK method reference.
Next Steps
This was a brief introduction to storing sessions and tracking conversions. To learn more about what's possible with the Javascript SDK, please visit the SDK method reference.