Tutorials

How to add related teasers

This example shows how to set up related teasers for native article landing pages and infinite scroll. Related teasers link to other published articles from the same advertiser.

To include related teasers in an article template, use template parameter relatedTeasers:

Article template

<div class="native-article">
    <!-- The rest of the article template... -->
    <h2>More from %advertiser%</h2>
    <div>%relatedTeasers%</div>
</div>

Create and style the teaser template like described in previous tutorials. Load the templates in setup and configure the article container:

Landing page setup

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

    .addTemplate('native-teaser-related', adk.template.config()
        .url('teaser-related.html'))

    .addContainer('native-article', adk.container.config()
        .provider('adk.native.article')
        .params({
            itemId: ..., // <-- Insert id extraction command here.
            relatedTeaserImageAspectRatio: 2,
            maxRelatedTeasers: 3,
            relatedTeaserTemplate: 'native-teaser-related',
        }))

    .apply()
    .init(publisherId)

For scroll placements, the configuration is handled in Advisible Console, so in this case we only link the template.

Infinite scroll setup

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

    .addTemplate('native-teaser-related', adk.template.config()
        .url('teaser-related.html'))

    .addContainer('native-scroll', adk.container.config()
        .provider('adk.placement')
        .params({
            adapters: {
                'com.advisible.native.article': {
                    afterLoad: ({ err, item, elem }) => {
                        !err && item && adk.container.attach(elem)
                    },
                    relatedTeaserTemplate: 'native-teaser-related',
                },
            },
        }))

    .apply()
    .init(publisherId)

Result