Tutorials

How to load multiple teasers in one placement

Inventory can be increased by displaying multiple ads in one placement. The number of ads that are requested is configured on the placement source in Advisible Console. The items are displayed in a multi-container that can be styled as exemplified below.

It is not necessarily more profitable to display multiple adjacent ads than one single ad, so we encourage you to monitor your metrics. Advisible measures viewability and CTR per item, allowing you to analyze performance properly.

Setup

adk.config()
    .addTemplate('com.advisible.content-display', adk.template.config()
        .url('teaser.html'))

    .addContainer('double-teaser', adk.container.config()
        .provider('adk.placement')
        .fullWidth()
        .fullHeight()
        .params({
            forceGroup: true,
            afterLoad: ({ itemCount }) => {
                /* itemCount is the number of ads delivered to this multi container */
            },
        }))

    .apply()
    .init(publisherId)

Styling

[data-adk-group] {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    [data-adk-group] {
        grid-template-columns: repeat(2, 1fr);
    }
}

Result