TagManager guidelines for avoiding "Layout Shift"

The Ströer TagManager will follow a set of guidelines and rules, to avoid Layout Shifts as much as possible.
These guidelines will be as transparent as possible, to help you decide which of these rules make the most sense for your website.

Layout Shifts are mainly caused by changing the height of elements on a website, after the user started to interact with the site.
Therefor most guidelines in this document aim to a have clear idea, what the height of an element should be. Furthermore this information needs to be avaible and actable as soon as possible. Ideally this will happen while the users browser is still loading the website.

Especially AdSlots (elements containing advertisements) on a website, are very dynamic entities and change frequently in height or position, causing Layout Shifts.
Our aim is to remove these dynamic changes and “stabilize” an AdSlot to an height that is dependable as much as possible. This “stabilized” height will remain on the AdSlot, as long as the user is viewing your site.

For this, the TagManager will determine the position of the AdSlot on the page (where is the AdSlot visible) and calculate what the user can currently see in his browser (technical: viewport size and scroll behaviour of user is taken into account) at any time during the users visit.
Based on this calculation, AdSlots are continuously clustered and moved between 3 different groups:

• AdSlots currently visible to the user, inside the viewport of the browser.
  Changes to such an AdSlot can cause small to medium Layout Shifts.
  
  

• AdSlots currently above the viewport of the browser.
  Changes to these AdSlots will impact all content beneath the slot and cause major Layout Shifts.
  
  

• AdSlots currently below the viewport of the browser.
  Changes on these AdSlots do not impact the website in any way.

TagManager will do this calculation as resource-efficient as possible and only start on a “need-to-act” base. Our aim is to tax the device of the user as little as possible, to ensure a smooth user experience on your website.

General Guidelines

1. An AdSlot will request to be “stabilized” to a fixed height:

   1. If the AdSlot becomes visible at any time during the users visit.

   2. If the AdSlot is placed above the browsers viewport.

   3. As long as the AdSlot is not visible and placed below the browsers viewport, delay stabilization until Rule A or B is triggered.
      
      

2. When the AdSlots requests stabilization, determine the final height:

   1. Check for any CSS rules set by the website. Use this as base height, as long as no overriding rule is found.

   2. If the AdServer has had enough time to request and deliver a creative, extract the height of the creative.

      1. Only when the creative height is larger than the current CSS rules of the website, use the creative height, otherwise use height of CSS rules.

   3. If creative delivery is not complete, check all available advertising formats on an AdSlot and their height, extract the largest height of all formats.

      1. If height is larger than current CSS rules of website, use the largest format height for stabilization.

Resize Guidelines

When an AdSlot is stabilized there are only a few exceptions to allow for a height change / resize of the AdSlot.
Any resize is done via a small animation, where the height change is done in smaller steps. This will help your users to understand when and why a change to the website is happening.

Resizes are possible under these circumstances:

• AdSlot is allowed to reload (configurable on each AdSlot).
  Reload is based on visibility measurements during the visit of the user. If the user is active over a period of time on your site and can see the AdSlot, it will request and render a new creative.
  A resize will only happen if the new creative height is larger, than the current stabilized height of the AdSlot (potentially layering the ad into the content of the website).
  Revenue impact: approx. 10% - 25% of all revenue depending on website
  
  

• AdSlot is serving a complex, rich-media advertisement format. You can find descriptions and visualizations of these formats in our “Format Specifications”, for example “BrandBooster” and “Fireplace”.
  These formats are limited to the first page of your website (normally the “home” page) but require a very large “foot print” on the site.
  Revenue impact: approx. 5% - 25% of all revenue depending on website
  
  

• AdSlot is not serving any ads and therefor is removed from the site (configurable)
  If an AdSlot can not be filled with any ads, it will leave a blank space on the website. Such an empty slot can be caused by different reasons, like minimum price rules or low demand. We aim to fill an AdSlot as often as possible, but can not guarantee a 100% fill rate.
  In such cases you can either:

  • fill the adslot with your own content, please see our Native Backfill solution

  • leave the AdSlot empty on the site

  • Let TagManager remove the AdSlot (causing Layout Shift)