JavaScript Reference

Kodo Ad Network Script

The Kodo Ad Network script needs to be placed on the checkout confirmation page so that your experience can appear for customers. This can be done via a tag manager like GTM, if you have one in place, or directly on the page.

Splash

For the highest revenue opportunity, we recommend using the Splash experience.

<html>
  <script>
    __thanks = {
      partnerId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      statusText: "Your order is confirmed!",
      email: "[email protected]",
      enabledPersonalInformationSubjects: {
        relevance: true,
        autofill: true,
        notification: true
      },
      onPersonalInformationRequest: (subject, { token }) => {
        return {
          email: "[email protected]",
          firstName: "Emma",
          lastName: "Jackson",
          phoneNumber: "+12025550125",
          dateOfBirth: "2000-09-15",
          age: 25,
          gender: "female"
        }
      },
      customerLocation: {
        country: 'US',
        postcode: '90210'
      },
      keywords: ["apple", "banana", "orange"],
      categories: ["food", "fruits"],
      items: [{
        name: 'Apple',
        category: 'fruit',
        value: 10,
        currency: 'USD',
        quantity: 10
      }]
    };
  </script>
  <script src="https://thanks.is/v1/widget.js" defer></script>
</html>

Embedded

You can also use the Embed experience by including the embeddedInto parameter, which points to the element the experience should render into:

<html>
  <style>
    #offers-embed {
      width: 100%;
      height: 120px;
    }
  </style>
  <div id="offers-embed"></div>
  <script>
    __thanks = {
      partnerId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      statusText: "Your order is confirmed!",
      embeddedInto: () => document.getElementById('offers-embed'),
      email: "[email protected]",
      enabledPersonalInformationSubjects: {
        relevance: true,
        autofill: true,
        notification: true
      },
      onPersonalInformationRequest: (subject, { token }) => {
        return {
          email: "[email protected]",
          firstName: "Emma",
          lastName: "Jackson",
          phoneNumber: "+12025550125",
          dateOfBirth: "2000-09-15",
          age: 25,
          gender: "female"
        }
      },
      customerLocation: {
        country: 'US',
        postcode: '90210'
      },
      keywords: ["apple", "banana", "orange"],
      categories: ["food", "fruits"],
      items: [{
        name: 'Apple',
        category: 'fruit',
        value: 10,
        currency: 'USD',
        quantity: 10
      }]
    };
  </script>
  <script src="https://thanks.is/v1/widget.js" defer></script>
</html>

Note: This CSS is currently recommended; however, the Embed experience will likely evolve over time, and the recommended styling may change to reflect different placements on a page. If you have any requests or recommendations (such as a new desired size), please let us know!

Embed Slots

Some of our Embed variations use "slots" to support different shapes and sizes of HTML embed elements. The current slot sizes are:

• 300X250 - Square (300 x 250)
• 300X600 - Skyscraper (300 x 600)
• 460X94 - Horizontal (460 x 94)
• 728X90 - Leaderboard (728 x 90)
• 970X90 - S Leaderboard (970 x 90)
• 360X144 - Responsive, dynamic width
• 320X100 - Responsive, dynamic width
• 970X250 - S Leaderboard (970 x 250)
• 128px, dynamic width (used for mobile sizes)

Other sizes may be available. Please contact us if you don't see your desired size.

The slots are not currently dynamic or interchangeable; that is, the same embed cannot be converted between slots at runtime. Each desired slot has to be added to the page before the Kodo Ad Network script loads.

Configuration Reference

See Configuration parameters

Advanced usage

To improve the performance of your experience, provide extra information.
The important parts are:

• Providing a customer email. Only a sha256 hash is transferred during the widget lifecycle. No sensitive information leaves your application without your permission.
• Giving permission to send personal information to improve the efficiency of communications
  • subject and info can be used to decide what information to send
    • subject can be relevance, notification, or autofill
  • info.token is a unique identifier for the request and can be used to trace PII flow further in our systems
• keywords, categories, and items are used to fine-tune the ads displayed

Managing Personal Information

By default, the SDK does not send any personal information. The email specified in the configuration is always converted into a sha256 emailHash before being sent to the server. The SDK requests personal information via the onPersonalInformationRequest function with subject and info arguments. You may decide to return some information, or return nothing.

onPersonalInformationRequest: (subject: 'relevance' | 'notification' | 'autofill', info) => {
  return {
    email,
    firstName: 'TestUser',
  };
};

• A notification subject is used to send an email notification to the user about the action just taken, for example a coupon code they just claimed
• An autofill subject is used to prefill a form with the user's data, making the subscription process faster
• A relevance subject is used to improve the relevance of the offers shown

onPersonalInformationRequest is optional. If it is not defined, no personal information is shared, even when email is provided in the configuration, and notification and autofill are skipped. The process of capturing PII is always in the partner's hands.