Production-like native article landing page
A sticky marking has been added to the article to show that the content is sponsored. Styling and some error handling has been added.
Setup
adk.config()
.addTemplate('com.advisible.native.article', adk.template.config()
.url('article.html'))
.addContainer('native-article', adk.container.config()
.provider('adk.native.article')
.params({
itemId: ..., // <-- Insert id extraction command here.
afterLoad: ({ err, item, elem }) => {
if (!err && item) {
adk.container.attach(elem)
item && (window.document.title = item.headline)
} else {
fetch('/404.html')
.then((response) => response.text())
.then((body) => document.body.innerHTML = body)
}
},
}))
.addContainer('native-marking', adk.container.config()
.fullWidth()
.sticky()
.panel(false) /* Hide from ADK Panel */
.provider(({ elem }) => {
elem.innerHTML = '<div class="native-article__marking">ADVERTISEMENT</div>'
}))
.apply()
.init(publisherId)
Template
<div class="native-article">
<div data-adk-container="native-marking"></div>
<figure class="native-article-image">
<img alt="%headline%" %srcAttrs% />
<figcaption>%assetCaption%</figcaption>
</figure>
<div class="native-article-text">
<div class="native-article-advertiser">%advertiser%</div>
<div class="native-article-headline">%headline%</div>
<div class="native-article-lead">%lead%</div>
<div class="native-article-body">%body%</div>
</div>
</div>
Result