Tracking PVs via GA

Overview

As a publisher, you may decide to track page views independently - e.g. using Google Analytics. When doing so, it's important to understand how Taboola tracks page views - and how to implement a similar flow within GA.

📘
Not using GA?
The steps provided below are for Google Analytics. However, a similar approach can be used for any analytics solution that supports custom events (Adobe Analytics, AT Internet, etc.)

Taboola page views

In Taboola Backstage, a page view is recorded when the first Taboola placement is added to the page (and not when the page first starts to load).

To implement similar tracking within Google Analytics, you will need to implement a custom GA event. Thereafter, you can compare those metrics with Taboola reporting.

🚧
A common pitfall
By default, Google Analytics typically reflects more page views than Taboola Backstage.
The reason is as follows:

For GA, a page view is triggered when the page first starts to load.

For Taboola, a page view is triggered when the first Taboola placement is added to the page.

Occasionally, a user will leave after the page begins to load, but before the first Taboola placement has been added. This is counted as a page view for GA, but not for Taboola.
This discrepancy is larger for pages that use lazy loading - e.g. AMP - especially when the first Taboola placement is also located beneath the fold.
In order to make a meaningful comparison, you will need to implement a custom GA event.

Integration types

The exact steps for implementing the custom GA event will depend on how you currently integrate with Taboola and GA.

Guidelines are provided below for Standard (aka JS Tag), Google Tag Manager (GTM), Google Ad Manager (aka DFP), and AMP.

Prerequisites

The instructions below presume that you have implemented Google Analytics on the page.

Code snippets are provided for both gtag and the older analytics.js.

📘
For information about setting up Google Analytics, refer to the official documentation for gtag.

Standard pages

Overview

In this section, we look at integrations for standard (Non-AMP) pages.

Standard (JS Tag) integration

📘
Use case
Both conditions must be met:

You are using a Standard (aka JS Tag) integration for Taboola.

You are manually inserting your GA tags.

If you are using GTM to insert your GA tags, see below: Google Tag Manager (GTM)

📘
What to track?
You can track either one of the following:

A 'generic' Taboola page view.

A Taboola page view for a given placement.

Prepare a gtag (or analytics.js) code snippet:

Case I: Track generic Taboola PVs

gtag('event', 'taboola', {
  'event': 'PV'
});

ga('send', 'event', 'Taboola', 'PV');

Case II: Track Taboola PVs for a specific placement

// Replace '<placement>' with the actual placement name - e.g. 'Below Article Thumbnails':

gtag('event', 'taboola', {
  'event': 'PV',
  'placement': '<placement>'
});

// Replace '<placement>' with your actual placement name - e.g. 'Below Article Thumbnails':

ga('send', 'event', '<placement>', 'PV');

📘
Which gtag dimensions?
The above code snippets use the following dimensions:

event - to record a Taboola page view event.

placement - to record the specific Taboola placement that was loaded.

Feel free to adapt these examples to match your own strategy for tracking. Refer to the official documentation for gtag.

Paste the above gtag snippet in the relevant location:

Case I: Track generic Taboola PVs

Paste the gtag snippet just below the Taboola flush command on the page:

<script>

  window._taboola = window._taboola || [];
  
  _taboola.push({flush: true});

  // GA custom event - 'Generic' Taboola PV:
  gtag('event', 'taboola', {
    'event': 'PV',
  });
</script>

<script>

  window._taboola = window._taboola || [];
  
  _taboola.push({flush: true});

  // GA custom event - Generic Taboola PV:
  ga('send', 'event', 'Taboola', 'PV');
</script>

Case II: Track Taboola PVs for a specific placement

Paste the gtag snippet in the <script> for that Taboola placement (just below the push directive):

<!-- Replace '<placement>' with the actual placement name - e.g. 'Below Article Thumbnails'. -->

<script>
  window._taboola = window._taboola || [];

  _taboola.push({
    mode: '<mode>',
    container: '<container>',
    placement: '<placement>',
    target_type: '<target_type>'
  });

  // GA custom event - Taboola PV for this placement:
  gtag('event', 'taboola', {
    'event': 'PV',
    'placement': '<placement>'
  });
</script>

<!-- Replace '<placement>' with the actual placement name - e.g. 'Below Article Thumbnails'. -->

<script>
  window._taboola = window._taboola || [];

  _taboola.push({
    mode: '<mode>',
    container: '<container>',
    placement: '<placement>',
    target_type: '<target_type>'
  });

  // GA custom event - Taboola PV for this placement:
  ga('send', 'event', '<placement>', 'PV');
</script>

Verify the newly added custom event. See the Verification Guidelines section, below.

An alternative approach

If you still see more page views in Taboola Backstage - even after implementing the above flow - you can try the following approach:

