Snippet

Persoo snippet is a piece of JS code, that ensures the communication with the Persoo server.

Core implementation guidelines:

  • Place the snippet in the production website, testing is ensured within our system. This allows us to gather user statistics right away.
  • Important: the Data Layer INCLUDING THE NECESSARY DATA should always be below the snippet to ensure Persoo is initialized. See more about Data Layer
  • Each domain (example.com, example.co.uk etc.) should have it’s own snippet/API key. Make sure the API keys are different for each domain, unless specified otherwise.

Your snippet will be emailed to you by your Persoo contact.

Snippet example:

 

 

Detailed description of Persoo loading phase and our anti-flickering protection

We want to prevent the original content flickering on the page before the Persoo content is loaded. This is done by hiding the original content while the Persoo content is asynchronously loaded. The progression is following:

  1. The browser parses and processes the page header, which is <head>. The included scripts are called. Persoo snippet will ensure, that the page is not displayed until persoo.js is downloaded. Then it displays the page. The maximum time for waiting for persoo.js is defined in the snippet in settings_tolerance. It’s usually not necessary, since persoo.js is generally loaded before other libraries like jQuery.
  2. When the persoo.js is loaded, request into Persoo is sent. This requests reports the values given by data layer. At the same time, it displays the page and hides only the sections that have some personalization bound to them. The maximum time for these locations to be hidden is defined by personalization_tolerance. If the response with personalized content does not come by this time, the default content is displayed.
  3. The browser meanwhile starts to parse the page’s content, which is <body>, and starts displaying it.
  4. When the personalized data come from Persoo, they are inserted into the right place in the page. This is usually even before the event DOMContentLoaded occurs.
  5. The browser parsed and displayed the page’s content, and call the event DOMContentLoaded.

The default time tolerances are set in the snippet, and the default values are:

 

Caution:

  • If you placed the persoo snippet in the footer, the page will start rendering, only only when it reaches the footer with Persoo snippet will it hide the content. This would lead to an unwanted content flickering if the tolerances are greater than zero.
  • It is evident from the process, why the Persoo snippet needs to be in the page’s header highest as possible. Loading the whole page can last up to 2 seconds. If the first Persoo request gets sent after first 400ms, then it can display personalized content in another 200ms. If the snippet was in the footer, then the personalizations would be available in total time of 2200ms, instead of 600ms.

If you deploy snippet using tag manager (i.e. when you want to collect data only) or you place the snippet in the footer, disable the anti-flickering protection.

Why? Persoo anti-flickering starts when the snippet is loaded, that must be before HTML body is parsed by browser. Otherwise browser shows first body content parsed and then hides it for a short monent, because of anti-flickering protection.

How to disable anti-flickering protection

Set the values of settings_tolerance and personalization_tolerance to zero (in Persoo snippet). This will disable temporary content hiding.

 

Important note: In this case, Persoo will change the page’s content only when it receives the personalized content. This means, when original content is being replaced, that original content will be visible for a fraction of a second. Especially if the user has slow internet connection.

Back To Top
×Close search
Search