GuidesCommunity DiscussionAnnouncements
GuidesAnnouncementsCommunity Discussion
GuidesCommunity DiscussionAnnouncementsLog In
Guides

Standard (aka JS Tag)

Suggest Edits

Introduction

This page explains how to integrate Taboola recommendations into a standard webpage, using the param values provided by Taboola.

🚧

Prefilled tags

If you received prefilled tags 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.

Supported browsers

🚧

Taboola's standard integration (aka JS Tag 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.

Step I: Add the loader tag

  1. Add the Taboola loader tag to the page <head>.

    Fill in your specific param values, as provided by Taboola (or use the prefilled tag that was sent to you).

<script>

    // A *global* property for queuing *all* Taboola commands on this page:
    window._taboola = window._taboola || [];

    // Fill in the page type, as provided by Taboola:  
    _taboola.push({<page-type>:'auto'});

    !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>
  1. Replace the default text with the param values provided by Taboola (or use the prefilled tag that was sent to you):

Editing instructions:

Default textInstructionsNotes
<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.
<publisher-id>Fill in your Publisher ID, as provided by Taboola.

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

//cdn.taboola.com/libtrc/<<publisherID>>/loader.js		Your Publisher ID is a unique, alphabetic String, provided by Taboola.

E.g. "<<publisherID>>"

📘

loader.js

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

Step II: Add the placement tags

For each placement on a given page:

  1. Add a placement tag to the <body>, in the location that the placement should display.

    Each placement has both a <div> tag and <script> tag, as shown below.

  2. Edit the tag (or use the prefilled tag that was sent to you):
    1. Choose an ID for the <div> container - e.g. "<<containerId>>".
    2. Fill in the <script> param values, as provided by Taboola.
<!-- *Choose* an ID: -->
<div id="<<containerId>>"></div>
<!-- Fill in *your* param values, as provided by Taboola: -->
<script>
  // *Global* command queue for the page
  window._taboola = window._taboola || [];
  
  _taboola.push({
    mode: '<mode>',
    container: '<container>', /* The ID of the <div> container (e.g. '<<containerId>>') */
    placement: '<placement>',
    target_type: '<target_type>'
  });
</script>

📘

Params

These are sample values only. Make sure to fill in your own 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> container for this placement's content:
    • E.g. '<<containerId>>'.
  • placement - The placement name, as provided by Taboola:
    • E.g. '<<placementName>>'.
  • target_type - The target type, as provided by Taboola:
    • E.g. '<<targetType>>'.

🚧

Guidelines

  1. Each placement must have its own JS tag.
  2. On a given page, each JS tag must have unique values for container and placement. Do not duplicate a JS tag on the same page. (For special use cases, see below.)
  3. The value for container must match the ID of the <div> container for the placement.

📘

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.

This flow typically requires custom development.

Step III: Add the flush tag

  1. Add the Taboola flush tag to the page <body>, immediately after the last placement tag:
<script>
  // A global queue for all Taboola commands on the page
  window._taboola = window._taboola || [];
  
  _taboola.push({flush: true});
</script>

🚧

Guidelines

  • The flush flag instructs Taboola to fetch recommendations (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.

👍

Need a hand?

Feel free to reach out on our Community Discussion page!

Special use cases

Generating placement names

Occasionally, you may want to generate your own placement names - e.g. to re-use a placement for backfill.

In that case, make sure to follow the guidelines below.

🚧

Guidelines

  1. On a given page, each JS tag must have unique values for container and placement.
  2. Placement names are used for reporting, and should be kept meaningful:
    1. Consider appending an integer to the original placement name - e.g. '<<placementName>> 1', '<<placementName>> 2', etc.
    2. Avoid using a randomly generated string or numeric ID as a placement name.
    3. Keep the total number of placement names to 100 or less, for a given account.

For more information, or specific requests, reach out to your Taboola Account Manager.

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 7 months ago