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 standard pages
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 thepush
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
SafeFrame
can fail to be tracked (or even render).When adding your
Creative
in Google Ad Manager, make sure thatServe 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 forwindow.top
.
- Paste the code snippet inside the relevant Taboola
<script>
for GAM, just below thepush
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 AMP pages
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
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.
- Make sure that you are comparing stats for the same site.
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.
Updated 4 months ago