Free White Paper: A Rebel's Guide to Building Organic Loyalty


Ads in Listicles: Setting up DFP to Asynchronously Reload

In your RebelMouse site, you have the option to enable asynchronous listicle pages.

This makes for a much better user experience because:

  • You avoid a page reload (which means less waiting time for users, and it produces a faster view of the article).
  • Users aren't taken to the top of the page again, so they don't have to scroll back down to the newly loaded item to continue reading.
  • It's AJAX driven, so each time the user clicks on "Next Page," the items reload much faster than regular, non-asynchronous listicles.
  • Asynchronous listicles enables ads reloading — meaning your ads get refreshed every time the user clicks "Next Page."

See a live example here.

Awesome! How Do I Enable This?

If you want to set up your site to have AJAX-driven listicles and do asynchronous loading by default, please contact your RebelMouse Account Manager — we'll enable it for you in our backend.

OK, and How Can I Enable My Ads to Reload?

Setting up ads to refresh with each page a user clicks through in the listicle is simple with the Layout & Design tool. Please note that we only support DoubleClick for Publishers at the moment.

Here are the step-by-step instructions:

1. Set up Google DFP asynchronous loading in your Ad Header Code/Header Code element. (It's usually located in the Top Bar.) Replace this:

<script type='text/javascript'>(function() {var useSSL = 'https:' == document.location.protocol;var src = (useSSL ? 'https:' : 'http:') +'//<a href="" target="_blank"></a>'; document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');})(); </script>

With this:

<script type='text/javascript'>// Load GPT asynchronouslyvar googletag = googletag || {}; googletag.cmd = googletag.cmd || [];(function() {var gads = document.createElement("script"); gads.async = true; gads.type = "text/javascript";var useSSL = "https:" == document.location.protocol; gads.src = (useSSL ? "https:" : "http:") +"//<a href="" target="_blank"></a>";var node = document.getElementsByTagName("script")[0]; node.parentNode.insertBefore(gads, node);})(); </script>

2. Find the Custom HTML or Ad Tag elements that have the ad tags that you wish to reload with each listicle item. You should replace this code:

googletag.defineSlot('/1771250/7x7_728x90_RestOfSite', [[300, 50], [320, 50], [728, 90], [320,80]], 'div-gpt-ad-1459967663958-3').defineSizeMapping(mapping_leader).addService(googletag.pubads()); googletag.defineSlot('/1771250/7x7_728x90_RestOfSite_2', [[728, 90], [320, 50], [300, 50], [320, 80]], 'div-gpt-ad-1462241457054-6').defineSizeMapping(mapping_leader).addService(googletag.pubads());

With this:

var googletag_refresh_slots = googletag_refresh_slots || [];var refresh_slot1 = googletag.defineSlot('/1771250/7x7_728x90_RestOfSite', [[300, 50], [320, 50], [728, 90], [320,80]], 'div-gpt-ad-1459967663958-3').defineSizeMapping(mapping_leader).addService(googletag.pubads()); googletag_refresh_slots.push(refresh_slot1); var refresh_slot2 = googletag.defineSlot('/1771250/7x7_728x90_RestOfSite_2', [[728, 90], [320, 50], [300, 50], [320, 80]], 'div-gpt-ad-1462241457054-6').defineSizeMapping(mapping_leader).addService(googletag.pubads()); googletag_refresh_slots.push(refresh_slot2);

3. And if the following line of code is included in your tags, please remove it. (It's called sync rendering.) It might not apply to your site, but please do check for it.


You're almost there! Fill out the form below and a Rebel will contact you within one business day.


You're almost there! Fill out the form below and a Rebel will contact you within one business day.