_taboola.push({ listenTo: 'render', handler: () => {
    if(!window.tblLoaded) {
        window.tblLoaded = true; // Run once only on this page
             // Add the custom event code here
        }
    };
}});

When a Taboola card renders on the page, the render event handler is triggered. You can trigger your custom event code via this handler. Make sure to invoke it once only, as the handler will be triggered for each card, in each Taboola unit on the page.

Google Tag Manager (GTM)

📘
Use case
You are using Google Tag Manager (GTM) to apply your GA tags.

📘
What to track?
You can track either one of the following:

A 'generic' Taboola page view.

A Taboola page view for a given placement.

If you are using Google Tag Manager (GTM) to apply your GA tags, a special flow is required:

Within your Google Analytics dashboard, make sure that you have implemented a Google Data Stream.

Without this, custom events will fire, but will not be received by GA.

Prepare a Data Layer code snippet:

Case I: Track generic Taboola PVs:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'taboola_pv',
});

Case II: Track Taboola PVs for a specific placement:

// Replace '<placement>' with the actual placement name - e.g. 'Below Article Thumbnails':

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'taboola_pv',
  'placement': '<placement>'
});

Paste the dataLayer snippet in the relevant location:

Case I: Track generic Taboola PVs

Paste the dataLayer snippet just below the Taboola flush command on the page:

<script>

    window._taboola = window._taboola || [];

    _taboola.push({ flush: true });

    // GA custom event for GTM
    // Track a 'generic' Taboola PV:
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'taboola_pv',
    });

</script>

Case II: Track Taboola PVs for a specific placement

Paste the dataLayer snippet in the <script> for that Taboola placement (just below the push directive):

<!-- Replace '<placement>' with the actual placement name - e.g. 'Below Article Thumbnails'. -->

<script>
    window._taboola = window._taboola || [];

    _taboola.push({
        mode: '<mode>',
        container: '<container>',
        placement: '<placement>',
        target_type: '<target_type>'
    });

    // GA custom event for GTM
    // Track a Taboola PV for this placement:
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'taboola_pv',
        'placement': '<placement>'
    });

</script>

Google Ad Manager (aka DFP)

📘
Use case
You are using a Google Ad Manager (aka DFP) integration for Taboola.

🚧
SafeFrame
Taboola placements served via a SafeFramecan fail to be tracked (or even render).
When adding your Creative in Google Ad Manager, make sure that Serve into a SafeFrame is not checked.

Implement a custom GA event for the Taboola placement in GAM, to track if it loaded:

Prepare a gtag (or analytics.js) code snippet, as shown below.

// Replace '<placement>' with the actual placement name - e.g. 'Below Article Thumbnails':

window.top.gtag('event', 'taboola', {
  'event_category': 'PV',
  'event_label': '<placement>'
});

// Replace '<placement>' with the actual placement name - e.g. 'Below Article Thumbnails':

window.top.ga('send', 'event', '<placement>', 'PV');

📘
The above code snippet uses the Taboola placement name as the event_label. Feel free to adapt this example to match your existing conventions for GA tracking.
For more information about the available GA tracking params, refer to the official documentation for gtag.

🚧
Because the Taboola placement loads in an <iframe>, the method must be invoked for window.top.

Paste the code snippet inside the relevant Taboola <script> for GAM, just below the push command:

<div id="taboola-slot" style="width:<<width>>px"></div>

<!-- Use YOUR OWN param values, as provided by Taboola -->
<script type="text/javascript">
   window._taboola = window._taboola || [];
   _taboola.push({article:'auto', url : top.location.href});
   _taboola.push({listenTo: 'render', handler : function(){
   var wdgc = document.getElementById('taboola-slot');
     window.frameElement.width = "" + wdgc.scrollWidth;
     window.frameElement.height = "" + wdgc.scrollHeight;
   }});
   _taboola.push({
     mode: '<mode>',
     container: 'taboola-slot',
     placement: '<placement>',
     target_type: 'mix'
   });
  
   // The GA custom event:
   window.top.gtag('event', 'taboola', {
     'event_category': 'PV',
     'event_label': '<placement>'
   });  
</script>

<!--  Fill in your Publisher ID, as provided by Taboola -->
<script src= '//cdn.taboola.com/libtrc/<publisher-id>/loader.js'></script>

<script>
  window._taboola = window._taboola || [];

  _taboola.push({
    mode: '<mode>',
    container: '<container>',
    placement: '<placement>',
    target_type: '<target_type>'
  });

  // The GA custom event:
  window.top.ga('send', 'event', '<placement-name>', 'PV');
</script>

📘
For more detail about the Taboola script for GAM, see: Google Ad Manager (aka DFP) > Advanced Options.

