Base Pixel

Base Code Setup

You should insert the Taboola Pixel base code into the page header. Alternatively, you can inject it with a Tag Manager. This will trigger the pixel on the initial loading.

Tracking PageViews Events

For every state in your site's code that "marks" that a new page is reloading, you should fire a page view event with your required URL (the URL that logically identifies the new page), using the parameter item-url for example:

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

To track this, simply add a URL-based conversion in Backstage, as any other URL conversion rule that matches when the URL equals or contains "add_your_URL".

Single Page Applications

 On typical websites such as standard e-commerce sites, adding the Taboola Pixel in the page header will trigger a page_view event from the current page url on every page load.

In most implementations of single page applications, navigation between app pages does not necessarily reflect as a url change or a page reload. Therefore, the standard implementation of the Taboola Pixel code will not trigger a page_view event in the correct context, which will prevent the usage of url based rules.  To overcome this, we recommend using event-based pixels in single page apps. However, in order to use url-based rules you can make slight modifications to the Javascript attributes as described below (under the ‘URL Based’ section). 

Base Code Setup

Make sure the Taboola Pixel base code is called on every page load/refresh. In common implementations of SPA’s, this will mean implementing the base code once in the page header.

Event Based 

View Content Event

To track when a user navigates from one page to the other in your single page application, you can set the below “View Content” event to fire conditionally each time this occurs:

// formatted as a code snippet

_tfa.push({

notify: 'event', 

name:'view_content’

})

Other Custom Events

To track any other user behavior that you would consider as a conversion, like when a user adds to cart, checks out, or signs up to a newsletter, you can use any one of our custom events:

// formatted as a code snippet

_tfa.push({

notify: 'event', 

name:'<EVENT_NAME_PLACEHOLDER>’

})

 For example:

// formatted as a code snippet

_tfa.push({

notify: 'event', 

name:'Purchase’

})

You can now create and track event based conversions and audiences, when your defined event name in Backstage equals the value that you sent as the “name” attribute.

Single Page Applications

On typical websites such as standard e-commerce sites, adding the Taboola Pixel in the page header will trigger a page_view event from the current page url on every page load.

In most implementations of single page applications, navigation between app pages does not necessarily reflect as a url change or a page reload. Therefore, the standard implementation of the Taboola Pixel code will not trigger a page_view event in the correct context, which will prevent the usage of url based rules.  To overcome this, we recommend using event-based pixels in single page apps. However, in order to use url-based rules you can make slight modifications to the Javascript attributes as described below (under the ‘URL Based’ section). 

Base Code Setup

Make sure the Taboola Pixel base code is called on every page load/refresh. In common implementations of SPA’s, this will mean implementing the base code once in the page header.

Event Based 

View Content Event

To track when a user navigates from one page to the other in your single page application, you can set the below “View Content” event to fire conditionally each time this occurs:

// formatted as a code snippet

_tfa.push({

notify: 'event', 

name:'view_content’

})

Other Custom Events

To track any other user behavior that you would consider as a conversion, like when a user adds to cart, checks out, or signs up to a newsletter, you can use any one of our custom events:

// formatted as a code snippet

_tfa.push({

notify: 'event', 

name:'<EVENT_NAME_PLACEHOLDER>’

})

 For example:

// formatted as a code snippet

_tfa.push({

notify: 'event', 

name:'Purchase’

})

You can now create and track event based conversions and audiences, when your defined event name in Backstage equals the value that you sent as the “name” attribute.

Events

Using the base pixel, you can track conversions simply based on page views. If you want to track a more advanced (and sometimes more complex) action, you can use event-based conversions for special scenarios - for example to track users who click an Add to Cart button, or when a signup is completed (“lead”).

The event pixel code is as follows:

<script>
_tfa.push({notify: 'event', name: 'your_event_name'});
</script>
<noscript>
<img src='//trc.taboola.com/XXXXX/log/3/unip?en=your_event_name
width='0' height='0' style='display:none'/>
</noscript>

Abcd is the event name which was defined on the event conversion rule
e.g Lead, AddToCart etc.

XXXXX is the account id.

The following are examples of some of popular event pixels.

To fire few pixels for different accounts from the same page, do the following:

Bit modify the snippet code for the remaining accounts.

Let's say we have three accounts: A (ID 1111), B (ID 2222), and C (ID 3333). We want to fire for all on the following events:

1. page_view (URL-based )
2. add_to_cart (Event-based)

1. Place one base pixel code on the site (e,g., for account A).
2. In the base code pixel, add the parts in yellow below, to fire the page_view pixel to account B. Note that you can add as many as you want for additional accounts.
   
   

   <script type='text/javascript'>

   window._tfa = window._tfa || [];

   window._tfa.push({notify: 'event', name: 'page_view',id:’1111’});

   window._tfa.push({notify: 'event', name: 'page_view', id:'2222'});

   window._tfa.push({notify: 'event', name: 'page_view', id:3333});

   !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/1111/tfa.js',

       'tb_tfa_script');

   </script>

   
   

   <noscript>

   <img src="//trc.taboola.com/1111/log/3/unip?en=page_view" width="0" height="0" style="display:none"/>

   </noscript>

   <noscript>

   <img src="//trc.taboola.com/2222/log/3/unip?en=page_view" width="0" height="0" style="display:none"/>

   </noscript><noscript>

   <img src="//trc.taboola.com/3333/log/3/unip?en=page_view" width="0" height="0" style="display:none"/>

   </noscript>
   
   

3. When you want to fire the add_to_cart event for account A, do it as you typically would:
   
   

   <script>

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

   </script>

   <noscript>

   
   

   <img src='//trc.taboola.com/1111/log/3/unip?en=add_to_cart'

   width='0' height='0' style='display:none'/>

   </noscript>
   

4. When you want to fire the add_to_cart event for account B, you should do it as shown below:
   
   

   <script>

   _tfa.push({notify: 'event', name: 'add_to_cart', id: '2222'});

   </script>

   <noscript>

   <img src='//trc.taboola.com/2222/log/3/unip?en=add_to_cart'

   width='0' height='0' style='display:none'/>

   </noscript>