Header Ad
Direct integration of the Header Ad format into publisher's web pages
For all the pages where you want to display an Ogury Header Ad, copy the following snippet on the placement of your choice inside the page's body.
<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 src="https://mwtw.presage.io/v1/tag.js" async></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.
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. 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' |
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' |
Description | Defines where the ad should be rendered in relation to the given ad slot. Position can be before, after or inside of 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' |
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' |
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 ' |
Description | Identifies the element in the page that registers the scroll events for the website's content |
Prebid.js Notation | scrollContentContainer |
Required | no |
Type | String |
Example Value | '#page-content' |
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'
}
You may have elements in your web page that need to be temporarily displayed above the Header Ad in order to allow interactions with the users (i.e, menus, modals ...).
In that case you should trigger custom Javascript events that would bring the Header Ad to background and then to foreground again.
Example
Let's consider the case where you have a page menu identified by
burger-menu-id. You should include code similar to the following in your menu handling function in order to send the Header Ad to the background.const burgerMenu = document.getElementById('burger-menu-id');
burgerMenu.addEventListener('click', () => {
// send the Header Ad to background
window.top.dispatchEvent(new Event('ogy_hide'));
// show the menu
...
});
Afterwards, you should bring the Header Ad back to foreground as follows:
const burgerMenuItem = document.getElementById('burger-menu-item-id');
burgerMenu.addEventListener('click', () => {
// update the content of some page elements
...
// bring the Header Ad to foreground
window.top.dispatchEvent(new Event('ogy_show'));
});
If the Header Ad creative is a video, it will stop playing on
ogy_hide event and resumed on ogy_show .Please make sure you properly use the events described above as they may impact the viewability and the performance of the ads on your web pages.
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.
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'
}
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'
}
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'
}
Last modified 2mo ago