### Handle Swap Events in HP4U
Source: https://developers.taboola.com/web-integrations/docs/hp4u-events
This example demonstrates how to specifically handle the 'swap started' event. Always check for the existence of event data properties like 'is_swap' before using them, as the payload structure may change.
```javascript
function callBack(data) {
if (data.detail.is_swap) {
// Handle swap event
console.log('Content swap detected');
// Add your custom logic here
}
}
window._taboola = window._taboola || [];
_taboola.push({
listenTo: 'hp4uEvents',
handler: callBack
});
```
--------------------------------
### Add Sample CSS for Articles and Read More
Source: https://developers.taboola.com/web-integrations/docs/amp-read-more
This CSS is an example for styling article bodies and read-more buttons. Customize as needed and place within a `
```
--------------------------------
### Sample Web Page with Web Push Integration
Source: https://developers.taboola.com/web-integrations/docs/web-push-paid-pubs
A complete HTML page example demonstrating the integration of Taboola Web Push SDK and optional traffic source attribution. Remember to replace `{publisher_id}` with your actual Publisher ID.
```html
Test Page
Test Page
```
--------------------------------
### AMP Page Type Parameter Example
Source: https://developers.taboola.com/web-integrations/docs/implementing-amp
Example of how to set the page type parameter for an AMP placement tag. Replace '{page-type}' with the appropriate attribute like 'data-article', 'data-video', etc., and set its value to 'auto' or a specific ID.
```html
data-article='auto'
```
--------------------------------
### Tagging Category Link
Source: https://developers.taboola.com/web-integrations/docs/hp4u
Example of using data-tb-category-link when the category parent is not an anchor element.
```html
Sports
```
--------------------------------
### Handle Taboola placement errors
Source: https://developers.taboola.com/web-integrations/docs/react-troubleshooting
Example of the error message triggered by duplicate placement submissions.
```javascript
Error in TRC.handleLoadResponse : : Cannot set property 'isFeed' of undefined
```
--------------------------------
### Import amp-bind component
Source: https://developers.taboola.com/web-integrations/docs/amp-read-more
Include this script tag in the document head to enable amp-bind functionality.
```html
```
--------------------------------
### Include Taboola Push SDK (Default Path)
Source: https://developers.taboola.com/web-integrations/docs/web-push
Use this snippet to include the Taboola Push SDK with default settings. Ensure you replace `{publisher_id}` with your actual Publisher ID.
```html
Test Page
Test Page
```
--------------------------------
### Tagging Category with HTML Elements
Source: https://developers.taboola.com/web-integrations/docs/hp4u
Examples of applying the data-tb-category attribute to different HTML elements wrapping category text.
```html
Sports
```
```html
```
--------------------------------
### Initialize Taboola Loader
Source: https://developers.taboola.com/web-integrations/docs/infinite-scroll
Add this script to the page head to initialize the global command queue and load the Taboola loader asynchronously.
```html
```
--------------------------------
### Tagging an Item's Thumbnail Property
Source: https://developers.taboola.com/web-integrations/docs/hp4u
Tag item properties using the relevant `data-tb` attribute, setting the value to an empty string or omitting it. This example shows tagging a thumbnail.
```html
```
```html
```
--------------------------------
### Sample Taboola Snippet with Actual Values
Source: https://developers.taboola.com/web-integrations/docs/gam-advanced-options
This sample snippet demonstrates how to fill in your specific Taboola parameters. Remember to replace placeholder values with your actual configuration.
```html
```
--------------------------------
### Initialize and Pass Page Details to Taboola
Source: https://developers.taboola.com/web-integrations/docs/infinite-scroll
Use this snippet to define the global command queue and pass page-specific metadata like type and canonical URL.
```javascript
// *Global* command queue for the page
window._taboola = window._taboola || [];
// Pass the *page* details to the command queue:
_taboola.push({:'auto', url:''});
```
--------------------------------
### Publisher ID Placeholder in Newsroom Script
Source: https://developers.taboola.com/web-integrations/docs/hp4u
The `` placeholder in the Newsroom script should be replaced with your Taboola Publisher ID or Network ID. This ID is an alphanumeric string provided by Taboola. For example, if your ID is '<>', the URL becomes '//c2.taboola.com/nr/<>/newsroom.js'.
```html
<publisher-id>
```
--------------------------------
### Integrate generic Taboola PV tracking in HTML
Source: https://developers.taboola.com/web-integrations/docs/tracking-pvs-via-ga
Place these snippets directly below the Taboola flush command in your HTML script block.
```html
```
```html
```
--------------------------------
### Pass Placement Details to Taboola
Source: https://developers.taboola.com/web-integrations/docs/infinite-scroll
Register each placement by pushing its configuration parameters into the global command queue.
```javascript
// *Global* command queue for the page
window._taboola = window._taboola || [];
// For each placement, pass *your* param values, as provided by Taboola:
_taboola.push({mode: '', container: '', placement: '', target_type: ''});
```
--------------------------------
### Integrate placement-specific Taboola PV tracking in HTML
Source: https://developers.taboola.com/web-integrations/docs/tracking-pvs-via-ga
Place these snippets within the script block for the specific Taboola placement, directly below the push directive.
```html
```
```html
```
--------------------------------
### Implementing a Safe Storage Wrapper
Source: https://developers.taboola.com/web-integrations/docs/local-storage
A wrapper object that validates storage availability and provides a memory-based fallback if the browser blocks access.
```javascript
/*
* A wrapper object that allows you to use `localStorage` and `sessionStorage` safely.
* If the requested storage is available, it is used.
* Else, data is persisted to memory (until the user reloads the page).
*
* USAGE - EXAMPLES:
* -----------------
*
* Local Storage
* -------------
*
* var _localStorage = safeStorage.getStorage('local');
* _localStorage.setItem('myCat', 'foo');
* var cat = _localStorage.getItem('myCat');
* _localStorage.removeItem('myCat');
* _localStorage.clear();
*
* Session Storage
* ---------------
*
* var _sessionStorage = safeStorage.getStorage('session');
* _sessionStorage.setItem('myCat', 'foo');
* var cat = _sessionStorage.getItem('myCat');
* _sessionStorage.removeItem('myCat');
* _sessionStorage.clear();
*/
// The wrapper object
var safeStorage = {
STORAGE_TYPES: ['local', 'session'],
dummyStorage: null,
// Validates if the requested storage is available
Validate: function (storageType) {
var stamp = (new Date()).getTime() + "",
key = "_test_";
try {
if (!window.hasOwnProperty(storageType + "Storage")) {
return false;
}
var s = window[storageType + "Storage"];
// Robust, cross-browser storage detection
s.setItem(key, stamp);
if (s.getItem(key) === stamp) {
s.removeItem(key);
return !!s;
}
} catch (err) {
return false;
}
return false;
},
// Returns the requested storage if available, else returns an instance of dummy storage
getStorage: function (storageType) {
var storageTypeIndex = this.STORAGE_TYPES.indexOf(storageType) || 0;
for (var index = storageTypeIndex; index < this.STORAGE_TYPES.length; index++) {
var isValid = this.Validate(this.STORAGE_TYPES[index]);
if (isValid) {
return window[storageType + "Storage"];
}
}
if(!this.dummyStorage){
this.dummyStorage = new this.DummyStorage();
}
return this.dummyStorage;
},
// Dummy storage object and methods
DummyStorage: function () {
var localStorage = {};
return {
getItem: function (key) {
return localStorage[key] ? localStorage[key] : null;
},
setItem: function (key, value) {
localStorage[key] = value;
},
removeItem: function (key) {
delete localStorage[key];
},
clear: function () {
localStorage = {};
}
};
}
}
```
--------------------------------
### Import amp-analytics Script for AMP
Source: https://developers.taboola.com/web-integrations/docs/tracking-pvs-via-ga
Include this script in the section of your AMP page to enable `amp-analytics` functionality.
```html
```
--------------------------------
### HTML Placement Tag Configuration
Source: https://developers.taboola.com/web-integrations/docs/js-tag
Each placement requires a unique div container and a corresponding script tag with parameters provided by Taboola.
```html
```
--------------------------------
### HTML Flush Tag Implementation
Source: https://developers.taboola.com/web-integrations/docs/js-tag
Add this script immediately after the final placement tag to instruct Taboola to fetch recommendations.
```html
```
--------------------------------
### Import amp-ad Component for AMP
Source: https://developers.taboola.com/web-integrations/docs/implementing-amp
Include this script in the section of your AMP page to enable Taboola ads.
```html
```
--------------------------------
### Integrate Taboola Web Push SDK
Source: https://developers.taboola.com/web-integrations/docs/web-push
Add this script tag to the `` section of your web pages to integrate the Taboola Web Push SDK. Replace `{publisher_id}` with your actual Taboola Publisher ID. The `async` attribute is required.
```html
```
--------------------------------
### POST Flush Queue
Source: https://developers.taboola.com/web-integrations/docs/infinite-scroll
Instructs Taboola to immediately fetch all placements currently in the command queue. This should be called once after all placements for the page have been pushed.
```APIDOC
## POST /flush
### Description
Instructs Taboola to fetch any placements in the command queue immediately without further waiting.
### Method
POST
### Request Body
- **flush** (boolean) - Required - Set to true to trigger the flush command.
### Request Example
{
"flush": true
}
```
--------------------------------
### Add Taboola Loader Script to Homepage
Source: https://developers.taboola.com/web-integrations/docs/hp4u
Include this script in the head section of your homepage. Replace '' with your actual Publisher ID or Network ID provided by Taboola.
```html
```
--------------------------------
### Include Taboola Push SDK (Custom Path)
Source: https://developers.taboola.com/web-integrations/docs/web-push
This snippet shows how to include the Taboola Push SDK and specify a custom path for the service worker using `swPath`. Replace `{publisher_id}` with your actual Publisher ID.
```html
Test Page
Test Page
```
--------------------------------
### Empty placement event data structure
Source: https://developers.taboola.com/web-integrations/docs/trecs-listen-to-events
Defines the schema for empty_placement events, which returns an array of placement names that yielded no recommendations.
```javascript
{
placements: [
"Below Article Thumbnails",
"Mid Article Feed",
"Right Rail Widget"
]
}
```
--------------------------------
### Pass Placement Details to Taboola Command Queue
Source: https://developers.taboola.com/web-integrations/docs/spa
For each placement, push its details including mode, container ID, placement name, and target type to the Taboola command queue. Use your specific values provided by Taboola.
```javascript
// *Global* command queue for the page
window._taboola = window._taboola || [];
// For each placement, pass *your* param values, as provided by Taboola:
_taboola.push({mode: '', container: '', placement: '', target_type: ''});
```
--------------------------------
### Basic Tag for Taboola
Source: https://developers.taboola.com/web-integrations/docs/implementing-amp
This is a sample tag for Taboola. Ensure you replace the sample values with your own, as provided by Taboola. When using , include the `data-block-on-consent` parameter.
```html
```
--------------------------------
### AMP Embed and Single Account Analytics
Source: https://developers.taboola.com/web-integrations/docs/tracking-pvs-via-ga
Add an `` tag for the first Taboola placement, followed immediately by an `` tag for single account tracking. Replace placeholders like ``, ``, and `` with your specific values.
```html
```
--------------------------------
### Create HTML Container for Placement
Source: https://developers.taboola.com/web-integrations/docs/spa
Define a unique HTML div container for each Taboola placement on your page. The ID should be unique per page and can be similar to the placement name.
```html
```
--------------------------------
### Available Events
Source: https://developers.taboola.com/web-integrations/docs/trecs-listen-to-events
This section details all the events available for publishers, including their descriptions, extra data, availability, and any specific requirements for them to fire.
```APIDOC
## Events API Documentation
### Description
This API provides information about the various events that can be tracked within Taboola Web Integrations. These events allow publishers to monitor user interactions and system states.
### Events
#### consentRequested
* **Description**: Fires when consent is being requested.
* **Extra Data**: None.
* **Availability**: Yes.
* **Requirements**: Requires publisher config: `enable-consent-external-events` = `true`.
#### consentSettled
* **Description**: Fires when consent is settled (resolved/rejected).
* **Extra Data**: None.
* **Availability**: Yes.
* **Requirements**: Requires publisher config: `enable-consent-external-events` = `true`.
#### trcImplAvailable
* **Description**: Fires after the TRCImpl object is available.
* **Extra Data**: None.
* **Availability**: Yes.
* **Requirements**: None.
#### engineReady
* **Description**: Fires after starting the engine and calling all main components.
* **Extra Data**: None.
* **Availability**: Yes.
* **Requirements**: None.
#### recRequest
* **Description**: Fires right after TRC request is sent.
* **Extra Data**: None.
* **Availability**: Yes.
* **Requirements**: None.
#### recResponse
* **Description**: Fires when TRC response is received.
* **Extra Data**: List of requested placements.
* **Availability**: Yes.
* **Requirements**: None.
#### nocontent
* **Description**: Fires when TRC request is sent but no response is returned.
* **Extra Data**: None.
* **Availability**: Yes.
* **Requirements**: Requires publisher config: `no-content-report-percent` (value between 0.0-1.0).
#### empty_placement
* **Description**: Fires when a placement in TRC response returns empty recommendations.
* **Extra Data**: Empty placement data.
* **Availability**: Yes.
* **Requirements**: None.
#### render
* **Description**: Fires after placement render is complete and element is in DOM.
* **Extra Data**: Render data.
* **Availability**: Yes.
* **Requirements**: Available only for widget, feed, next-up, vignette.
#### renderFailed
* **Description**: Fires when product render fails.
* **Extra Data**: Placement name.
* **Availability**: Yes.
* **Requirements**: Requires publisher config: `enable-render-failed-external-event` = `true`.
#### renderCompEnd
* **Description**: Fires after entire product render is completed.
* **Extra Data**: Product name (e.g., 'next-up-render').
* **Availability**: Yes.
* **Requirements**: Available only for widget, feed, next-up, vignette.
#### waitingBody
* **Description**: Fires when TRECS needs to wait for the body element.
* **Extra Data**: None.
* **Availability**: Yes.
* **Requirements**: None.
#### available
* **Description**: Currently not available.
* **Extra Data**: Currently not available.
* **Availability**: No.
* **Requirements**: Currently not available.
#### visible
* **Description**: Fires when placement is at least 50% visible for at least 1 second.
* **Extra Data**: Render data.
* **Availability**: Yes.
* **Requirements**: None.
#### click
* **Description**: Fires when user clicks an item.
* **Extra Data**: Click data.
* **Availability**: Yes.
* **Requirements**: None.
```
--------------------------------
### Add Taboola Loader Tag
Source: https://developers.taboola.com/web-integrations/docs/js-tag
Include this script in the of your page to load Taboola's JavaScript. Replace placeholders with your specific Taboola-provided values.
```html
```
--------------------------------
### Implement Custom Segments in Web and AMP
Source: https://developers.taboola.com/web-integrations/docs/custom-segments
Use the cseg parameter to pass custom segment data for specific placements. Ensure only one segment is passed per placement.
```javascript
_taboola.push({
mode: '',
container: '',
placement: '',
target_type: '',
// Optional `cseg` param:
// Pass the relevant custom segment, as determined by contextual signals and/or 1st-party data.
// For each placement, pass 1 custom segment *only*.
cseg: ''
});
```
```html
```
--------------------------------
### Taboola Desktop Integration Snippet
Source: https://developers.taboola.com/web-integrations/docs/gtm-advanced-options
Use this snippet to integrate Taboola for desktop devices. It creates a div and configures Taboola settings. Adjust the div's width and margin for desktop layout.
```html
```
--------------------------------
### Wrap article content
Source: https://developers.taboola.com/web-integrations/docs/amp-read-more
Wrap the article content in a div with a default class and an AMP binding to handle state-based styling.
```html
The article content goes here...
```
--------------------------------
### Import Taboola Service Worker Script
Source: https://developers.taboola.com/web-integrations/docs/web-push
Include this line in your `sw.js` file to import the Taboola Web Push service worker script. Ensure `sw.js` is uploaded to the root of your domain.
```javascript
importScripts("https://cdn.taboola.com/webpush/tsw.js");
```
--------------------------------
### Configure Taboola Placement with JavaScript
Source: https://developers.taboola.com/web-integrations/docs/gtm-advanced-options
Configure Taboola placements by pushing an object to the `_taboola` array. Ensure you use your specific placement details like mode, container ID, placement name, and target type. The `url` parameter should reflect the current page's URL.
```javascript
window._taboola = window._taboola || [];
_taboola.push({article:'auto', url : top.location.href}); // for a page_type of 'article', use 'article:'auto'
_taboola.push({
mode: '',
container: 'taboola-slot', // The ID of the
container (see above).
placement: '',
target_type: 'mix'
});
```
--------------------------------
### Add Newsroom Script to Article Pages
Source: https://developers.taboola.com/web-integrations/docs/hp4u
Include this script in the `` section of each article page. Replace `` with your unique Taboola Publisher ID. Ensure the script loads as soon as possible without lazy loading.
```html
```
--------------------------------
### Sample HTML Structure Before Tagging
Source: https://developers.taboola.com/web-integrations/docs/hp4u
This HTML structure represents a typical content region with multiple items before any Taboola tagging is applied. It includes articles with images, titles, and metadata.
```html
More in Sports
```
--------------------------------
### Flush the Taboola command queue
Source: https://developers.taboola.com/web-integrations/docs/infinite-scroll
Instructs Taboola to fetch all queued placements immediately. Execute this command exactly once after all placements for the current page have been pushed.
```javascript
// *Global* command queue for the page
window._taboola = window._taboola || [];
// Pass the `flush` command:
_taboola.push({flush: true});
```
--------------------------------
### Detecting localStorage Availability Issues
Source: https://developers.taboola.com/web-integrations/docs/local-storage
Demonstrates how the 'in' operator can return true even when accessing the storage object throws a SecurityError.
```javascript
// Safari browser with cookies disabled
"localStorage" in window // returns true
window.localStorage // throws "SecurityError: The operation is insecure."
```
--------------------------------
### Create Taboola Div Container with JavaScript
Source: https://developers.taboola.com/web-integrations/docs/gtm-advanced-options
Use this JavaScript to dynamically create a
element on your page to serve as a container for Taboola modules. Ensure the container's ID matches the 'container' parameter in your Taboola configuration. Style the width appropriately for responsiveness.
```html
```
.JPG)