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.

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.

Tracking for non-AMP

Overview

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

In this section, guidelines are provided for Standard (aka JS Tag) and Google Ad Manager (aka DFP) integrations.

📘
For AMP integrations, see Tracking for AMP below.

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 (or analytics.js).

Standard (JS Tag) integration

📘
For more detail about this Taboola flow, see: Standard (aka JS Tag).

Implement a custom GA event for the first Taboola placement on the page:

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

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

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

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

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 (or analytics.js).

Paste the code snippet inside the Taboola <script> tag for the first placement, just below the push command:

<!-- 'Placeholder' values have been marked with angle braces - e.g. '<placement>'. -->
<!-- Replace these placeholders with actual values e.g. 'Below Article Thumbnails'. -->

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

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

  // The GA custom event:
  gtag('event', 'taboola', {
    'event_category': 'PV',
    'event_label': '<placement>'
  });
</script>

<!-- 'Placeholder' values have been marked with angle braces - e.g. '<placement>'. -->
<!-- Replace these placeholders with actual values e.g. 'Below Article Thumbnails'. -->

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

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

  // The GA custom event:
  ga('send', 'event', '<placement>', 'PV');
</script>

📘
For more detail about placement tags, see: Standard (aka JS Tag) > Add the placement tags.

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

Google Ad Manager (aka DFP) Integration

📘
For more detail about this Taboola flow, see: Google Ad Manager (aka DFP).

🚧
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 (or analytics.js).

🚧
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.

Tracking for AMP

Overview

Because AMP does not allow direct access to JS tags, a different approach is needed.

📘
For general information about Taboola integration for AMP, see: AMP.

Tracking a custom GA event in AMP

🚧
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.)
For more information, reach out to your Taboola Account Manager.
If your analytics solution does not support custom events, see 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. If no placements are showing for a given page, Taboola Backstage will not record a page view.
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

Taboola page views

🚧
A common pitfall

Tracking for non-AMP

Overview

📘

Prerequisites

📘

Standard (JS Tag) integration

📘

📘

📘

Google Ad Manager (aka DFP) Integration

📘

🚧
SafeFrame

📘

🚧

📘

Tracking for AMP

Overview

📘

Tracking a custom GA event in AMP

🚧

📘

Additional improvements

🚧

Adding an `amp-analytics` tag

📘

Verification guidelines

Adding the custom event

Making comparisons

🚧

Overview

Taboola page views

🚧A common pitfall

Tracking for non-AMP

Overview

📘

Prerequisites

📘

Standard (JS Tag) integration

📘

📘

📘

Google Ad Manager (aka DFP) Integration

📘

🚧SafeFrame

📘

🚧

📘

Tracking for AMP

Overview

📘

Tracking a custom GA event in AMP

🚧

📘

Additional improvements

🚧

Adding an amp-analytics tag

📘

Verification guidelines

Adding the custom event

Making comparisons

🚧

🚧
A common pitfall

🚧
SafeFrame

Adding an `amp-analytics` tag