Verify the newly added custom event. See the Verification Guidelines section, below.

AMP pages

Overview

In this section, we look at integrations for AMP pages. Because AMP does not allow direct access to JS tags, a different approach is needed.

Tracking a custom GA event in AMP

📘
Use case
You have integrated Taboola into your AMP pages.
If your analytics solution does not support custom events, make sure to also look at Additional Improvements (below).

In the section of your page, add the following :

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Prepare <amp-analytics> tag, as shown below:

<!-- 'Placeholder' values have been marked with angle braces. -->
<!-- Replace these placeholders with actual values. -->

<!-- For 'account', fill in your GA Tracking ID (UA-XXXXX-X). -->
<!-- For 'eventLabel', fill in the placement name. (This will be used for GA reporting.) -->
<amp-analytics type="googleanalytics" id="Taboola">
  <script type="application/json">
    {
       "vars": {
          "account": "<UA-XXXXX-X>"
       },
       "triggers": {
          "taboolaIframeLoaded": {
             "on": "ini-load",
             "request": "event",
             "selector": "amp-embed[type='taboola']",
             "vars": {
                "eventCategory": "taboola",
                "eventAction": "pageview",
                "eventLabel": "<placement>"
             }
          }
       }
    }
  </script>
</amp-analytics>

📘
The above code snippet uses the Taboola placement name as the eventLabel. Feel free to adapt this example to match your existing conventions for GA tracking.

Add the <amp-analytics> tag, immediately below the first Taboola <amp-embed> tag on the page:

<!-- 'Placeholder' values have been marked with angle braces - e.g. "<publisher-id>". -->
<!-- Replace these placeholders with actual values e.g. "<<publisherID>>". -->

<!-- `amp-embed` tag for the FIRST placement -->
<amp-embed width=100 height=100
  data-block-on-consent='_till_responded'
  type='taboola'
  layout='responsive'
  data-publisher='<publisher-id>'
  data-mode='<mode>'
  data-placement='<placement>'
  data-target_type='mix'
  {page-type}='auto'
  data-url=''>
</amp-embed>

<!-- Immediately below the placement, add an `amp-analytics` tag. -->
<!-- For 'account', fill in your GA Tracking ID (UA-XXXXX-X). -->
<!-- For 'eventLabel', fill in the placement name. (This will be used for GA reporting.) -->
<amp-analytics type="googleanalytics" id="Taboola">
  <script type="application/json">
    {
       "vars": {
          "account": "<UA-XXXXX-X>"
       },
       "triggers": {
          "taboolaIframeLoaded": {
             "on": "ini-load",
             "request": "event",
             "selector": "amp-embed[type='taboola']",
             "vars": {
                "eventCategory": "taboola",
                "eventAction": "pageview",
                "eventLabel": "<placement>"
             }
          }
       }
    }
  </script>
</amp-analytics>

Verify the newly added custom event. See the Verification Guidelines section, below.

Additional improvements

If you are using AMP, and your analytics solution does not support custom events, we recommend embedding an amp-analytics tag for Taboola (see below.) This will help improve the overall accuracy of AMP page views in Taboola Backstage.

🚧
Because AMP uses lazy loading, the amp-analytics tag relies on the user scrolling down the page.
As such, your analytics solution will typically reflect more page views than Taboola Backstage.
The steps below will help reduce this seeming discrepancy - but will not eliminate it.

Adding an `amp-analytics` tag

In the section of your page, add the following :

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Prepare an <amp-analytics> tag, as shown below:

<!-- 'Placeholder' values have been marked with angle braces - e.g. "<publisher-id>". -->
<!-- Replace these placeholders with actual values e.g. "acme-news". -->

<!-- For 'aid', fill in your Taboola publisher ID. -->
<amp-analytics type="taboola" id="taboola">
 <script type="application/json">
 {
      "vars": {
        "aid": "<publisher-id>"
      }
    }
  </script>
</amp-analytics>

<!-- 'Placeholder' values have been marked with angle braces - e.g. "<publisher-id>". -->
<!-- Replace these placeholders with actual values e.g. "acme-news". -->

<!-- For 'aid', fill in your Taboola publisher ID. -->
<!-- For 'mobileAid', fill in your Taboola publisher ID for *mobile*. -->
<amp-analytics type="taboola" id="taboola">
  <script type="application/json">
  {
    "vars": {
      "aid": "{\"aid\":\"<publisher-id>\",\"mobileAid\": \"<publisher-id-mobile>\"}"
    }
  }
  </script>
</amp-analytics>

3 Add the <amp-analytics> tag, immediately below the first Taboola <amp-embed> tag on the page:

