This article describes how using the Taboola Ecommerce Events Pixel on your website drives scaled shopper targeting and optimization for your Connexity performance marketing campaign. The pixel includes two layers of tags implemented in Google Tag Manager (the "base" Taboola Pixel Tag and the Ecommerce Pixel Tag). Along with the installation of the pixel tags, this article covers the setup of specific pixel tag events that will drive opportunities for increased campaign scale and performance.
You can also install the pixel through Shopify if that is what you're using for your ecommerce platform. The instructions for pixel installation through Shopify are here.
**Important: Please ensure that network settings allow data flow between our systems by enabling our domains and IP addresses. Please do this before testing with your Account Manager. You can find network access setting instructions here.
Links to Important Topics In This Article
- Pixels and Your Campaign
- Install With Google Tag Manager
- Pixel Verification
- Using the Javascript Pixel
Important Installation Steps
To successfully install the Unified Ecommerce Pixel, there are three steps to take:
Step 1 |
Step 2 |
Step 3 |
Step 4 |
Add the Taboola Ecommerce Pixel Template See installation instructions using Google Tag Manager. |
Implement Taboola Leave any existing Connexity tag installed along with the new tag until verification of correct installation is achieved. |
Implement Taboola Ecommerce Tag Implement the enhanced Taboola ecommerce events. |
Pixel Verification After validation with Connexity, we will transition conversion tracking to the new tag. |
PIXELS AND YOUR CAMPAIGN
Why Use Pixels
Advertisers working with Taboola and Connexity use pixels to drive campaign success. Our Pixels gather data to help you understand the actions users take on your website, like page visits, account creation, purchases, and video views. These activity signals help us to optimize your marketing campaigns for maximum success.
Scale Commerce Growth Opportunities
E-Commerce Events Tracking enables a retailer's existing first-party data to scale growth opportunities. Marketing solutions that leverage a retailer's own first-party data are becoming increasingly important as web browsers make incremental changes that further restrict the use of third-party cookies. The full Ecommerce Pixel uses insight about how shoppers interact with your sight to target interest-based audiences in high-intent content.
The Ecommerce Pixel gathers intent signals of visitors to your website and uses those signals to dynamically recommend the right product offers at the right time when visiting publisher content where Connexity or Taboola manage the placement of product ads. The full Ecommerce Pixel enables retailer product offers to access nearly thousands of high-volume content sites where traffic where Taboola has direct advertising relationships
Optimize Commerce Campaign Performance
Data from the Ecommerce pixel are also critical inputs for optimizing campaign performance. Signals from the Ecommerce pixel enable real-time adjustment of pricing and bidding algorithms in the Connexity Bid Optimizer to ensure efficient use of budget when scaling exposure across high-volume and in-demand Smart Pricing and placement optimization processes.
How Pixel Data is Used
Essential for Ecommerce Campaigns - The Ecommerce Events Pixel is an essential tool for any Taboola platform customer with a commerce campaign. It's easy and quick to set up, and loads asynchronously so it doesn't affect your page performance or SEO page ranking.
Events Drive Optimization - The pixel gathers information to learn how visitors interact with your website (site "events") and uses that information as intent signals to make data-driven decisions that optimize the performance of your campaign(s).
In this article you will find a list of event tags and their parameters. Some events are necessary for the basic operation of your campaign and, as such, are identified as Required. Other events are Optional, but when made available to the pixel can further refine the optimization of your campaign with more detailed intent information.
Compliant Usage - For any data processed through the Taboola platform that may fall in scope of applicable data protection laws (e.g., GDPR, CCPA), Taboola undertakes appropriate safeguards to ensure ongoing compliance.
INSTALL WITH GOOGLE TAG MANAGER
About Google Tag Manager (GTM)
What is the Tag Manager?
The Tag Manager is a tool that allows marketers to add and update tags and code snippets such as conversion tracking, site analytics, and remarketing code quickly and easily, without editing the website’s code.
What is a Tag?
A tag is a piece of code that is often provided by marketing, for analytics platforms to send information to them (e.g., Taboola Pixel, Facebook Pixel, Google Analytics Tracking Code, Remarketing Tags, etc.).
What is the Taboola Ecommerce Pixel template?
The Google Tag Manager Taboola E-Commerce Pixel template allows marketers to easily implement the Taboola E-Commerce pixel without the need to know how to code.
*Important*
Content Security Policy
If your site implements a Content Security Policy (CSP), you will need to ensure the following domains are defined in your “Content-Security-Policy” meta tag:
- js.cnnx.link - Used to download Connexity Event API JavaScript
- www.bizrate.com - Used for Connexity conversion event tracking
- rr.bizrate.com - Used for Connexity conversion event tracking
- cdn.taboola.com - Used to download Taboola Event Tracking API JavaScript
- trc-events.taboola.com - Used for Taboola event tracking
- trc.taboola.com - Used for Taboola event tracking
This is required for this pixel installation to function properly. Please check with your internal dev teams if your site implements a CSP.
1 - Add the Taboola Ecommerce Pixel Template
You can access the Taboola template from within the Google Tag Manager Template Gallery or from your Tag Manager homepage. ➤ Taboola template in Google Tag Manager
1. Go to Google Tag Manager and navigate to the Templates section on the left side of the page page
2. Under Tag Templates, click on "Search Gallery", and search for Taboola E-Commerce Pixel.
3. Click on the Taboola E-Commerce Pixel option, and add the Taboola E-Commerce Pixel template to the relevant workspace.
2 - Implement Taboola Base Pixel Tag
- Exit the templates screen
- Click Add a New Tag in the New Tag box.
- Click 'Tag Configuration'
- Choose E-commerce Taboola Pixel from the custom tags section
- Name the new tag, for example: ‘Taboola- Base Pixel’
-
Input your account ID which you want the pixel to be tracking. Your Account ID will be provided to you by your Account Manager. This is NOT the same as your Connexity Merchant ID (MID).
- Select 'Event Type' as 'Base Pixel - Page View'
- Click on the Advanced Settings dropdown and select Once per Page under the tag firing options.
- Click on Triggers then select All Pages for firing triggering.
- Save the Pixel.
Verify & Publish the Tag
The final step is to verify the tag is added and properly running on your website.
- Click Preview from the top right of the working space.
- Open your website in a new tab.
- If you see that your taboola pixel has been fired like in the images below, it’s working properly.
- Click Submit then Publish to save all changes.
- Go back into Taboola Ads and see if the window has changed to Pixel is Active (Note: It may take up to 20 minutes for your pixel status to change after installing it).
3 - Implement Taboola Ecommerce Tag
1. Exit the templates screen
2. Click Add a New Tag in the New Tag box
3. Click "Tag Configuration"
4. Choose Taboola E-Commerce Pixel from the custom tags section
5. Name the new tag to identify it. For example ‘Taboola Ecomm - Add to Cart’.
6. Input your account ID which you want the pixel to be tracking. (Your account ID will be provided to you by your Connexity Account Manger)
7. If you have a Google Enhanced Ecommerce data layer installed on your site, you can select the “Enhanced Ecommerce” checkbox . This will eliminate the need to select GTM variables (step 9).
Available events for Enhanced Ecommerce are: Add To Cart, Category View, Checkout, Product View, Purchase, and Remove From Cart. *See Event Parameters below for which events are required/optional to your setup*
8. Choose the Event Name you would like to implement from the drop down (the available options are changed based on the “Enhanced Ecommerce” selection ):
9. Choose the GTM Variable** , if requested, you would like to return from the drop down (specific variable requirements for the event can be found by clicking ‘?’):
** Event Parameters
Include the following variables with the standard events listed above that support them. Following are the available event parameters and their values definition
Event | Event Description | Event Parameters |
Product View |
The user viewed the info page of an item |
(Required) Product IDs (String/Array of strings/strings separated by commas) Select the GTM Variable that returns Product IDs (SKUs) in the current page. Examples: [“sku1”, “sku2”], “sku1”, “sku1,sku2” |
Add To Cart |
A product was added to the shopping cart |
(Strongly Recommended) Product IDs (String/Array of strings/strings separated by commas): Select the GTM Variable that returns Product IDs (SKUs) in the current page. Examples: [“sku1”, “sku2”], “sku1”, “sku1,sku2” |
Purchase | A purchase was made |
(Required) Cart Details (Array of objects): Select the GTM Variable that returns an array containing the quantity, product ID and the unit price of each item in the user's cart. Example: [{productId: “sku1”, quantity: 3, price: 22.45}, {productId: “sku2”, quantity: 4, price: 15.76}] Order ID (String): Select the GTM Variable that returns the Order ID of the current transaction. This ID should be unique per Order. Value (Number Decimal): The total value of the purchase (conversion) in the given currency. Example: 9.99 Currency (String): The currency used in the cart in ISO 3-letter currency code notation. Example: “USD” Customer Type: Indication of whether returning (0) or new (1) customer |
Category View |
A list of products was displayed to the user by browsing a category |
(Strongly Recommended) Product IDs (String/Array of strings/strings separated by commas. Select the GTM Variable that returns Product IDs (SKUs) in the current page. Examples: [“sku1”, “sku2”], “sku1”, “sku1,sku2” Category (String): Select the GTM Variable that returns the name of the category being viewed. Example: “Womens Shoes” Category ID (String): Select the GTM Variable that return the ID of the category being viewed |
Search |
A search results page was displayed to the user |
(Optional) Product IDs (String/Array of strings/strings separated by commas. Select the GTM Variable that returns Product IDs (SKUs) in the current page. Examples: [“sku1”, “sku2”], “sku1”, “sku1,sku2” Search Term (String): Select the GTM Variable that returns the search term entered by the user. Example: “long dress” |
Home Page Visit |
The home page was displayed to the user. |
(Required) |
Checkout |
A checkout flow was started |
(Optional) Product IDs (String/Array of strings/strings separated by commas): Select the GTM Variable that returns Product IDs (SKUs) in the current page. Examples: [“sku1”, “sku2”], “sku1”, “sku1,sku2” |
Add to Wishlist |
A product was added to a wish list. |
(Optional) Product IDs (String/Array of strings/strings separated by commas): Select the GTM Variable that returns Product IDs (SKUs) in the current page. Examples: [“sku1”, “sku2”], “sku1”, “sku1,sku2” |
Remove from Wishlist |
A product was removed from the wish list. |
(Optional) Product IDs (String/Array of strings/strings separated by commas): Select the GTM Variable that returns Product IDs (SKUs) in the current page. Examples: [“sku1”, “sku2”], “sku1”, “sku1,sku2” |
10. Click the Advanced Settings drop down and select Once per Event under tag firing options.
11. Select the relevant triggering option. If you wish to track clicks, set the click trigger. If you want a pixel to be fired when users scroll down to the website, set the scroll depth trigger. (Note: You need to set these triggers in advance). You can find more information about GTM triggers here.
12. Save, submit and publish.
13. Verify it is firing correctly with the Taboola tag assistant Chrome extension or via the google tag manager debugging tool.
*Important*
Content Security Policy
If your site implements a Content Security Policy (CSP), you will need to ensure the following domains are defined in your “Content-Security-Policy” meta tag:
- js.cnnx.link - Used to download Connexity Event API JavaScript
- www.bizrate.com - Used for Connexity conversion event tracking
- rr.bizrate.com - Used for Connexity conversion event tracking
- cdn.taboola.com - Used to download Taboola Event Tracking API JavaScript
- trc-events.taboola.com - Used for Taboola event tracking
- trc.taboola.com - Used for Taboola event tracking
This is required for this pixel installation to function properly. Please check with your internal dev teams if your site implements a CSP.
PIXEL VERIFICATION
Once you have implemented the e-Commerce Pixel on your website (using Google Tag Manager or similar), we recommend that you verify your implementation.
To verify that the eCommerce Pixel is present and working, perform the steps outlined below.
Method 1: Verification via Chrome Extension
Getting Ready
The Getting Ready steps are required only once per device.
1. Install the Taboola Pixel Helper extension from the ➤ Chrome Web Store.
2. Confirm that Taboola Pixel Helper is showing in the ‘extensions’ toolbar (to the right of the browser address bar). If it is not showing, click on the extensions icon, and pin Taboola Pixel Helper to the ‘extensions’ toolbar.
First Steps
1. Browse to your website and perform various e-commerce operations
2. For each e-commerce operation (or page visited), perform the set of steps outlined in "Per Action Steps" below.
Per Action Steps
1. Examine the Taboola Pixel Helper extension.
2. Taboola Pixel Helper displays an even count. If there is no event count, click on the icon anyway (see next step). Occasionally the event count does not display, even though events are present.
3. Click on the extension to view the event details:
4. Scroll down and expand the 'Parameters Sent' section:
5. Verify the parameters look correct
-
- Confirm the "ce" parameter was send with a value of "ecomm".
- Decode the "data' parameter and verify that all event data is correct. (For example, check that the product details look accurate.) There are a number of tools that can be used to decode URL data - e.g. this one.
- Example:
- URL encoded "data' parameter:
-
%7B%22productIds%22%3A%5B%222280298938464%22%5D%2C%22timestamp%22%3A%227%2F1%2F2021%22%2C%22eventType%22%3A%22PRODUCT_VIEW%22%7D
- Decoded "data' parameter:
-
{"productIds":["2280298938464"],"timestamp":"7/1/2021","eventType":"PRODUCT_VIEW"}
-
- Verify that each event is sent only once.
6. Verify that the error count (top right) is 0. In the event of an error (e.g. invalid parameter values), an error message is shown:
Method 2: Verification via Network tab (Chrome Tools)
This method is intended for more advanced users.
Getting Ready
1. Open Chrome Dev Tools. (tip: position the Dev Tools window below the web page for maximum width.)
2. Select the Network tab and enter "taboola" in the Filter field (top left).
3. Browse to your website.
First Steps
1. Examine the traffic under the Network tab and verify that tfa.js is being called:
2. Perform various e-commerce operations. For each e-commerce operation (or page visited) perform the steps outlined in the "Per Action Steps" below.
Per Action Steps
1. Check that a corresponding network call is present. Look for an entry that begins with “unip?ce=ecomm”:
2. If the expected entry is not present, select the Console tab and check for errors.
3. Else, click on the entry and select the Headers tab on the right:
4. Scroll down to the Query String Parameters section. Verify that all event parameters (e.g. "ce", "en" and "data") were sent correctly:
Using the Javascript Pixel
A small API call can notifying Taboola whenever a visitor performs a relevant shopping activity on your website . The Taboola E-Commerce Events Javascript API is straightforward, and supports the following events:
- addToCart
- removeFromCart
- addToWishList
- removeFromWishList
- productView
- categoryView
- homePageVisit
- search
- purchase (Includes Customer Type *optional*)
- checkout
Sending as many of the above events as possible will improve the performance of the product recommendation algorithm.
The description below outlines the Taboola E-Commerce Events Javascript API and its usage. It is intended for technical audiences who are skilled at implementing pixels on a Website.
API Overview
The API is implemented in the Taboola Pixel’s tfa.js library.
Ecommerce events are reported via the _tfa.push() function. Each event should contain the event name and one or more event parameter objects. The available events and their parameters are detailed in the table below. Each of the parameter objects mentioned will be defined and examples given later in this document.
Before using the _tfa.push() event in a page you should verify the events queue is initialized by calling:
window._tfa = window._tfa || [];
API Events
Following is the list of supported API events and their associated parameter objects. The code should be implemented on all site pages:
Event Name | Event Description | Event Parameters |
*pageView |
(Required) The user viewed any page on the website |
|
addToCart |
(Optional) A product was added to the shopping cart. |
productIds, additionalInfo |
removeFromCart |
(Optional) A product was removed from the shopping cart. |
productIds, additionalInfo |
addToWishList |
(Optional) A product was added to a wish list. |
productIds, additionalInfo |
removeFromWishList |
(Optional) A product was removed from the wish list. |
productIds, additionalInfo |
productView |
(Required) The user viewed the info page of an item. |
productIds, additionalInfo |
categoryView |
(Optional) A list of products was displayed to the user by browsing a category. |
productIds, category, categoryId, additionalInfo |
homePageVisit |
(Required) The home page was displayed to the user. |
additionalInfo |
search |
(Optional) A search results page was displayed to the user. |
searchTerm, productIds, additionalInfo |
purchase |
(Required) A purchase was made. |
cartDetails, currency, value, orderId, additionalInfo (Includes Customer Type [Optional] - Indicates of whether returning (0) or new (1) customer) |
checkout |
(Optional) A checkout flow was started. |
productIds, additionalInfo |
*pageView - In case that you already have this event defined (have a previous sponsored content Taboola campaign), there is no need to redefine this event again.
Event Parameters
Include the following parameters with the standard events listed above that support them. Format your parameter object values in the API call using JSON.
Following are the available event parameters and their values definition
Property Key | Value Type | Parameter Values |
currency | String |
(Required) The currency used in the cart in ISO 3-letter currency code notation. Example: “USD” |
productIds | String / Array of strings / String of ids separated by commas |
(Required) Product IDs (SKUs) associated with the event. Examples: [“sku1”, “sku2”], |
orderId | String |
(Required) Order ID associated with the event. |
categoryId | String |
(Optional) A parameter containing the id of the category being viewed. |
category | String |
(Optional) The name of the category being viewed. Example: “Womens Shoes” |
searchTerm | String |
(Optional) The string entered by the user for the search. Example: “long dress” |
cartDetails | Array of objects |
(Optional) An array of JSON objects containing the quantity, productId and the unit price of each item in the cart. [ {productId: “sku1”, quantity: 3, price: 22.45}, {productId: “sku2”, quantity: 4, price: 15.76} ] |
value | Number (decimal) |
(Required) The total value of the purchase (conversion) in the given currency. Example: 9.99 |
additionalInfo | Map of strings |
(Optional) A parameter containing a map with additional information regarding the product or the user. |
campaignIds | Array of number |
(Required) A parameter containing a list of campaign id this event is relevant to. |
API Usage Examples
Following are examples of the API usage (replace the advertiser's real ID instead of the placeholder <INSERT_ADVERTISER_ID>). Note that “name” can be in lowercase as well.
PageView
window._tfa.push({notify: 'event', name: 'page_view', id: 1234567});
addToCart
window._tfa.push({ id: <INSERT_ADVERTISER_ID>, notify: 'ecevent', name: 'ADD_TO_CART',
productIds: ['sku1','sku2']
});
removeFromCart
window._tfa.push({id: <INSERT_ADVERTISER_ID>, notify: 'ecevent', name: 'REMOVE_FROM_CART' ,
productIds: ['sku1','sku2']
});
addToWishList
window._tfa.push({id: <INSERT_ADVERTISER_ID>, notify: 'ecevent', name: 'ADD_TO_WISH_LIST',
productIds: ['sku1','sku2']
});
removeFromWishList
window._tfa.push({id: <INSERT_ADVERTISER_ID>, notify: 'ecevent', name: 'REMOVE_FROM_WISH_LIST',
productIds: ['sku1']
});
productView
window._tfa.push({id: <INSERT_ADVERTISER_ID>,notify: 'ecevent', name: 'PRODUCT_VIEW',
productIds: ['sku1']
});
categoryView
window._tfa.push({id: <INSERT_ADVERTISER_ID>, notify: 'ecevent', name: 'CATEGORY_VIEW',
productIds: ['sku1','sku2'],
category: 'food',
categoryId: '123456'
});
homePageVisit
window._tfa.push( {id: <INSERT_ADVERTISER_ID>, notify: 'ecevent', name: 'HOME_PAGE_VISIT'});
search
window._tfa.push({id: <INSERT_ADVERTISER_ID> , notify: 'ecevent', name: 'SEARCH',
productIds: ['sku1','sku2'],
searchTerm: 'clothes and football'
});
purchase
window._tfa.push({id: <INSERT_ADVERTISER_ID>, notify: 'ecevent', name: 'PURCHASE',
orderId: 'order123',
currency: 'USD',
value: 130.39,
cartDetails: [
{productId: 'sku1', quantity: 3, price: 22.45},
{productId: 'sku2', quantity: 4, price: 15.76}
],
custType: '1'
});
checkout
window._tfa.push({id: <INSERT_ADVERTISER_ID>, notify: 'ecevent', name: 'CHECKOUT',
productIds: ['sku1','sku2']
});
Comprehensive Integration Example
Following is a complete implementation example, including an e-commerce API call.
If you already have the Taboola pixel code installed, add the e-commerce specific event call to your existing Pixel code as follows on all relevant site pages (E.g. when an product-view event occurs then the product-view event should be fired):
window._tfa.push({id: <INSERT_PUBLISHER_ID> ,notify: 'ecevent', name: 'PRODUCT_VIEW', productIds: ['sku1']});
In case you don’t have the Taboola pixel code installed, please add the Taboola pixel code to every page with the specific relevant e-commerce event (see red line below) and includes that advertiser's real ID instead of the placeholder id - 1234567
// Example: the account id is 1234567
<!-- Taboola Pixel Code -->
<script type='text/javascript'>
window._tfa = window._tfa || [];
window._tfa.push({notify: 'event', name: 'page_view', id: 1234567});
window._tfa.push({id: 1234567, notify: 'ecevent', name: 'PRODUCT_VIEW', productIds: ['sku1']});
!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 of Taboola Pixel Code -->