Header Ad

Direct integration of the Header Ad format into publisher's web pages

Ad Tag Creation

For all the pages where you want to display an Ogury ad, copy one of the following snippets on the placement of your choice inside the page's body.

Custom Code

If you can't or don't want to create the tags by yourself, Ogury can provide a so called Ad Tag. This means that all configuration is done in the Ogury Interface and you don't need to worry about anything. A custom code would look like the tag below and you can use it like any other ad tag:

<script type="text/javascript" data-ccid="CC-SOME-ID" src="https://mwtw.presage.io/v1/tag.js"></script>

CC-SOME-ID corresponds to a unique custom code id that Ogury creates for you and will be automatically replaced for you when providing the Ad Tag

Regular Tag

<script type='text/javascript'>
   window.top.OG_ad_units = window.top.OG_ad_units || [];
   window.top.OG_ad_units.push({
       ad_unit_id: '$OGURY_AD_UNIT',
       asset_key: '$OGURY_ASSET_KEY',
   });
</script>
<script type="text/javascript" src="https://mwtw.presage.io/v1/tag.js"></script>

You need to replace $OGURY_AD_UNIT and $OGURY_ASSET_KEY by the values you received during the configuration in the platform. These values are mandatory for the tag execution.

By default, the Header Ad will render on top of the page. For more customization options, keep on reading the following articles.

For more customisation options, please refer to the common configuration.

Parameter Configuration Details

Below you'll find a list of parameters for the Header Ad format, that can be used to customize the rendering of the ad. Those parameters have to be defined in the params object.

header_selector

Description	HTML Identifier of the website's menu or header to allow the Header Ad to render below it
Prebid.js Notation	headerSelector
Required	no
Type	String
Example Value	'#page-header'

ad_slot_selector

Description	HTML Identifier that allows the Header Ad to render in a predefined HTML container
Prebid.js Notation	adSlotSelector
Required	no
Type	String
Example Value	'#sticky-header'

ad_slot_selector_position

Description	Defines where the ad should be rendered in relation to the given ad slot. Position can be before, after or inside the defined ad slot element. It will be ignored if ad_slot_selector is undefined.
Prebid.js Notation	adSlotSelectorPosition
Required	no
Type	String
Default Value	'CHILD'
Example Value	'CHILD | PREVIOUS | NEXT'

header_ad_dom_position

Description	Used when the Header Ad is supposed to render above the website's menu
Prebid.js Notation	headerAdDomPosition
Required	no
Type	String
Value	'ABOVE_HEADER'

header_stickiness

Description	Used to identify the menus behaviour and facilitate the ad formats rendering
Prebid.js Notation	headerStickiness
Required	no
Type	String
Default Value	'AUTO'
Values	'STICKY | NON_STICKY | AUTO '

scroll_content_selector

Description	Identifies the element in the page that registers the scroll events for the website's content
Prebid.js Notation	scrollContentSelector
Required	no
Type	String
Example Value	'#page-content'

Example Configurations

Header Ad below the Menu

The header_selector can be set with the identifier of your page's header. or menu. It is based on the javascript querySelector method. For example, if your header is defined by:

<header id="page-header-id" class="page-header-class">My Home page</header>

Then, the configuration snippet should contain:

params:{
   header_selector: '#page-header-id'
}

It's recommended to work with HTML IDs if possobile, but alternatively you can work with class names as well. Just make sure that they are unique throughout the page:

params:{
   header_selector: '.page-header-class'
}

You can also chain class names by connecting them with dots:

params:{
   header_selector: '.page-header-class.page-header-class2'
}

Embedding inside an ad slot

It is possible to show the header ad inside a predefined ad slot in your page for initial positioning.

initial position

After the user scrolls, the ad will stick below the header of the page.

We recommend this configuration to limit the impact of header ads on the Cumulative Layout Shift metric. In fact, the ad is inserted in the place hold by the slot and that reduces the shift of the page elements.

You can enable embedding inside an ad slot by using the ad_slot_selector parameter. It is based on the javascript querySelector method and has to be filled with the HTML element identifier of an ad slot in your page. For example, if your ad slot is defined by:

<div id="ad-slot-id" class="ad-slot-class" width="100%"></div>

Then, the configuration snippet should contain:

params:{
   header_selector: '#page-header-id'
   ad_slot_selector: '#ad-slot-id'
}

Alternatively you can work with class names, but make sure that they are unique throughout the page:

params:{
   header_selector: '#page-header-id'
   ad_slot_selector: '.ad-slot-class'
}

You can also chain class names by connecting them with dots:

params:{
   header_selector: '#page-header-id'
   ad_slot_selector: '.ad-slot-class.ad-slot-class2'
}

For the initial positioning, the header ads take the full width of the screen and adapt ad height to 16/9 ration, even if the ad slot is smaller.

After user scrolling, the header ads override ad slot stickiness if any.

When a header ad is finished, the ad slot is restored to its initial position.

safe frames are not currently supported as header ad predefined slots.

Header Ad above the header

By default the Header Ad position will be below the header of your page but it is possible to show the ad above it.

Initial positioning will be a 16/9 rectangle following standard header ad size rules and after the user scrolls, the size will be minimized :

Then, the configuration snippet should contain:

params:{
   header_selector: '#page-header-id',
   header_ad_dom_position: 'ABOVE_HEADER'
}

It is also possible to combine Header Ad above the header of your page and header ad inside a predefined ad slot in your page.

Then, the configuration snippet should contain:

params:{
   header_selector: '#page-header-id',
   ad_slot_selector: '#ad-slot-id',
   header_ad_dom_position: 'ABOVE_HEADER'
}

Header stickiness

By default, the header ad will automatically adapt its behavior to the stickiness of the header of your page. You may still use the header_stickiness parameter to explicitly define the expected behavior of your page's header.

The following values are supported:

• AUTO: this is the default value. It instructs the header ad to adapt automatically to the changes of the page's header which can be sticky, non sticky or both, depending on the user actions.

• STICKY: the header of the page will be considered as sticky.

• NON_STICKY: the header of the page will be considered as non sticky.

        params:{
           header_selector: '#YOUR_PAGE_HEADER_IDENTIFIER',
           header_stickiness: 'STICKY' | 'NON_STICKY' | 'AUTO'
        }

Managing Scroll Content

By default, the tag is listening the scroll event of the topmost window which is usually used for regular websites. Some websites might manage the scroll of their content via another HTML element, such as the body or a div inside the body. In that case the header ad cannot be minimized/optimized.

Via the custom parameter scroll_content_selector, the tag will listen to the scroll event of the indicated HTML element to be able to minimize/optimize the header ad. The selector is based on the JS document.querySelector() that allows you to indicate class names, ids, HTML tags and tag attributes.

        params:{
           header_selector: '#YOUR_PAGE_HEADER_IDENTIFIER',
           scroll_content_selector: '#YOUR_SCROLL_CONTENT_IDENTIFIER'
        }