Implementation with infinite scroll

Websites using infinite scroll must perform some additional steps to ensure that ad rendering works properly.

1. 1. Call htlbid.setTargeting()
2. 2. Call htlbid.newPage()

This ensures that targeting is updated, pageview counting works correctly, and that certain 3rd party modules are properly notified of user navigation.

The newPage() function is asynchronous and returns a Promise

htlbid.cmd.push(() => {
  htlbid.setTargeting("post_id", "12346");
  htlbid.newPage().then(() => {
    // insert new ad DIVs
  });
});

The setTargeting() and newPage() functions must be called at the appropriate point in the lifecycle of infinite scroll pages.

• If called too-early, 3rd party modules may not receive the new metadata and page URL
• If called too-late, ad requests may be sent to GAM before 3rd party modules have updated

A correct implementation should execute in the following order:

1. 1. User scrolls near bottom of current page
2. 2. Next page content is fetched from CMS
3. 3. URL changes
4. 4. Call htlbid.setTargeting()
5. 5. Call htlbid.newPage()
6. 6. Insert new ad slot DIVs into DOM

Gotchas

Preloading infinite scroll content

Some websites automatically preload the next 2-3 pages of content, instead of just one, in order to provide users with a smoother infinite scroll experience. This can cause ads to receive incorrect targeting metadata for the wrong page. A correct implementation should be triggered when the URL changes, rather than when the content is loaded.

Scrolling back up the page

Users might scroll back up too. Failure to implement logic for scrolling back up to earlier content may cause incorrect targeting to be passed to GAM when ads refresh.

Ad DIVs are built-in to the content and cannot be inserted later

Infinite scroll can be implemented in many different ways. One common method is to load each new page of content as a chunk of HTML. Depending how your CMS and infinite scroll code works, you might be fetching something like this for an infinite scroll page

<div class="page page-1383 article">
  <h1>My next page</h1>
  <p>Lorem ipsum..</p>
  <p>Lorem ipsum..</p>

  <div class="htlad-medrec"></div>

  <p>Lorem ipsum..</p>
  <p>Lorem ipsum..</p>
</div>

That is to say, the ad DIVs are already included in the HTML.

This can cause problems. Based on the guide above, DIVs should be loaded at the very end, in Step 6. But here the DIVs would be loaded in Step 2, as soon as the new content is added to the DOM.

There are 2 ways to solve this:

1. 1. Set all ads on infinite scroll content to be lazy loaded
2. 2. Use a placeholder class name, and then use javascript to dynamically swap the placeholder