<!-- 'Placeholder' values have been marked with angle braces - e.g. "<publisher-id>". -->
<!-- Replace these placeholders with actual values e.g. "<<publisherID>>". -->

<!-- `amp-embed` tag for the FIRST placement -->
<amp-embed
  width="100"
  height="100"
  data-block-on-consent="_till_responded"
  type="taboola"
  layout="responsive"
  data-publisher="<publisher-id>"
  data-mode="<mode>"
  data-placement="<placement>"
  data-target_type="mix"
  {page-type}="auto"
  data-url=""
>
</amp-embed>

<!-- Immediately below the first placement, add an `amp-analytics` tag. -->
<amp-analytics type="taboola" id="taboola">
  <script type="application/json">
    {
      "vars": {
        "aid": "<publisher-id>"
      }
    }
  </script>
</amp-analytics>

<!-- 'Placeholder' values have been marked with angle braces - e.g. "<publisher-id>". -->
<!-- Replace these placeholders with actual values e.g. "<<publisherID>>". -->

<!-- `amp-embed` tag for the FIRST placement -->
<amp-embed width=100 height=100
  data-block-on-consent='_till_responded'
  type='taboola'
  layout='responsive'
  data-publisher='<publisher-id>'
  data-mode='<mode>'
  data-placement='<placement>'
  data-target_type='mix'
  {page-type}='auto'
  data-url=''>
</amp-embed>

<!-- Immediately below the placement, add an `amp-analytics` tag. -->
<!-- For 'aid', fill in your Taboola publisher ID. -->
<!-- For 'mobileAid', fill in your Taboola publisher ID for *mobile*. -->
<amp-analytics type="taboola" id="taboola">
  <script type="application/json">
  {
    "vars": {
      "aid": "{\"aid\":\"<publisher-id>\",\"mobileAid\": \"<publisher-id-mobile>\"}"
    }
  }
  </script>
</amp-analytics>

📘
For more information about <amp-analytics>, refer to the official AMP documentation.

Verification guidelines

Adding the custom event

Once you have added a custom GA event, use the Realtime report in Google Analytics to verify that the newly added event is being tracked.

Making comparisons

Once Google Analytics has sufficient data, the stats for the custom event should correspond closely with the page view stats in Taboola reporting.

The following guidelines apply:

Verify that you have integrated Taboola into your pages correctly, and that Taboola placements are showing.

For a detailed checklist, see: Page view discrepancies
When comparing GA with Taboola reporting, it's best to use a date range of 7 days or more.
For a quick comparison, wait 48 hours (after adding the custom GA event) - then compare the last 24 hours.
Do not compare data from the last 24 hours. (Taboola data can take up to 8 hours to become available.)
Within Taboola Backstage, look at the Page views column under the Revenue Summary report.
Make sure to compare "apples with apples":
- Make sure that you are comparing stats for the same site.
  
  Note: You may need to select a specific Taboola account ("publisher") under your Taboola network.
- Make sure to use the same date range.

🚧
After following the above guidelines, metrics in GA should be similar to Taboola Backstage (although, not necessarily identical).
If that is not the case, reach out to your Taboola Account Manager for further guidance.

Tracking PVs via GA

Overview

📘
Not using GA?

Taboola page views

🚧
A common pitfall

Integration types

Prerequisites

📘

Standard pages

Overview

Standard (JS Tag) integration

📘
Use case

📘
What to track?

📘
Which `gtag` dimensions?

An alternative approach

Google Tag Manager (GTM)

📘
Use case

📘
What to track?

Google Ad Manager (aka DFP)

📘
Use case

🚧
SafeFrame

📘

🚧

📘

AMP pages

Overview

Tracking a custom GA event in AMP

📘
Use case

📘

Additional improvements

🚧

Adding an `amp-analytics` tag

📘

Verification guidelines

Adding the custom event

Making comparisons

🚧

Overview

📘Not using GA?

Taboola page views

🚧A common pitfall

Integration types

Prerequisites

📘

Standard pages

Overview

Standard (JS Tag) integration

📘Use case

📘What to track?

📘Which gtag dimensions?

An alternative approach

Google Tag Manager (GTM)

📘Use case

📘What to track?

Google Ad Manager (aka DFP)

📘Use case

🚧SafeFrame

📘

🚧

📘

AMP pages

Overview

Tracking a custom GA event in AMP

📘Use case

📘

Additional improvements

🚧

Adding an amp-analytics tag

📘

Verification guidelines

Adding the custom event

Making comparisons

🚧

📘
Not using GA?

🚧
A common pitfall

📘
Use case

📘
What to track?

📘
Which `gtag` dimensions?

📘
Use case

📘
What to track?

📘
Use case

🚧
SafeFrame

📘
Use case

Adding an `amp-analytics` tag