Getting Started with the Javascript SDK

The Javascript SDK offers client-side functionality for session storage and conversions to Advertisers. By utilizing the Javascript SDK, advertiser will have the accuracy of server-side postbacks with the setup effort of client-side pixel tracking. This tutorial will introduce you and your advertiser the steps of setting up your Offer, adding the SDK to a page to start & store sessions, and then fire a conversion.

 

Step 1: Adding the Snippet

Adding the Javascript SDK is simple. Let your advertiser 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”,”recognize”,”transform”],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://common-files.offerstrack.net/ol-sdk.js”;var t=document.getElementsByTagName(“script”)[0];t.parentNode.insertBefore(n,t),o.domain=e}}}();

tdl.init({ “network name”: “tracking domain” });
</script>

 

Before you provide the code to your advertiser, you’ll need to replace “network name” with your network’s network name, and “tracking domain” with your network’s tracking domain.

Your network name can be found in Setting->Customization->Appearance->Network Name.

 

Your tracking domain can be found in Offer Details-> Tracking Link by selecting an affiliate and generate a tracking link. Unless you have set a custom tracking domain, it will look like this:

http://test.offerslooktracker.net/

The above code will load additional methods asynchronously as to not affect the page’s load times. As soon as the code has loaded, advertiser can then call other methods to either track a session or post a conversion. Advertiser can do so by calling either of the other two methods: recognize or transform.

 

Supporting Multiple Networks with the Same JS SDK

In cases where an advertiser is working with multiple different Offerslook networks, the Javascript SDK can support all of them at the same time.  In these cases, the setup is as follows:

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_name”: “tracking domain”,
“network_name1”: “tracking domain1”,
});

An example of a successful ‘init’ call is as follows:

tdl.init({

  ‘other1’ : ‘https://testnet1.offerstrack.net’ ,

  ‘othernet2’:’https : //othernet2.offerstrack.net ‘

})

 

In cases you are working with multiple advertisers using the Javascript SDK, you need to ensure that you’re including your network name in the Destination URLs used for each advertisers. This network name is noted in the Setting->Customization->Appearance->Network Name. The network_name should be included at the end of the Destination URL as follows:

…&network_name=[Network Name FOR THIS NETWORK]

An example Default Destination URL would be as follows, with the additional parameter highlighted in bold:

https://offer.advertiser.com?click_id={click_id}&network_name=demo1

 

Step 2: Recognize

Note: The following section assumes the advertiser has installed the SDK’s base code on their page as described above.

The recognize method is called when the advertiser wants 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 it’s more basic, the recognize method can be called like so:

tdl .recognize ()

 

That will pull the click_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 the ad 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.

 

Step 3: Transform

The transform method enables the advertiser to record a conversion using the user’s currently stored session. Since the session’s Click ID has the associated affiliate and offer IDs, it does not need to include these when calling the transform method.

At its most basic, the transform method is simply:

tdl .transform ()

 

The transform function is fully capable of handling events and postback parameters. Including these optional fields will allow the advertiser to record additional information during conversion. If we wanted to record a event conversion with an additional parameter included, an example would be:

tdl.transform({

  ‘event_token’ : ‘purchase’ ,

  ‘adv_sub1’ : ‘abc123’

})

 

Advertiser can also pass the event ID in a similar manner:

tdl.transform({

  ‘event_id’ : ‘4’ ,

  ‘adv_sub1’ : ‘abc123’

})

 

Step 4: Offer Configuration

The destination URL of the offer should includes click_id and network_name parameters.

For example: https://offer.advertiser.com?click_id={click_id}&network_name=demo1

The Network Name can be found in Setting->Customization->Appearance->Network Name.

Conversion Protocol is Postback URL.

 

The offer tracking domain must be the same as the domain in the JavaScript SDK. If the offer tracking domain is https, the domain in the JavaScript SDK must be https.