GuidesCommunity DiscussionAnnouncements
GuidesAnnouncementsCommunity Discussion
GuidesCommunity DiscussionAnnouncementsLog In

Single Page Application

Suggest Edits

Overview

This page explains how to integrate Taboola recommendations into an SPA (Single Page Application), using the param values provided by Taboola.

🚧

Prefilled scripts

If you received prefilled scripts from Taboola, you can copy and paste them 'as is', instead of editing param values.

📘

Progressive Web Apps

This integration flow is also suitable for Progressive Web Apps.

🚧

New integration?

If this is a new integration, please provide Taboola with a timeframe for launch, so we can plan post-launch QA.

The initial page load

Step I: Add the Taboola loader script to the <head>

  1. Add the following script to your page, just before the closing </head> tag. Make sure to fill in our own Publisher ID (see below).
<script type="text/javascript">

    // Global property for all Taboola scripts on the page:
    window._taboola = window._taboola || [];

    // Fill in your Publisher ID (below), as provided by Taboola:
    !function (e, f, u, i) {
        if (!document.getElementById(i)) {
            e.async = 1;
            e.src = u;
            e.id = i;
            f.parentNode.insertBefore(e, f);
        }
    }(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>

Fill in your own Publisher ID, as provided by Taboola (or use the prefilled script that was sent to you):

Default text

Example

<publisher-id>

If your Publisher ID is '<<publisherID>>', then the updated URL is:

//cdn.taboola.com/libtrc/<<publisherID>>/loader.js

🚧

initial page only

Run the above script for the initial page only - not for subsequent pages.

📘

Publisher ID

Your Publisher ID is a unique, alphabetic String, provided by Taboola.

It might contain dashes - e.g. "<<publisherID>>" - but not spaces.

📘

loader.js

loader.js initiates communication with Taboola and contains publisher-specific resources and configurations for your integration.

Step II: Add placement containers to the <body>

  1. For each placement on the page, add a <div> element, in the location that the Taboola content should display:
<div id="<<containerId>>"></div>
  1. Assign a unique, descriptive ID to each <div> element - e.g. "<<containerId>>".

📘

The <div> ID

Tip: Choose an ID that is similar to the placement name. For example:

If the placement is: '<<placementName>>'
Then you might name the ID: '<<containerId>>'

As explained below, the <div> ID is used by the placement-level code for:

Step III: Run the page-level code

  1. Invoke _taboola.push() and pass the page details:
// Add the *page* details:
_taboola.push({<page-type>:'auto', url:'<url>'});

Instructions:

Default text

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.

'auto'

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>

Insert the canonical URL of the new page.

Step IV: Run the placement-level code

For each placement on the page, invoke _taboola.push() and pass the placement details:

  • Use the param values provided by Taboola for that placement (see below).
  • Reference the HTML ID of the container in which the placement will render. (See Step II, above.)
// Add the *placement* details:
// (Do this for each placement on the page)
_taboola.push({mode: '<mode>', container: '<container>', placement: '<placement>', target_type: '<target_type>'});

📘

These are sample values only. Make sure to fill in your own values, as provided by Taboola.

  • mode - The UI Mode IDUI Mode ID - The UI template (layout and properties) for this placement. for this placement, as provided by Taboola:
    • E.g. '<<mode>>'.
  • container - The ID of the <div> container for this placement's content (See: Step II above):
    • E.g. '<<containerId>>'.
  • placement - The placement nameplacement name - A descriptive name for the placement - used for reporting., as provided by Taboola:
    • E.g. '<<placementName>>'.
  • target_type - The target type, as provided by Taboola:
    • E.g. '<<targetType>>'.

Step V: Flush the Taboola data stream

Immediately after passing details for the last placement, invoke _taboola.push() and pass the flush flag:

// Add the `flush` flag:
_taboola.push({flush: true});

🚧

  • The flush flag instructs Taboola to fetch the requested placements (and not wait for additional data).
  • Pass the flush flag once only - after passing all placements for that page.
  • If you have unique requirements, reach out to Taboola to discuss alternative flows.

A subsequent page load

When a subsequent page is loaded dynamically, perform the following steps.

🚧

The steps for a subsequent page load are similar (but not identical) to the last 3 steps of the initial page load (above).

Step I: Run the page-level code

  1. Invoke _taboola.push() with a newPageLoad notification:
// Add a `newPageLoad` notification:
// ONLY for subsequent pages (not the initial page)
_taboola.push({notify:'newPageLoad'});

🚧

Add the newPageLoad notification for subsequent pages only - not the initial page.

This notifies Taboola to reset the page state, allowing you to submit new param values.

  1. Invoke _taboola.push() and pass the page details:
// Add the *page* details:
_taboola.push({<page-type>:'auto', url:'<url>'});

Instructions:

Default text

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.

'auto'

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>

Insert the canonical URL of the new page.

Step II: Run the placement-level code

For each placement on the page, invoke _taboola.push() and pass the placement details:

  • Use the param values provided by Taboola for that placement (see below).
  • Reference the HTML ID of the container in which the placement will render. (See: The initial page load > Step II, above.)
// Add the *placement* details:
// (Do this for each placement on the page)
_taboola.push({mode: '<mode>', container: '<container>', placement: '<placement>', target_type: 'mix'});

📘

Params

These are sample values only. Make sure to fill in your own values, as provided by Taboola.

  • mode - The UI Mode IDUI Mode ID - The UI template (layout and properties) for this placement. for this placement, as provided by Taboola:
    • E.g. '<<mode>>'
  • container - The ID of the <div> container for this placement's content (See: The initial page load > Step II):
    • E.g. '<<containerId>>'
  • placement - The placement nameplacement name - A descriptive name for the placement - used for reporting., as provided by Taboola:
    • E.g. '<<placementName>>'
  • target_type - The target type, as provided by Taboola:
    • E.g. '<<targetType>>'

Step III: Flush the Taboola data stream

Immediately after passing details for the last placement, invoke _taboola.push() and pass the flush flag:

// Add the `flush` flag:
_taboola.push({flush: true});

🚧

  • The flush flag instructs Taboola to fetch the requested placements (and not wait for additional data).
  • Pass the flush flag once only - after passing all placements for that page.
  • If you have unique requirements, reach out to Taboola to discuss alternative flows.

What's Next?

  1. In order to provide personalized recommendations for impressions in the EU and California, make sure to implement GDPR and CCPA respectively.
  2. If you have not already done so, configure ads.txt.
  3. Contact Taboola so that we can verify your implementation.

Updated about 2 months ago