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.

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

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

ad_slot_selector

ad_slot_selector_position

header_ad_dom_position

header_stickiness

scroll_content_selector

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.

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'
        }

Last updated