Install Taboola Pixel | Blue Frog Docs

Install Taboola Pixel

Step-by-step guide to installing and deploying the Taboola Pixel on your website for conversion tracking and audience building.

This guide provides detailed instructions for installing the Taboola Pixel across different platforms and implementation methods.

Prerequisites

Before installing the Taboola Pixel:

  • Taboola Ads account created and verified
  • Account ID (Pixel ID) obtained from Taboola Backstage
  • Website access to add JavaScript code
  • Testing environment available (staging site recommended)

Finding Your Account ID

  1. Log in to Taboola Backstage
  2. Navigate to Account Settings (gear icon)
  3. Find Pixel ID or Account ID
  4. Copy the numeric ID (e.g., 1234567)

Note: Use the Advertiser Account ID, not Publisher ID.

Standard Pixel Installation

Base Pixel Code

The Taboola Pixel consists of two parts: initialization and the loader script.

Complete Implementation:

<script type="text/javascript">
  window._tfa = window._tfa || [];
  window._tfa.push({notify: 'event', name: 'page_view', id: YOUR_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/YOUR_ACCOUNT_ID/tfa.js',
  'tb_tfa_script');
</script>

Replace YOUR_ACCOUNT_ID with your actual account ID:

<!-- Example with account ID 1234567 -->
<script type="text/javascript">
  window._tfa = window._tfa || [];
  window._tfa.push({notify: 'event', name: 'page_view', id: 1234567});
  !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/1234567/tfa.js',
  'tb_tfa_script');
</script>

Where to Place the Pixel

Recommended Placement:

Place the pixel in the <head> section of every page:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your Website</title>

  <!-- Taboola Pixel -->
  <script type="text/javascript">
    window._tfa = window._tfa || [];
    window._tfa.push({notify: 'event', name: 'page_view', id: 1234567});
    !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/1234567/tfa.js',
    'tb_tfa_script');
  </script>
  <!-- End Taboola Pixel -->

</head>
<body>
  <!-- Your content -->
</body>
</html>

Alternative Placement:

End of <body> section (before closing </body> tag):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your Website</title>
</head>
<body>
  <!-- Your content -->

  <!-- Taboola Pixel -->
  <script type="text/javascript">
    window._tfa = window._tfa || [];
    window._tfa.push({notify: 'event', name: 'page_view', id: 1234567});
    !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/1234567/tfa.js',
    'tb_tfa_script');
  </script>
  <!-- End Taboola Pixel -->

</body>
</html>

E-commerce Platform Installation

Shopify

Method 1: Using Taboola App

  1. Go to Shopify App Store
  2. Search for "Taboola Pixel"
  3. Click Add app
  4. Authorize the app
  5. Enter your Taboola Account ID
  6. Click Save

Method 2: Manual Installation

  1. In Shopify admin, go to Online Store > Themes
  2. Click Actions > Edit code
  3. Open theme.liquid file
  4. Paste pixel code before </head> tag
  5. Click Save
<!-- Taboola Pixel -->
<script type="text/javascript">
  window._tfa = window._tfa || [];
  window._tfa.push({notify: 'event', name: 'page_view', id: 1234567});
  !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/1234567/tfa.js',
  'tb_tfa_script');
</script>

WooCommerce (WordPress)

Method 1: Using Plugin

  1. In WordPress admin, go to Plugins > Add New
  2. Search for "Taboola Pixel" or "Header Footer Code Manager"
  3. Install and activate plugin
  4. Go to plugin settings
  5. Paste Taboola Pixel code in header section
  6. Save changes

Method 2: Theme Functions

Add to your theme's functions.php:

function add_taboola_pixel() {
  ?>
  <script type="text/javascript">
    window._tfa = window._tfa || [];
    window._tfa.push({notify: 'event', name: 'page_view', id: 1234567});
    !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/1234567/tfa.js',
    'tb_tfa_script');
  </script>
  <?php
}
add_action('wp_head', 'add_taboola_pixel');

Magento

Add to Layout XML:

Create/edit app/design/frontend/[Your_Theme]/Magento_Theme/layout/default_head_blocks.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="//cdn.taboola.com/libtrc/unip/1234567/tfa.js" async="async"/>
    </head>
