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 group 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.

When multiple ads are delivered, child containers are wrapped in a group container with the attribute data-adk-group. This can be targeted with CSS to apply specific styling to the group of ads. This example also uses the forceGroup parameter to always render the group container regardless of the number of ads which can sometimes simplify styling.

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

    .addContainer('multi-teaser', adk.container.config()
        .params({
            forceGroup: true,
        }))

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

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