Introduction

This page explains how to integrate Taboola recommendations within your website, using JS Tags.

🚧

Guidelines

  1. This page explains how to prepare JS Tags, using the param values provided by Taboola.
  2. During onboarding, you also received prefilled JS Tags from Taboola. You can copy and paste those '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.

Step I: Add the loader tag

  1. Add the Taboola loader tag to your page, just before the closing </head> tag.

    Make sure to fill in your specific param values (see below).

<script type="text/javascript">

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

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

    // 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>
  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 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.

<publisher-id>

Fill in your Publisher ID, as provided by Taboola.

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

//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 type="text/javascript">
  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>'
    // You can optionally pass a custom segment - see the docs (below).
  });
</script>

πŸ“˜

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:
    • 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>>'.

🚧

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.
  3. The value for container must match the ID of the <div> container for the placement's content.

Custom Segments

If your Taboola account has been configured for custom segment targeting, you can optionally pass a cust_seg param.

For example, if your account has been configured with a custom segment called 'subscriber':

cust_seg: '<<customSegment>>'

🚧

Guidelines

  1. Pass the custom segment name, as agreed upon with Taboola.
  2. You can pass 1 custom segment only, per placement.

Step III: Add the flush tag

  1. Add the Taboola flush tag to the page <body>, immediately after the last placement tag:
<script type="text/javascript">
  window._taboola = window._taboola || [];
  _taboola.push({flush: true});
</script>

🚧

Guidelines

  • 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.