</page>

Add Initialization:

Create app/design/frontend/[Your_Theme]/Magento_Theme/templates/taboola/pixel.phtml:

<script type="text/javascript">
  window._tfa = window._tfa || [];
  window._tfa.push({notify: 'event', name: 'page_view', id: 1234567});
</script>

BigCommerce

  1. In BigCommerce admin, go to Storefront > Script Manager
  2. Click Create a Script
  3. Fill in details:
    • Name: Taboola Pixel
    • Location: Head
    • Select pages: All pages
    • Script type: Script
  4. Paste Taboola Pixel code
  5. Click Save

Tag Manager Installation

Google Tag Manager

Step 1: Create Custom HTML Tag

  1. In GTM, go to Tags > New
  2. Click Tag Configuration
  3. Select Custom HTML
  4. Paste Taboola Pixel code:
<script type="text/javascript">
  window._tfa = window._tfa || [];
  window._tfa.push({notify: 'event', name: 'page_view', id: {{Taboola 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/{{Taboola Account ID}}/tfa.js',
  'tb_tfa_script');
</script>

Step 2: Create Account ID Variable

  1. Go to Variables > User-Defined Variables > New
  2. Select Constant
  3. Name: Taboola Account ID
  4. Value: Your account ID (e.g., 1234567)
  5. Save

Step 3: Set Up Trigger

  1. In tag configuration, click Triggering
  2. Select All Pages trigger
  3. Save tag

Step 4: Test and Publish

  1. Click Preview to test
  2. Navigate to your website
  3. Verify Taboola tag fires on all pages
  4. Click Submit to publish

Adobe Launch (Adobe Experience Platform Tags)

Step 1: Create Rule

  1. In Launch, go to Rules > Create New Rule
  2. Name: Taboola Pixel - All Pages

Step 2: Add Event

  1. Under Events, click Add
  2. Extension: Core
  3. Event Type: Library Loaded (Page Top)
  4. Save

Step 3: Add Action

  1. Under Actions, click Add
  2. Extension: Core
  3. Action Type: Custom Code
  4. Click Open Editor
  5. Paste Taboola Pixel code
  6. Save

Step 4: Publish

  1. Save rule
  2. Add to library
  3. Publish to production

Tealium

Step 1: Add Tag

  1. In Tealium, go to Tags > Add Tag
  2. Select Custom Container
  3. Name: Taboola Pixel

Step 2: Configure Tag

  1. In Tag Configuration, paste Taboola Pixel code
  2. Set Load Rules to fire on all pages
  3. Save tag

Step 3: Publish

  1. Save configuration
  2. Publish to production environment

Single Page Application (SPA) Installation

For React, Vue, Angular, and other SPAs:

React Implementation

// TaboolaPixel.js
import { useEffect } from 'react';

const TaboolaPixel = ({ accountId }) => {
  useEffect(() => {
    // Initialize Taboola pixel array
    window._tfa = window._tfa || [];

    // Load Taboola script
    if (!document.getElementById('tb_tfa_script')) {
      const script = document.createElement('script');
      script.id = 'tb_tfa_script';
      script.src = `//cdn.taboola.com/libtrc/unip/${accountId}/tfa.js`;
      script.async = true;
      document.head.appendChild(script);
    }
  }, [accountId]);

  return null;
};

export default TaboolaPixel;

// App.js
import TaboolaPixel from './TaboolaPixel';

function App() {
  return (
    <>
      <TaboolaPixel accountId={1234567} />
      {/* Your app content */}
    </>
  );
}

Track Route Changes:

// useTaboolaPageView.js
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const useTaboolaPageView = (accountId) => {
  const location = useLocation();

  useEffect(() => {
    window._tfa = window._tfa || [];
    window._tfa.push({
      notify: 'event',
      name: 'page_view',
      id: accountId
    });
  }, [location, accountId]);
};

export default useTaboolaPageView;

// In your component
import useTaboolaPageView from './useTaboolaPageView';

function App() {
  useTaboolaPageView(1234567);

  return (
    <div>Your app</div>
  );
}

Vue.js Implementation

// plugins/taboola.js
export default {
  install(app, options) {
    const accountId = options.accountId;

    // Load Taboola script
    if (!document.getElementById('tb_tfa_script')) {
      window._tfa = window._tfa || [];
      const script = document.createElement('script');
      script.id = 'tb_tfa_script';
      script.src = `//cdn.taboola.com/libtrc/unip/${accountId}/tfa.js`;
      script.async = true;
      document.head.appendChild(script);
    }

    // Add global method for tracking
    app.config.globalProperties.$taboola = {
      track(eventName, params = {}) {
        window._tfa.push({
          notify: 'event',
          name: eventName,
          id: accountId,
          ...params
        });
      }
    };
  }
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import TaboolaPlugin from './plugins/taboola';

const app = createApp(App);
app.use(TaboolaPlugin, { accountId: 1234567 });
app.mount('#app');

// Track page views in router
router.afterEach(() => {
  window._tfa.push({
    notify: 'event',
    name: 'page_view',
    id: 1234567
  });
});

Angular Implementation

// taboola.service.ts
import { Injectable } from '@angular/core';

declare global {
  interface Window {
    _tfa: any[];
  }
}

@Injectable({
  providedIn: 'root'
})
export class TaboolaService {
  private accountId: number = 1234567;
  private scriptLoaded = false;

  constructor() {
    this.loadScript();
  }

  private loadScript(): void {
    if (this.scriptLoaded) return;

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

    const script = document.createElement('script');
    script.id = 'tb_tfa_script';
    script.src = `//cdn.taboola.com/libtrc/unip/${this.accountId}/tfa.js`;
    script.async = true;
    document.head.appendChild(script);

    this.scriptLoaded = true;
  }

  trackPageView(): void {
    window._tfa.push({
      notify: 'event',
      name: 'page_view',
      id: this.accountId
    });
  }

  trackEvent(eventName: string, params: any = {}): void {
    window._tfa.push({
      notify: 'event',
      name: eventName,
      id: this.accountId,
      ...params
    });
  }
}

// app.component.ts
import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { TaboolaService } from './taboola.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(
    private router: Router,
    private taboola: TaboolaService
  ) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.taboola.trackPageView();
      }
    });
  }
}

