Tutorials

Production-like native ad setup

In this example we have enabled lazy loading and created a more advanced template with styling. We will revisit styling later and look at some CSS. For now, click on the ad to see the landing page.

Setup

adk.config()
    .addTemplate('com.advisible.native.teaser', adk.template.config()
        .url('teaser.html'))
    .addContainer('native-teaser', adk.container.config()
        .provider('adk.placement')
        .lazy())
    .apply()
    .init(publisherId)

Template

<a class="native-teaser" href="%url%">
    <div class="native-teaser-marking">ADVERTISEMENT</div>
    <div class="native-teaser-content">
        <div class="native-teaser-image">
            <img sizes="%sizes%" alt="%headline%" %srcAttrs%>
        </div>
        <div class="native-teaser-text">
            <div class="native-teaser-headline">%headline%</div>
            <div>
                <span class="native-teaser-advertiser">%advertiser%</span>%lead%
            </div>
        </div>
    </div>
</a>

Result