Infinite Scroll
Overview
Introduction
This page explains how to integrate Taboola recommendations into a web page with infinite scroll (aka continuous scroll), using the param values provided by Taboola.
Infinite scroll (aka continuous scroll)
This integration applies to any page in which the user can continuously scroll for additional articles (even if the number of articles is limited).
Prefilled scripts
If you received prefilled scripts from Taboola, you can copy and paste them 'as is', instead of editing param values.
New integration?
If this is a new integration, please provide Taboola with a timeframe for launch, so we can plan post-launch QA.
Terminology & flow
Taboola loader
Loads your publisher-specific configurations and fetches your Taboola recommendations.
In order not to impact page load time,
loader.js
is loaded asynchronously.
The
_taboola
command queueA global array whose existence is ensured by the following code:
window._taboola = window._taboola || [];
You communicate with the Taboola loader by 'pushing' commands to this queue.
This allows you to pass commands 'safely', regardless of whether the Taboola loader has loaded yet.
General flow
The initial page
- Add the Taboola loader
- Pass the page details to the
_taboola
command queue.- For each placement on the page:
- Create a
container with a unique ID.- Pass the placement details to the
_taboola
command queue.- Pass the
flush
command.
Each new pageFor each new page that scrolls into view:
- Pass the page details to the
_taboola
command queue.- For each placement on the page:
- Create a
container with a unique ID.- Pass the placement details to the
_taboola
command queue.- Pass the
flush
command.Do not pre-fetch recommendations - wait for the new page to scroll into view.
Initial page vs subsequent pages
The integration steps for the initial page and subsequent pages are almost identical.
Supported browsers
Taboola's integration is supported for any browser that is fully compatible with ES5 (ECMAScript 5) or higher. This includes all modern web browsers.
Older browsers (such as IE 11) may encounter problems with video ads.
The initial page
Add the Taboola loader
The Taboola loader should run once only, when the initial page is loaded.
Fill in your own Publisher ID, as provided by Taboola (or use the prefilled script that was sent to you).
Add the following
<script>
// *Global* command queue for the page
window._taboola = window._taboola || [];
!function (e, f, u, i) {
if (!document.getElementById(i)) {
e.async = 1;
e.src = u;
e.id = i;
f.parentNode.insertBefore(e, f);
}
// Fill in your Publisher ID (an alphabetic string), as provided by Taboola:
}(document.createElement('script'), document.getElementsByTagName('script')[0], '//cdn.taboola.com/libtrc/<publisher-id>/loader.js', 'tb_loader_script');
if (window.performance && typeof window.performance.mark == 'function') {
window.performance.mark('tbl_ic');
}
</script>
Param | Instructions |
---|---|
<publisher-id> | Fill in your Publisher ID (an alphabetic string), as provided by Taboola. For example, if your Publisher ID is '<<publisherID>>' , then the URL should read://cdn.taboola.com/libtrc/<<publisherID>>/loader.js |
Pass the page details
Pass the page details to the _taboola
command queue:
// *Global* command queue for the page
window._taboola = window._taboola || [];
// Pass the *page* details to the command queue:
_taboola.push({<page-type>:'auto', url:'<url>'});
The values shown below are sample values only. Make sure to fill in your own values, as provided by Taboola.
Param | Instructions | Notes |
---|---|---|
<page-type> | Replace this with the relevant page type (as provided by Taboola) - e.g. for article , use:article:'auto' | Possible values:video , article , photo , search , category , home .---- Taboola optimizes recommendations based on page_type . Make sure that the page-type correctly reflects the current page type. |
'auto' | To obtain an automated ID, leave this param 'as is':article:'auto' | Specifies the ID of this page. |
<url> | Pass the fully-qualified, canonical URL of the initial page. | E.g. If the current URL is:https://www.example.com/news/456/new-york-jets?filter=sports&utm_source=taboola Then pass: https://www.example.com/news/456/new-york-jets |
Guidelines
- Use your own param values, as provided by Taboola.
- Pass the fully-qualified, canonical URL of the initial page.
- If you copy the above code snippet to another page, make sure that
page_type
correctly reflects the new page type.- Do not pre-fetch recommendations for pages further down in the continuous scroll.
Pass the placement details
For each placement on the page:
- Insert a
<div>
container, in the location that the placement should display:
<div id="<container_id>"></div>
Assign each
an ID that is unique across the entire continuous scroll. - e.g.:
container_id = "<<containerId>>-" + <some_unique_value>;
Tip: Consider using an ID that is similar to the placement name.
- Pass the placement details to the Taboola command queue:
// *Global* command queue for the page window._taboola = window._taboola || []; // For each placement, pass *your* param values, as provided by Taboola: _taboola.push({mode: '<mode>', container: '<container_id>', placement: '<placement>', target_type: '<target_type>'});
Params
The values shown below are sample values only. Make sure to fill in your own param values, as provided by Taboola.
mode
- The UI Mode ID for this placement, as provided by Taboola:E.g.
'<<mode>>'
container
- The ID of the<div>
(chosen by you) that will contain this placement's content:E.g. '
<<containerId>>-1'
Must be unique across the entire continuous scroll.
Consider using an ID that is similar to the placement name.
placement
- The placement name, as provided by Taboola:E.g.
'<<placementName>>'
Must be unique within a given article - but repeated for each article in the continuous scroll.
target_type
- The target type, as provided by Taboola:E.g.
'<<targetType>>'
Taboola optimizes recommendations based on
target_type
.
Do not update this value, unless your Taboola Account Manager instructs you to do so.Guidelines
- Use your own param values, as provided by Taboola.
- The ID of the
<div>
must be unique across the entire continuous scroll.- The
placement
must be unique within a given article - but repeated for each article in the continuous scroll.- Do not update
target_type
, unless your Taboola Account Manager instructs you to do so.- Do not pre-fetch recommendations for pages further down in the continuous scroll.
Custom Segments
To target a custom segment - or simply track its performance - you can optionally pass a
cseg
param.For more information, see Custom Segments - or reach out to your Taboola Account Manager.
Flush the queueImmediately after passing details for the last placement, pass the
flush
command:// *Global* command queue for the page window._taboola = window._taboola || []; // Pass the `flush` command: _taboola.push({flush: true});
- The
flush
command instructs Taboola to fetch any placements in the command queue (and not wait any further).- Pass the
flush
command once only - after passing all placements for that page.- If you have unique requirements, reach out to Taboola to discuss alternative flows.
Need a hand?
Feel free to reach out on our Community Discussion page!
A subsequent pageFor each new page that scrolls into view, repeat the process.
Pass the page details// *Global* command queue for the page window._taboola = window._taboola || []; // Pass the *page* details to the command queue: _taboola.push({<page-type>:'auto', url:'<url>'});
Param Instructions Notes <page-type>
Replace this with the relevant page type (as provided by Taboola) - e.g. article
:article:'auto'
Possible values: video
,article
,photo
,search
,category
,home
.
----
Taboola optimizes recommendations based onpage_type
. Make sure that thepage-type
correctly reflects the current page type.'auto'
(Recommended)
To obtain an automated ID, leave this param 'as is':article:'auto'
----
Else, insert your own, internal ID:article:'123'
Specifies the ID of this page, for the given page type. <url>
Pass the fully-qualified, canonical URL of the new page. E.g. If the current URL is: https://www.example.com/nfl/123/nfl-roster?filter=news&utm_source=taboola
Then pass:https://www.example.com/nfl/123/nfl-roster
Guidelines
- Use your own param values, as provided by Taboola.
- If you copy the above code snippet to another page, make sure that
page_type
correctly reflects the new page type.- Pass the fully-qualified, canonical URL for each page, once the new page scrolls into view - e.g. when you are ready to update the address bar with a new URL.
- Do not pre-fetch recommendations for pages further down in the continuous scroll.
Best practice
Each time a new page scrolls into view, update the address bar with a new URL
Pass the placement detailsFor each placement on the page:
- Insert a
<div>
container, in the location that the placement should display:<div id="<container_id>"></div>
Assign each
an ID that is unique across the entire continuous scroll. - e.g.:
container_id = "<<containerId>>-" + <some_unique_value>;
Tip: Consider using an ID that is similar to the placement name.
- Pass the placement details to the Taboola command queue:
// *Global* command queue for the page window._taboola = window._taboola || []; // For each placement, pass *your* param values, as provided by Taboola: _taboola.push({mode: '<mode>', container: '<container_id>', placement: '<placement>', target_type: '<target_type>'});
Params
The values shown below are sample values only. Make sure to fill in your own param values, as provided by Taboola.
mode
- The UI Mode ID for this placement, as provided by Taboola:E.g.
'<<mode>>'
container
- The ID of the<div>
(chosen by you) that will contain this placement's content:E.g. '
<<containerId>>-1'
Must be unique across the entire continuous scroll.
Consider using an ID that is similar to the placement name.
placement
- The placement name, as provided by Taboola:E.g.
'<<placementName>>'
Must be unique within a given article - but repeated for each article in the continuous scroll.
target_type
- The target type, as provided by Taboola:E.g.
'<<targetType>>'
Taboola optimizes recommendations based on
target_type
.
Do not update this value, unless your Taboola Account Manager instructs you to do so.Guidelines
- Use your own param values, as provided by Taboola.
- Do not update
target_type
, unless your Taboola Account Manager instructs you to do so.- Pass the new placement details once the new page scrolls into view - e.g. when you are ready to update the address bar with a new URL.
- Do not pre-fetch recommendations for pages further down in the continuous scroll.
Best practice
Each time a new page scrolls into view, update the address bar with a new URL
Custom Segments
To target a custom segment - or simply track its performance - you can optionally pass a
cseg
param.For more information, see Custom Segments - or reach out to your Taboola Account Manager.
Flush the queueImmediately after passing details for the last placement, pass the
flush
command:// *Global* command queue for the page window._taboola = window._taboola || []; // Pass the `flush` command: _taboola.push({flush: true});
- The
flush
command instructs Taboola to fetch any placements in the command queue (and not wait any further).- Pass the
flush
command once only - after passing all placements for that page.- If you have unique requirements, reach out to Taboola to discuss alternative flows.
Need a hand?
Feel free to reach out on our Community Discussion page!
What's Next?
- In order to provide personalized recommendations for impressions in the EU and California, make sure to implement GDPR and CCPA respectively.
- If you have not already done so, configure ads.txt.
- Contact Taboola so that we can verify your implementation.
Updated 2 months ago