WARNING: This is an Advanced Topic and meant for programmers.

If you are running a SPA (Single Page App), PWA (Progressive Web App), or use any form of JavaScript to load new article content without forcing a hard page refresh, you need to notify the Script Wrapper to scan that new content for in-content ads.

You do this by calling a function exposed by the Script Wrapper and passing in the DOM HTML element containing that new content.

The JavaScript function exposed is:


You want to call this with the actual element itself, and not a selector.

For example, if you are running jQuery, remember to pass in the element itself and not a jQuery selector, e.g. you can do this:


It's also important to note that the element needs to contain the paragraph tags as the direct children of the parent element you're passing in.

For example, if you're inserting:

<div class="new_content post-34">
  <div class="entry-content">
    <p>Lorem Ipsum Dolor</p>
    <p>Lorem Ipsum Dolor</p>
    <p>Lorem Ipsum Dolor</p>

You want to make sure you're passing in the .entry-content element. In the above example, you would want to call:

$mediavine.web.insertContentAds(document.querySelector("#post-34 .entry-content"));

If you are using a third party theme or plugin, you're going to want to run this function inside whatever callback is exposed by the code AFTER the new post has been inserted into the DOM.

For example, inside the Autoload Next Post Wordpress plugin, they expose a post loaded callback you could call into with code such as this:

jQuery('body').on( 'alnp-post-loaded', function( e, post_title, post_url, post_ID, post_count ) {
  $mediavine.web.insertContentAds(document.querySelector(`.post-{post_ID} .entry-content`));

That code is only an example and would need to be checked and updated for your theme or plugin.

If you are manually placing content hints inside your new content you're dynamically inserting, we have a separate function and help guide for that.

Did this answer your question?