Add the base pixel to an SPA

With standard web pages, each time a page is loaded, a page_view event is triggered for that URL.

Since this is not the case for an SPA (Single Page Application), additional work is required.

Physical page refresh

Make sure that the pixel is fired on each page refresh. Typically, this is achieved by adding the base pixel to the <head> of your page:

<!-- Taboola Pixel Code -->
<script type='text/javascript'>
  window._tfa = window._tfa || [];
  window._tfa.push({notify: 'event', name: 'page_view', id: <account_id>});
  !function (t, f, a, x) {
         if (!document.getElementById(x)) {
            t.async = 1;t.src = a;t.id=x;f.parentNode.insertBefore(t, f);
         }
  }(document.createElement('script'),
  document.getElementsByTagName('script')[0],
  '//cdn.taboola.com/libtrc/unip/<account_id>/tfa.js',
  'tb_tfa_script');
</script>
<!-- End of Taboola Pixel Code -->
📘

Params

<account_id> - Replace each occurrence (above) with your numeric Taboola Account ID.


For a prefilled code snippet, see: Tips & Techniques (below)

Logical page view

In SPAs, the page URL does not change across different pages. As such, you need to pass an item-url parameter to notify Taboola which page the user is viewing.

For each state in your code that marks a logical page view, fire a page_view event, and pass an item-url param with the relevant URL:

_tfa.push({notify: 'event', name: 'page_view','item-url': '<your_url>', id: <account_id>});
📘

Params

  • <your_url> - Replace with the actual URL string for this logical page view. (If your SPA uses hash routing, manually construct the full URL, including the hash fragment.)
  • <account_id> - Replace with your numeric Taboola Account ID.
📘

Using Google Tag Manager?

If you're using the Taboola Pixel GTM template, you can use the item-url field to specify a custom page URL for your page_view calls. See Add event pixels in GTM for more information.

Event-based tracking

If you cannot construct the URL, you can use an event-based conversion instead of a URL-based conversion:

  1. In Realize, create an event-based conversion rule with event name view_content.
  2. Fire a view_content event each time navigation occurs:
_tfa.push({notify: 'event', name: 'view_content', id: account_id});
🚧

Params

account_id - Replace with your numeric Taboola Account ID.

👍

When should I use this approach?

Only use this approach if you cannot construct the URL. Otherwise, use the Logical page view (above).

What's next?

Now that you have added the base pixel, make sure to:

  1. Add event pixels.
  2. Verify that your pixels are running smoothly.

Tips & techniques

Copy a prefilled code snippet (or send it via email)

To copy a prefilled code snippet (or send it via email):

  1. Open Realize, and select the account (top, left) that you will use to track conversions.

  2. In the sidebar (left), select Tracking.

  3. Click on Tracking Setup (top, right):

  4. Select Manually install the Taboola Pixel, and click Continue.

  5. Mouse over the code snippet and click on COPY TO CLIPBOARD.

📘

To send an email with all your code snippets, continue below.

  1. Scroll down to the Email instructions block.
  2. Click on the Select Email Address button and follow the instructions provided.

Obtain your Account ID

To obtain your numeric Taboola Account ID:

  1. Open Realize, and select the account (top, left) that you are using to track conversions.

    🚧

    Make sure to select the Taboola account that you are using to track conversions.


    Network Pixel:

    For network-level conversions, you must create conversions under your Network Account in Realize (top, left).

    Note that all sub-accounts in your network can use the conversion rules and audiences created at the network level.

  2. In the sidebar (left), select Tracking.

  3. Copy the numeric Account ID on the screen (top, left):