Tutorials

Production-like native ad setup

In this example we have enabled lazy loading and created a more advanced template with styling.

Lazy loading is a way of postponing loading of content until it is likely that it will be viewable. This can improve the load time of a webpage and the general performance since it evens out the resource usage. It can also significantly improve the viewability of ads. Learn more about the options available for lazy loading here.

Refer to our repository of native templates for examples on styling.

Setup

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

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

Template

<a class="native-teaser" href="%url%">
    <div class="native-teaser__marking">ADVERTISEMENT</div>
    <div class="native-teaser__content">
        <img class="native-teaser__image" alt="%headline%" %srcAttrs%>
        <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