Verification

Check Pixel Installation

Method 1: Browser Console

// Open browser console (F12)
// Check if pixel is loaded
console.log(window._tfa);

// Should show array of events
// If undefined, pixel is not loaded

Method 2: Network Tab

  1. Open browser DevTools (F12)
  2. Go to Network tab
  3. Reload page
  4. Filter by "taboola"
  5. Look for:
    • tfa.js (pixel script)
    • Requests to trc.taboola.com

Method 3: Taboola Pixel Helper

  1. Install Taboola Pixel Helper browser extension
  2. Navigate to your website
  3. Click extension icon
  4. Verify pixel is detected and firing

Test Events

// Manually fire test event in console
window._tfa.push({
  notify: 'event',
  name: 'page_view',
  id: 1234567
});

// Check Network tab for tracking request

Verify in Taboola Backstage

  1. Log in to Taboola Backstage
  2. Navigate to Tracking > Pixel
  3. Check Pixel Activity section
  4. Verify recent page views are recorded
  5. May take up to 24 hours for data to appear

Common Installation Issues

Pixel Not Loading

Issue: window._tfa is undefined

Solutions:

  • Verify account ID is correct
  • Check for JavaScript errors
  • Ensure script is not blocked by ad blockers
  • Verify Content Security Policy allows Taboola

Multiple Pixels

Issue: Duplicate events or multiple pixel scripts

Solutions:

  • Check for multiple pixel implementations
  • Remove duplicates
  • Ensure pixel loads only once per page

Script Blocked

Issue: Pixel blocked by Content Security Policy

Solution: Add Taboola domains to CSP:

<meta http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-inline' cdn.taboola.com trc.taboola.com">

Best Practices

  1. Install on All Pages - Place pixel on every page for complete tracking
  2. Use Async Loading - Always load pixel asynchronously
  3. Test Before Production - Verify in staging environment first
  4. Single Installation - Install pixel only once per page
  5. Monitor Performance - Check pixel doesn't impact page load times
  6. Document Installation - Keep record of where and how pixel is installed

Next Steps

↑ Back to top
// SYS.FOOTER