Guides
v1.0
Log In
Guides

Add the base pixel to an SPA

Suggest Edits

With standard web pages, each time a page is loaded, a page_view event is triggered for that URL. Naturally, this is not the case with an SPA (Single Page Application).

This page explains how to add the base pixel to an SPA (Single Page Application).

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 occurance (above) with your numeric Taboola Account ID.

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

Logical page view

For each state in your code that marks a new page load, fire a page_view event, and pass an item-url param with the URL that logically identifies the new page:

_tfa.push({notify: 'event', name: 'page_view','item-url':'add_your_URL'});

Viewing content

Sometimes, navigation between pages does not reflect as a URL change.

In that case, simply fire a view_content event:

_tfa.push({notify: 'event', name:'view_content’});

What's next?

Well done - you have added the base pixel!

Next, 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 Account Tracking Setup (top, right):

  4. Select Manually as the Setup Method, and click on 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 section.
  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.

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

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

Updated 9 days ago