On-Site JavaScript library

What is the On-Site JavaScript library
How does the On-Site JavaScript library work
Data layer

What is the On-Site JavaScript library

The On-Site JavaScript library delivers the core functionality of the On-Site Messaging Platform:

  • Communication with On-Site Messaging Platform to deliver messaging for placements
  • Optimizing the user experience by leveraging a cache layer
  • Setting cookies in order to assure consistency in delivered messaging
  • Handle interstitial operations to allow user interaction without affecting the website

What does it look like

An example On-Site JavaScript library snippet looks like the code below:

1
<script async src="https://eu-library.klarnaservices.com/merchant.js?uci=11111111-2222-3333-4444-555555555555&country=US"></script>
URL partDescription
URL part
https://eu-library.klarnaservices.com/
Description
Domain address of the CDN
URL part
merchant.js
Description
File name
URL part
?
Description
Query parameter indicator
URL part
uci=11111111-2222-3333-4444-555555555555
Description
On-Site Messaging Client Identifier
URL part
&
Description
Query parameter connector
URL part
country=US
Description
Merchant country

How does the On-Site JavaScript library work

The flow of On-Site JavaScript library will vary slightly depending on the functions it is called upon to perform. Below is a high level summary:

1. Set cookies

The On-Site JavaScript library sets cookies to serve accurate and personalized content to specific website visitors. Cookies are set as follows:

CookieDescription
Cookie
ku1-vid
Description
First party cookie containing visitor identifier
Cookie
ku3-vid
Description
Third party cookie containing visitor identifier
Cookie
ku1-sid
Description
First party cookie containing session id used for caching purposes

2. Visitor profile

The On-Site JavaScript library will attempt to match the current visitor to a Klarna user profile. This will allow for messaging to be personalized for the visitor and improve the user experience.

3. Scan DOM tree for placements

The On-Site JavaScript library will look for placements tags in the DOM tree. An AdServer will match content to the placement tag ID and return the content that will render in the tag.

4. Listen for interstitials

Many ads will contain interstitial events that are initiated when a user clicks a call to action. The On-Site JavaScript library will listen for those events and render the interstitial on click.

Data layer

The On-Site JavaScript library utilizes a data transfer layer to make working with placements flexible. The data layer is a very simplified queue of events that the library will react to.

Example usage of the data layer to refresh all the placements:

1
2
window.KlarnaOnsiteService = window.KlarnaOnsiteService || []  
window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' })