Need Help?

Need Help?
Infinite Scroll Fix |

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.