Skip to main content

Avoiding "Layout Shifts"

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 available and act able as soon as possible. Ideally this will happen while the users browser is still loading the website.

AdSlots (elements containing advertisements) are dynamic and change frequently in height or position, causing Layout Shifts. Our aim is to remove these dynamic changes and “stabilize” an AdSlot to a height that is dependable and remains 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 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 cause layout shift.

MetaTag 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:
    • If the AdSlot becomes visible at any time during the users visit.
    • If the AdSlot is placed above the browsers' viewport.
    • As long as the AdSlot is not visible and placed below the browsers viewport, delay stabilization.
  2. When the AdSlots requests stabilization, determine the final height:
    • Check for any CSS rules set by the website. Use this as base height, as long as no overriding rule is found.
    • If the AdServer has had enough time to request and deliver a creative, extract the height of the creative.
      • 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.
    • If creative delivery is not complete, check all available advertising formats on an AdSlot and their height, extract the largest height of all formats.
      • 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 is changed in smaller steps. This will help your users to understand when and why a change to the website is happening.

Resizes can be caused by:

  • Reloading AdSlot, showing a new ad. Reload is based on visibility measurements during the visit of the user. A resize will only happen if the new creative height is larger, than the current stabilized height.

  • Serving a complex, rich-media advertisement format. These formats usually require more space than the initial size of an AdSlot.

  • AdSlot is not serving any ads and stays "empty". Such an empty slot can be caused by minimum price rules or low demand.
    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, causing a "blank / white / unfilled" space on your site.
    • Let TagManager remove the AdSlot, causing Layout Shift when the content contracts.