How to handle margin

This is a demonstration of how to handle margin in native ads to make them seamlessly integrate into the layout of your page. Although this may seem like a trivial matter, it is often overlooked. Getting it right will significantly elevate the look and feel of the website. Some basic principles should be followed:

• Never manually add inline style or classes to the ad containers themselves. This interferes with ADK's ability to manage container styling and can lead to inconsistent behavior.

• Empty containers and any wrapping elements should not take up any horizontal space. This allows the container to collapse without causing unsightly gaps in the case where no ads are delivered. Keep in mind that for example flex or grid gap properties set on the parent or styles applied to child selectors targeting ad containers can affect the horizontal spacing.

• Add adequate spacing to containers when ads are present. This means that any margin should only be applied when ads are actually rendered and removed when they are not. This can be achieved by styling the adk-container-margin class. Style it the way you want the spacing to appear when ads are present, and ADK will handle adding or removing the class as needed.

In this example we have three ad containers in between editorial content. Two containers render ads with different margin applied, while the third is disabled using the enabled setting to make it not render any ads.

adk.config()
    .addTemplate('com.advisible.native.teaser', adk.template.config()
        .url('teaser.html'))

    .addContainer('content-display', adk.container.config()
        .params({
            adapters: {
                'com.advisible.content-display': {
                    render: 'com.advisible.native.teaser',
                    target: '_blank',
                    templateValues: {
                        external: true,
                    }
                },
            },
        }))

    .addContainer('native-teaser', adk.container.config())

    .addContainer('disabled', adk.container.config()
        .enabled(false))

Here the adk-container-margin class is used to set a base bottom margin for all containers and a top margin specifically for the native-teaser container using a CSS attribute selector.

.editorial-content {
    margin-bottom: 16px;
}

.adk-container-margin {
    margin-bottom: 16px;
}

[data-adk-container="native-teaser"].adk-container-margin {
    margin-top: 32px;
}

<div data-adk-container="content-display"></div> <!-- ad with bottom margin -->
<div class="editorial-content">
    Editorial content 1
</div>
<div data-adk-container="native-teaser"></div> <!-- ad with top and bottom margin -->
<div class="editorial-content">
    Editorial content 2
</div>
<div data-adk-container="disabled"></div> <!-- no ad is rendered -> no margin applied -->
<div class="editorial-content">
    Editorial content 3
</div>