How to Implement Ad Placement in Liveblog

This guide explains how to create a script for placing ads within the Liveblog feature dynamically. The script ensures ads are inserted between posts both during the initial load and when new posts are added.

📌 For a complete guide on using the Live Blog feature in Newsifier, check out How to Use the Live Blog Feature.

Initial Ad Placement

When the page and Liveblog load, you need to execute a script that counts the existing Liveblog items and places ads between posts accordingly.

Steps:

Detect when the Liveblog content loads.
Count the number of existing posts.
Insert ads between posts at predefined intervals.

Handling Live Updates

Liveblog supports real-time updates with an event listener that triggers whenever a new post is added, removed, or updated. You can use this event to dynamically insert ads between new posts.

Event Listener Example:

<script>  
document.addEventListener('liveblog', function (event) {  
    console.log('New message from liveblog', event.detail);  
});  
</script>

Example Event Object:

{
    "adHtml": "string",
    "article_id": number,
    "blocks_count_to_place_ad": number,
    "event": "created" | "updated" | "deleted",
    "html": "string",
    "is_pinned": boolean,
    "liveblog_id": number
}

How to Use the Event:

Listen for the liveblog event.
Check if a new post is added (event: "created").
Insert an ad after a specified number of posts.

Pagination Handling

Liveblog uses pagination, meaning additional pages are loaded as users scroll or navigate. Currently, there is no event for detecting when a new page loads. If pagination support is required, we can develop an event to trigger when a new page is loaded.

Suggested Approach:

Monitor DOM changes when a new page is loaded.
Recalculate ad placements on new pages.
If an event for pagination is needed, Contact support for help.

Conclusion

By implementing this script, you can ensure that ads are dynamically inserted within Liveblog content, enhancing monetization while maintaining a seamless user experience.