Technical Documentation
      Back to home
      1. Knowledge Base
      2. Ad Management
      3. Technical Documentation

      Setting up Skin

      Skin rendering is available through AdManagement

      Skin rendering is available through AdManagement by adding the 1800x1000 size to an ad unit, however certain requirements ought to be checked before enabling it on your stack.

      Skin rendering support and requirements

      For now, skin rendering is only supported to be rendered as a banner extension. This means it is not able to take up the whole space in a website but only be displayed around content from a banner ad unit.

      Example:

      Skin creatives need to be rendered in specific contexts. The following requirements are to be respected if Pubstack wants to guarantee that creatives are displayed correctly:

      • Ad unit used to display skin is atop the content
      • Content (what’s to be surrounded by the skin creative) width is of 1000px maximum
        • Going over this limit is technically possible but the container could obstruct some ad space by doing so

      Before enabling skin

      Because adunits are often shared throughout sites and stacks, adding the 1800x1000 to an ad unit means that skin will be able to be displayed on any site/stack using this ad unit.

      Before doing it, you need to check that every site/stack using the ad unit is compatible with the aforementioned requirements.

      If that’s not the case, Pubstack has two ways of proceeding :

      • Creating duplicates of ad units, with the 1800x1000 size, to be used only in proper contexts
      • Using some specific settings baked in the skin rendering feature

      About floors on Skin bids

      Pubstack is not able to set up floors for a specific size. If you want to keep selling this format to a higher value, UPR settings in GAM have to be set up.

      Skin rendering settings

      For now, they are available through a BackEnd feature setting and are to be handled by techies. These are the available settings :

      👉 These are all available at site or stack level. If a context has both stack and site settings, the stack settings are used in their entirety, without fallback of any property to the site level settings.

      • Disabling 1800x1000 bids on any site/stack.

        • At site/stack level Pubstack can disable bidding on the 1800x1000 size, essentially disabling the feature. This allows to exclude sites/stacks from using skin even though the used adunit is capable of it.

      • Disabling skin style application by kleanads.js

        • When rendering skin creatives, Pubstack applies a specific css class to allow its proper rendering. If you want to handle that themselves Pubstack can disable it at site/stack level. 1800x1000 size bidding will still happen, but once the creative renders Pubstack doesn’t do anything to display it properly.

        💡 This is the case by default for bidders Sublime and Justpremium, as they handle the rendering themselves.

      • Specifying a subset of bidders to bid with on 1800x1000

        • The 1800x1000 size shares bidders with the rest of the sizes, but sometimes this is not convenient or optimal. Pubstack can specify a subset of bidders to be used only for this size.
        • The list is inclusive, not exclusive.

      • Apply small CSS rendering modifications

        • Skin header height (Default value: 250px) → defines the space taken by the top part of the creative, going from the beginning of the creative to the beginning of the site’s content.
        • Top margin (Default value : 0px) → Pubstack can specify a top margin to our skin creative, positive or negative, to adjust its y position relative to the content above it.
        • Content width (Default value : 1000px) → going over this value can truncate the creative so as to not cover the content, but this is possibly detrimental to the actual creative display
        • The skin CSS class is added to the ad container as pbstck_skin_rendering. This class contains the code necessary to render the skin properly.
        • In the skin rendering settings, the additionalSkinRenderingCss property can be used to extend this CSS class to introduce setup specific styling behaviour.

          Add custom CSS to the skin rendering CSS class

      Examples of css rendering settings application 

      header height 220px, margin top 0px, content width 1000px

      With a margin top of 50px (notice the grey area above the skin)

      header height 200px, margin top: 0px, content width 1100px (goes over recommended limit)