DFP creative:
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
<script>
let event = new CustomEvent('post:scroll', { post_id: 1 });
document.dispatchEvent(event);
</script>
post_id could be a DFP creative template variable for this type of creative
Parent Page:
document.addEventListener('post:scroll', function (detailObj) {
let postId = detailObj.post_id;
// Fetch post with that ID from back-end and insert into DOM
});
DFP creative:
<script>
let parentPage = siteDocument;
parentPage.someNamespace.insertScrollPostById(1);
</script>
Parent Page:
window.someNamespace = {
insertScrollPostById: function(postId) {
// Fetch post with that ID from back-end and insert into DOM
},
};
In either case, parent page could decide not to inject anything into the DOM based on logic if that post was the permalink.
Our example with custom components:
<bulbs-reading-list>
<bulbs-reading-list-articles reading-list-id="0">
<bulbs-reading-list-item
data-id="5316"
data-href="/article/eerie-compilation-proves-lone-seagull-has-been-fol-5316"
data-partial-url="/article/eerie-compilation-proves-lone-seagull-has-been-fol-5316?partial=true"
data-title=" Eerie: This Compilation Proves That A Lone Seagull Has Been Following Obama Everywhere For Years">
</bulbs-reading-list-item>
<bulbs-reading-list-item
data-id="5201"
data-href="/clickventure/its-251-m-can-you-fall-asleep-5201"
data-partial-url="/clickventure/its-251-m-can-you-fall-asleep-5201?partial=true"
data-title=" It’s 2:51 A.M. Can You Fall Asleep?">
</bulbs-reading-list-item>
</bulbs-reading-list-articles>
</bulbs-reading-list>
If you were to use custom components to manage all page state tracking, analytics, and mark-up rendering, you could keep the logic that handles the DFP custom creative very lightweight and use the same component infrastructure you would use for any other post in the infinite scroll UX