Infinite Scroll Fix | Taboola

Infinite Scroll Fix

Infinite Scroll Fix

The most common cause for your widget rendering twice on an infinite scroll is related to the way the code is implemented. To implement a quick fix, follow these code implementation instructions:

We recommend loading the Loader (make sure it is only loaded once!) in the <head> section of page as it loads

<script type="text/javascript">
!function (e, f, u) {
e.async = 1;
e.src = u;
f.parentNode.insertBefore(e, f);
}(document.createElement('script'), document.getElementsByTagName('script')[0],

NOTE: The code below must be executed whenever a new "page" is scrolled into view (including the initial page that is loaded).
Use the same criteria as when deciding when to set the address bar URL to a new page URL

1- You Must Create a New Container for the Taboola Widget.

Since the container needs to have a unique id in the DOM (previous widget containers in the infinite scroll still exist in the DOM), you need to generate a unique id for the container.

For example: Let's assume you maintain a page count in a global variable named “window.page_counter”:

<script type="text/javascript">
taboola_container_id = 'taboola-below-article-' + page_counter;
// Create DOM element to contain the widget using above id

2- You Can Create Your Widget by Pushing Relevant Commands to the Taboola JavaScript API.

<script type="text/javascript">
window._taboola = window._taboola || [];
_taboola.push({mode:'hybrid-thumbs-2r', container: taboola_container_id, placement: 'Below Article Thumbnails', target_type: 'mix'});
_taboola.push({article:'auto', url:'pass-canonical-url-here'});

Please Note:
 - _taboola.push({article:'auto'}) should be modified as necessary to specify the correct page type on which the widget will be rendered. 
 - pass-canonical-url-here should be replaced with the canonical url of the new page that has been scrolled into view.