In-Article Ad

Direct Integration of the In-Article format into the publisher's web pages

Last updated 1 year ago

Was this helpful?

In-Article Ad

Direct Integration of the In-Article format into the 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

<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" async></script>

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

For more customisation options, please refer to the .

Parameter Configuration Details

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

ad_slot_selector

Description

HTML Identifier that allows the In-Article Ad to render in a predefined HTML container

Prebid.js Notation

adSlotSelector

Required

Type

String

Example Value

'#in-article-slot-1'

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

Type

String

Default Value

'CHILD'

Example Value

'CHILD | PREVIOUS | NEXT'

fixed_elements

Description

Only the first element is taking into consideration for the moment. It's to declare the header of the website to adjust the size and position of the reveal format.

Prebid.js Notation

fixedElements

Required

Type

Array<String>

Example Value

['#header']

Example Configurations

Embedding inside an ad slot

It is possible to show the In-Article Ad inside a predefined ad slot in your page for initial positioning.

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:{
   ad_slot_selector: '#ad-slot-id'
}

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

params:{
   ad_slot_selector: '.ad-slot-class'
}

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

params:{
   ad_slot_selector: '.ad-slot-class.ad-slot-class2'
}

When an in-article ad is finished, the ad slot is restored to its initial position.

Embedding without an ad slot

If you are not specifying an ad slot selector, the In-Article will be inserted at the same level of the frame where our script is executed.

Example:

<body>
    <header>header website</header>
    <section>
        <div>
            <p>some content</p>
            <div class='slot-1'>
                <iframe id='google-gam-frame|prebid-frame|tam-frame'>
                    <body>
                        <script src='ogury-script.js'></script>
                    </body>
                <iframe>
            </div>
            <p>some content</p>
            <div id='slot-2'></div>
            <p>some content</p>
        </div>
    </section>
</body>

In this example, the In-Article Ad will be inserted into the div slot-1 . This is the first parent div where the script is executed.

Direct integration without an adSlot

For direct integration, if you don't want to specify an adSlotSelector, you should put the script into the div where you want to display the In-Article Ad.

Example:

<body>
    <header>header website</header>
    <section>
        <div>
            <p>some content</p>
            <div class='slot-1'>
                <script src="https://mwtw.presage.io/v1/tag.js" async></script>
            </div>
            <p>some content</p>
            <div id='slot-2'></div>
            <p>some content</p>
        </div>
    </section>
</body>

In-Article Formats

By default, the In-Article Ad will be compatible with all formats (300x250, landscape and reveal)

Reveal

300x250

Landscape

Last updated 1 year ago

Was this helpful?

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.

<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

<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" async></script>

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

For more customisation options, please refer to the .

Parameter Configuration Details

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

ad_slot_selector

Description

HTML Identifier that allows the In-Article Ad to render in a predefined HTML container

Prebid.js Notation

adSlotSelector

Required

Type

String

Example Value

'#in-article-slot-1'

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

Type

String

Default Value

'CHILD'

Example Value

'CHILD | PREVIOUS | NEXT'

fixed_elements

Description

Only the first element is taking into consideration for the moment. It's to declare the header of the website to adjust the size and position of the reveal format.

Prebid.js Notation

fixedElements

Required

Type

Array<String>

Example Value

['#header']

Example Configurations

Embedding inside an ad slot

It is possible to show the In-Article Ad inside a predefined ad slot in your page for initial positioning.

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

Then, the configuration snippet should contain:

params:{
   ad_slot_selector: '#ad-slot-id'
}

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

params:{
   ad_slot_selector: '.ad-slot-class'
}

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

params:{
   ad_slot_selector: '.ad-slot-class.ad-slot-class2'
}

When an in-article ad is finished, the ad slot is restored to its initial position.

Embedding without an ad slot

If you are not specifying an ad slot selector, the In-Article will be inserted at the same level of the frame where our script is executed.

Example:

<body>
    <header>header website</header>
    <section>
        <div>
            <p>some content</p>
            <div class='slot-1'>
                <iframe id='google-gam-frame|prebid-frame|tam-frame'>
                    <body>
                        <script src='ogury-script.js'></script>
                    </body>
                <iframe>
            </div>
            <p>some content</p>
            <div id='slot-2'></div>
            <p>some content</p>
        </div>
    </section>
</body>

In this example, the In-Article Ad will be inserted into the div slot-1 . This is the first parent div where the script is executed.

Direct integration without an adSlot

For direct integration, if you don't want to specify an adSlotSelector, you should put the script into the div where you want to display the In-Article Ad.

Example:

<body>
    <header>header website</header>
    <section>
        <div>
            <p>some content</p>
            <div class='slot-1'>
                <script src="https://mwtw.presage.io/v1/tag.js" async></script>
            </div>
            <p>some content</p>
            <div id='slot-2'></div>
            <p>some content</p>
        </div>
    </section>
</body>

In-Article Formats

By default, the In-Article Ad will be compatible with all formats (300x250, landscape and reveal)

Reveal

300x250

Landscape