{"id":680,"date":"2021-08-31T06:06:27","date_gmt":"2021-08-31T06:06:27","guid":{"rendered":"https:\/\/www.offerslook.com\/support\/?p=680"},"modified":"2023-07-25T03:24:02","modified_gmt":"2023-07-25T03:24:02","slug":"getting-started-with-the-javascript-sdk","status":"publish","type":"post","link":"https:\/\/www.offerslook.com\/support\/getting-started-with-the-javascript-sdk\/","title":{"rendered":"Getting\u00a0Started with the\u00a0Javascript SDK"},"content":{"rendered":"

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.<\/span><\/p>\n

 <\/p>\n

Step 1: Adding the Snippet<\/b><\/strong><\/span><\/h2>\n

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:<\/span><\/p>\n

<script><\/span>
\n!function(){var o=window.tdl=window.tdl||[];if(o.invoked)window.console&&console.error&&console.error(\"Offerslook 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}}}();<\/span><\/p>\n

tdl.init({ \"<\/span>network_name<\/span>\": \"tracking domain<\/span>\" });<\/span>
\n<\/script><\/span><\/p><\/blockquote>\n

 <\/p>\n

Before you provide the code to your advertiser, you'll need to replace \u201cTRACKING DOMAIN\u201d<\/span> with your network's tracking domain<\/span><\/p>\n

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:<\/span><\/p>\n

http:\/\/test.offerstrack.net\/<\/span><\/pre>\n
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.<\/span><\/p>\n
\u00a0<\/b><\/strong><\/span><\/p>\n
Supporting Multiple Networks with the Same JS SDK<\/b><\/strong><\/span><\/h2>\n
In cases where an advertiser is working with multiple different Offerslook networks, the Javascript SDK can support all of them at the same time.\u00a0 In these cases, the setup is as follows:<\/span><\/p>\n
The 'init' call for the JS SDK should reflect all of the partners the advertiser is working with.\u00a0 This is how the initialization call should be structured in these cases:<\/span><\/p>\n
tdl.init({<\/span>\r\n'[Network Name]':'[Tracking Domain for Network A]',<\/span>\r\n'[Network Name]':'[Tracking Domain for Network B]',<\/span>\r\n...<\/span>\r\n})<\/span><\/pre>\n
Your network name\u00a0can be found in Setting->Customization->Appearance->Network Name.<\/span><\/p>\n
\"\"<\/span><\/p>\n
An example of a successful 'init' call is as follows:<\/span><\/p>\n
tdl.init({<\/span><\/span>\r\n\r\n \u00a0'other1':'https:\/\/testnet1.offerstrack.net',<\/span><\/span>\r\n\r\n \u00a0'othernet2':'https : \/\/othernet2.offerstrack.net'<\/span><\/span>\r\n\r\n})\r\n<\/span><\/span>\r\n<\/pre>\n
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:<\/span><\/p>\n
...&network_name=[Network Name\u00a0FOR THIS NETWORK]<\/span><\/pre>\n
An example Default Destination\u00a0URL would be as follows, with the additional parameter highlighted in bold:<\/span><\/p>\n
https:\/\/offer.advertiser.com?click_id={click_id}<\/b><\/strong>&<\/b><\/strong>network_<\/b><\/strong>name<\/b><\/strong>=<\/b><\/strong>d<\/b><\/strong>emo1<\/b><\/strong><\/span><\/span><\/pre>\n
 <\/p>\n
Step 2: <\/b><\/strong>Recognize<\/b><\/strong><\/span><\/h2>\n
Note: The following section assumes the advertiser has installed the SDK's base code on their page as described above.<\/span><\/p>\n
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\".<\/span><\/p>\n
At it's more basic, the recognize\u00a0method can be called like so:<\/span><\/p>\n
tdl.recognize()<\/span><\/span><\/pre>\n
 <\/p>\n
That will pull the click_id parameter from the URL's query string and store it in the user's browser's local storage.<\/span><\/p>\n
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.<\/span><\/p>\n
 <\/p>\n
Step 3: <\/b><\/strong>Transform<\/b><\/strong><\/span><\/h2>\n
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.<\/span><\/p>\n
At its most basic, the transform method is simply:<\/span><\/p>\n
tdl.transform()<\/span><\/pre>\n
 <\/p>\n
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:<\/span><\/p>\n
tdl.transform({<\/span><\/span>\r\n\r\n \u00a0'event_token':'purchase' ,<\/span><\/span>\r\n\r\n \u00a0'adv_sub1':'abc123'<\/span><\/span>\r\n\r\n})<\/span><\/span>\r\n\r\n<\/pre>\n
Advertiser can also pass the event ID in a similar manner:<\/span><\/p>\n
tdl.transform({<\/span><\/span>\r\n\r\n \u00a0'event_id':'4' ,<\/span><\/span>\r\n\r\n \u00a0'adv_sub1':'abc123'<\/span><\/span>\r\n\r\n})\r\n\r\n<\/span><\/span><\/pre>\n
If the offer is only initial event,no need to add the event_token or event_id parameter,an example would be:<\/span><\/span><\/p>\n
tdl.transform({<\/span><\/span>'adv_sub1':'abc123'<\/span><\/span>})<\/span><\/span><\/p>\n
Step <\/b><\/strong>4<\/b><\/strong>: <\/b><\/strong>Offer Configuration <\/b><\/strong><\/span><\/h2>\n
The destination URL of the offer should includes click_id and network_name parameters.<\/span><\/p>\n
For example,\u00a0<\/span><\/p>\n
https:\/\/offer.advertiser.com?click_id={click_id}<\/b><\/strong>&<\/b><\/strong>network_<\/b><\/strong>name<\/b><\/strong>=<\/b><\/strong>d<\/b><\/strong>emo1<\/b><\/strong><\/span><\/span><\/span><\/pre>\n
The Network Name can be found in Setting->Customization->Appearance->Network Name.<\/span><\/p>\n
\"\"<\/span><\/p>\n
Conversion Protocol is Postback URL.<\/span><\/p>\n
\"\"<\/span><\/p>\n
 <\/p>\n
**PLEASE NOTE**<\/strong><\/span><\/p>\n
When jump to the page where the SDK is added, the URL that triggers the conversion needs to have the click_id parameter, otherwise the conversion cannot be generated.<\/strong><\/span><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
The Javascript SDK o...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[63],"tags":[],"yoast_head":"\nGetting\u00a0Started with the\u00a0Javascript SDK | Help Center<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.offerslook.com\/support\/getting-started-with-the-javascript-sdk\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting\u00a0Started with the\u00a0Javascript SDK | Help Center\" \/>\n<meta property=\"og:description\" content=\"The Javascript SDK o...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.offerslook.com\/support\/getting-started-with-the-javascript-sdk\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-31T06:06:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-25T03:24:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.offerslook.com\/support\/wp-content\/uploads\/2021\/08\/\u56fe\u72471-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4\u5206\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.offerslook.com\/support\/#website\",\"url\":\"https:\/\/www.offerslook.com\/support\/\",\"name\":\"Help Center\",\"description\":\"Offerslook\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.offerslook.com\/support\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-CN\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.offerslook.com\/support\/getting-started-with-the-javascript-sdk\/#primaryimage\",\"inLanguage\":\"zh-CN\",\"url\":\"https:\/\/www.offerslook.com\/support\/wp-content\/uploads\/2021\/08\/\\u56fe\\u72471-1.png\",\"width\":1366,\"height\":487},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.offerslook.com\/support\/getting-started-with-the-javascript-sdk\/#webpage\",\"url\":\"https:\/\/www.offerslook.com\/support\/getting-started-with-the-javascript-sdk\/\",\"name\":\"Getting\\u00a0Started with the\\u00a0Javascript SDK | Help Center\",\"isPartOf\":{\"@id\":\"https:\/\/www.offerslook.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.offerslook.com\/support\/getting-started-with-the-javascript-sdk\/#primaryimage\"},\"datePublished\":\"2021-08-31T06:06:27+00:00\",\"dateModified\":\"2023-07-25T03:24:02+00:00\",\"author\":{\"@id\":\"https:\/\/www.offerslook.com\/support\/#\/schema\/person\/62819052b363256a13a201c816079962\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.offerslook.com\/support\/getting-started-with-the-javascript-sdk\/#breadcrumb\"},\"inLanguage\":\"zh-CN\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.offerslook.com\/support\/getting-started-with-the-javascript-sdk\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.offerslook.com\/support\/getting-started-with-the-javascript-sdk\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.offerslook.com\/support\/\",\"url\":\"https:\/\/www.offerslook.com\/support\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.offerslook.com\/support\/getting-started-with-the-javascript-sdk\/\",\"url\":\"https:\/\/www.offerslook.com\/support\/getting-started-with-the-javascript-sdk\/\",\"name\":\"Getting\\u00a0Started with the\\u00a0Javascript SDK\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.offerslook.com\/support\/#\/schema\/person\/62819052b363256a13a201c816079962\",\"name\":\"master\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.offerslook.com\/support\/#personlogo\",\"inLanguage\":\"zh-CN\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e8c6891dde754fd573d236217f64eccc?s=96&d=mm&r=g\",\"caption\":\"master\"},\"sameAs\":[\"http:\/\/www.offerslook.com\/support\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.offerslook.com\/support\/wp-json\/wp\/v2\/posts\/680"}],"collection":[{"href":"https:\/\/www.offerslook.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.offerslook.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.offerslook.com\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.offerslook.com\/support\/wp-json\/wp\/v2\/comments?post=680"}],"version-history":[{"count":39,"href":"https:\/\/www.offerslook.com\/support\/wp-json\/wp\/v2\/posts\/680\/revisions"}],"predecessor-version":[{"id":1188,"href":"https:\/\/www.offerslook.com\/support\/wp-json\/wp\/v2\/posts\/680\/revisions\/1188"}],"wp:attachment":[{"href":"https:\/\/www.offerslook.com\/support\/wp-json\/wp\/v2\/media?parent=680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.offerslook.com\/support\/wp-json\/wp\/v2\/categories?post=680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.offerslook.com\/support\/wp-json\/wp\/v2\/tags?post=680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}