Skip to main content
Deutsch Français Italiano

Add Pixel Events for Dynamic (DCO) Product Ads

  • Updated

This article describes how to set up the Connexity Shopping Tag on your ecommerce site to drive scaled shopper targeting and optimization for your Connexity performance marketing campaign.

Links to Topics In This Article

 

OVERVIEW

Why Use the Connexity Tag

The Connexity Shopping Tag 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 Connexity Shopping Tag uses insight about how shoppers interact with your sight to target interest-based audiences in high-intent content.

The Connexity Shopping Tag also gathers intent signals critical to optimizing campaign performance. Real-time and accurate data captured by the tag are inputs into the Connexity Smart Pricing and placement optimization processes. These data are essential to ensure optimal performance, actionable insight and useful reporting.  

Along with the installation of the Connexity tag, this article covers the setup of specific tag events that enable the observation of activity by retail site visitors. These event data, along with consent to use the data, will drive opportunities for increased campaign scale and performance. 

Connexity Tag Events

Tag Events to Implement

Page Views

Visit to any page on the retailer’s site

Category View

Visits to product category pages

Product View

Visits to pages with product offers and product description data

Add to Cart

The action and data associated with adding a product(s) to a cart or list

Conversion

The conversion and product meta data of a purchase

 

How Connexity Uses Tag Event Data

Event data observed by the Connexity tag drives optimization for campaign performance and marketing to customers or prospective shoppers. 

  • Optimization - Connexity uses visit event data to inform automated algorithms that manage bidding, pricing and placement selection. 
  • Marketing - Connexity aggregates visit event data with other partner data sources to develop interest-based segmentations that aid targeting of product offer placements to audiences with strong intent signals.

Important Installation Steps

To successfully install the Connexity Shopping Tag, there are three steps to take:

Step 1

Step 2

Step 3

Install the Tag and Events

See installation instructions and options below.

Verify Installation

Leave any existing Connexity tag installed along with the new tag until verification of correct installation is achieved.

Transition Tracking

After validation with Connexity, we will transition conversion tracking to the new tag.

 

Installation Options

There are two options for installing the new Connexity tag:

  1. Install the Connexity Tag yourself – You’ll need to get into your website’s HTML to place the base code and the event code
  2. Use a tag manager or platform integration

 

INSTALLING ON YOUR OWN

Note: It is important to install the tag on all pages of your site. These instructions include adding the Connexity tag to all pages of the site via the site header. There are also specific pages and events for which event tags will be added.

Installing the Tag Code to Your Site

Copy the entire code below and paste it in the header of your website. Paste the code at the bottom of the header section, just above the closing </head> tag.  There are three parts of the Connexity tag which need to be placed in the proper order.

*Replace all placeholders in RED with your unique merchant values*

<!-- Tag 1 - Initialize cnxDataLayer and cnxtag -->
<script>
     window.cnxDataLayer = window.cnxDataLayer || [];
     function cnxtag(){cnxDataLayer.push(arguments);}
</script>

<!-- Tag 2 - Register pageview or conversion event via cnxtag -->
<script>
     cnxtag('event', 'pageview', {'product_ids':['sku1']});
</script>

<!-- Tag 3 -  Load Connexity Pixel’s cnxtag.js library - call once per page  -->
<script async src="https://js.cnnx.link/roi/cnxtag-min.js?id=12345"></script>

Setup Conversion Event

For an order confirmation page, replace the pageview event in Tag 2 above with a conversion event. 

*Replace all placeholders in RED with your unique merchant values*

cnxtag('event', 'conversion', {
                   'mid': '12345',
                   'cust_type': '1',
                   'order_value': '1.99',
                   'currency': 'USD',
                   'order_id': '999999',
                   'units_ordered': '3'
                   });

Be sure to map your user defined variables to the appropriate order conversion event values. There are six (6) values to define as variables (an asterisk denotes a required field):

  1. mid* - Connexity merchant identifier
  2. cust_type - 1 for new customer; 0 for existing customer; empty if unknown
  3. order_value* - Decimal value in local currency
  4. currency* - Local currency (e.g. USD, EUR, GBP)
  5. order_id* - Unique order identifier
  6. units_orders - Number of items purchases

Here is how the tracking tag and conversion event would look on a conversion page:

*Replace all placeholders in RED with your unique merchant values*

<html>
 <head>
     <title>CNX Tag HTML Example – Conversion Page (Order Confirmation Page)</title>
     <script>
       window.cnxDataLayer = window.cnxDataLayer || [];
       function cnxtag(){cnxDataLayer.push(arguments);}
     </script>
     <script>
       cnxtag('event', 'conversion', {
                  'mid': '12345',
                  'cust_type': '1',
                  'order_value': '1.99',
                  'currency': 'USD',
                  'order_id': '999999',
                  'units_ordered': '3'
                  });
     </script>
     <script async src="https://js.cnnx.link/roi/cnxtag-min.js?id=12345"></script>
 </head>
<body><!—PAGE CONTENT --></body>
</html>

IMPORTANT - If updating a previously installed Connexity tag, please verify installation and connect with your Connexity Account Manager before removing the previously installed tag.

Setup Category View Event

This event code should be placed in Tag 2 on site pages that list products by category. The example code below can be used to set up your Category View event. Copy and paste this code being sure to map your site defined Product ID, Category Name, and Category ID  values to the code. Note we recommend the Google product category taxonomy, but can work with your existing category taxonomy.

*Replace all placeholders in RED with your unique merchant values*

cnxtag('event', 'pageview', {
                     'product_ids':['8888'],
                     'category_name':'digital camera',
                     'category_id':'402'
                     });

Map your site defined variables to the appropriate Category Event values. 

  1. product_ids – IDs for products on your category level pages
  2. category_name – Google product category taxonomy or local taxonomy
  3. category_id  – Google product category taxonomy or local taxonomy id

The pageview event tag should look similar to the following on a Category page:

*Replace all placeholders in RED with your unique merchant values*

<html>
 <head>
     <title>CNX Tag HTML Example – Category Page</title>
     <script>
       window.cnxDataLayer = window.cnxDataLayer || [];
       function cnxtag(){cnxDataLayer.push(arguments);}
     </script>
     <script>
       cnxtag('event', 'pageview', { 'product_ids':['8888','9999'], 'category_name':'digital camera', 'category_id':'402' });
     </script>
     <script async src="https://js.cnnx.link/roi/cnxtag-min.js?id=12345"></script>
 </head>
 <body><!—PAGE CONTENT --></body>
</html>

Setup Product View Event

This event code should be placed in Tag 2 on site pages that include individual product offers and provide descriptive data for those products. The example code below can be used to set up your Product View event. Copy and paste this code being sure to map your site defined Product ID value to the code.

*Replace all placeholders in RED with your unique merchant values*

cnxtag('event', 'pageview', {
                     'product_ids':['8888']
                     });

Map your site defined Product ID variables to the appropriate Product View Event values. Note the product ids provided should be the unique item id or item group id provided in the Connexity product feed. 

The pageview event tag should look similar to the following on a Product page:

*Replace all placeholders in RED with your unique merchant values*

<html>
 <head>
     <title>CNX Tag HTML Example – Category Page</title>
     <script>
       window.cnxDataLayer = window.cnxDataLayer || [];
       function cnxtag(){cnxDataLayer.push(arguments);}
</script>
<script>
       cnxtag('event', 'pageview', {'product_ids':['8888']});
</script>
<script async src="https://js.cnnx.link/roi/cnxtag-min.js?id=12345"></script>
 </head>
 <body><!—PAGE CONTENT --></body>
</html>

Setup Add to Cart Event

Unlike the Category View Event and Product View Event triggered at page load, the Add to Cart Event is triggered by a visitor/user action of clicking on an ‘add to cart’ button or option. 

Set up the Add to Cart event. This event code should be added to the script that triggers the add to cart action when a user makes the selection of adding one or more products to a cart or saved product list. 

The code below can be used for an Add to Cart event. Fire the cnxtag addtocart event from a click listener, an existing function associated with an add to cart on your site, or inject the event in a new script block.

*Replace all placeholders in RED with your unique merchant values*

cnxtag('event', 'addtocart', {
                     'product_ids':['8888']
                     });

For example, the page below calls the cnxtag addtocart event when a user clicks the button.

*Replace all placeholders in RED with your unique merchant values*

<html>
<head>
     <title>Category Page w/ Add To Cart Example</title>

     <script>
       window.cnxDataLayer = window.cnxDataLayer || [];
       function cnxtag(){cnxDataLayer.push(arguments);}
     </script>
     <script> 
       cnxtag('event', 'pageview', {'product_ids':['sku1', 'sku2'], 'category_name': 'Womens Shoes'});
     </script>

     <script async src="https://js.cnnx.link/roi/cnxtag-min.js?id=12345"></script>
</head>
<body>
     <button id="addToCartButton">Click me to add to cart!</button>
     <script>
      addToCartButton.onclick = function() {
        cnxtag('event', 'addtocart', {'product_ids':['8888']});
      };
     </script>
</body>
</html>

       

 

INSTALLING WITH A TAG MANAGER

Note: It is important to install the tag on all pages of your site. These instructions include adding the Connexity tag to all pages of the site via the site header. There are also specific pages and events for which event tags will be added. Also, you will need a Tag Manager tool, such as Google Tag Manager.  

Installing the Set-up Tag on Your Site

Note: Leave the existing tag installed while installing the new Connexity tag. We’ll need to verify the installation.

  1. Log in to your Google Tag Manager account. Select your website's container and click Add a new tag. 
  2. Click Custom HTML Tag and enter a name for your tag (e.g. CNX – Tag 1 - Set-up). Copy the entire cnxDataLayer and cnxtag initialization code, as shown below.  
  3. Return to Google Tag Manager and paste the code in the HTML container.
  4. Click the Advanced Settings dropdown…
    • Select Once per page under Tag firing options.
    • Enter ‘2’ for ‘Tag firing priority’
  5. Under Triggering, select All Pages (Page View).
  6. Click Create Tag.

*Replace all placeholders in RED with your unique merchant values*

<script>
              window.cnxDataLayer = window.cnxDataLayer || [];
              function cnxtag(){cnxDataLayer.push(arguments);}
       </script>
       <script async src=”https://js.cnnx.link/roi/cnxtag-min.js?id=12345”></script>

Setup Conversion Event

This is similar to the process used to create the tag above, but using a trigger to define a conversion event.  If you don’t already have a Trigger associated with the conversion page, you’ll want to set up a Page View trigger, via the Triggers menu, for when the page type denotes a conversion. Depending on your site, you may use a Google data layer variable containing the page type or match a pattern in the page url. After creating the Trigger, you can create the tag.

  1. In Google Tag Manager, select your website’s container and click Add a new tag.
  2. Click Custom HTML Tag and enter a name for your tag (e.g. CNX – Tag 2 – Conversion Event). Copy the Connexity conversion page code, as shown below. Replace all placeholders in RED with your unique merchant values. 
<script>cnxtag('event', 'conversion', {
       'mid': '12345',
       'cust_type': '1',
       'order_value': '1.99',
       'currency': 'USD',
       'order_id': '999999',
       'units_ordered': '3'});
</script>
  1. Map your user defined variables to the appropriate order conversion event values. There are six values to define as variables (an asterisk denotes a required field):
    • mid*  - Connexity merchant identifier
    • cust_type – 1 for new customer; 0 for existing customer; empty if unknown
    • order_value* – Decimal value in local currency
    • currency* – Local currency (e.g. USD, EUR, GBP)
    • order_id* – Unique order identifier
    • units_orders – Number of items purchased
    • For Google Tag Manager, you will likely want to use user-defined variables (https://support.google.com/tagmanager/topic/9125128).
  2. Under Advanced Settings…
    • Select Once per event under Tag firing options, and
    • Enter ‘1’ for ‘Tag firing priority’
  3. Under Triggering, select the trigger that is associated with the order conversion page.
  4. Click Create Tag.

Setup Category View Event

If you don’t already have a Trigger associated with a category page, you’ll want to set up a Page View trigger, via the Triggers menu, for when the page type denotes a category view.  After creating the Trigger, you can create the tag.

  1. In Google Tag Manager, select your website's container and click Add a new tag.
  2. Click Custom HTML Tag and enter a name for your tag (e.g. CNX – Tag 2  – Category View). Copy and paste this code being sure to map your site defined Product ID, Category ID and Category Name values to the code. Note we recommend the Google product category taxonomy, but can work with your existing category taxonomy. Replace all placeholders in RED with your unique merchant values. 
 <script>
   cnxtag('event', 'pageview', { 'product_ids':['8888'], 'category_id':'402', 'category_name':'digital camera'});
 </script>
  1. Map your site defined variables to the appropriate Category Event values. 
  2. Under Advanced Settings…
    • Select Once per event under Tag firing options, and
    • Enter ‘1’ for ‘Tag firing priority’
  3. Under Triggering, select the trigger that is associated with a category page.
  4. Click Create Tag.

Setup Product View Event

If you don’t already have a Trigger associated with a category page, you’ll want to set up a Page View trigger, via the Triggers menu, for when the page type denotes a product page.  After creating the Trigger, you can create the tag.

  1. In Google Tag Manager, select your website's container and click Add a new tag.
  2. Click Custom HTML Tag and enter a name for your tag (e.g. CNX – Tag 2  – Product View). Copy and paste this code being sure to map your site defined Product ID values to the code. Replace all placeholders in RED with your unique merchant values. 
  <script>
    cnxtag('event', 'pageview', {'product_ids':['8888']});
  </script>
  1. Map your site defined Product ID variables to the appropriate Product View Event values. Note the product ids provided should be the unique item id or item group id provided in the Connexity product feed. For Google Tag Manager, you will likely want to use user-defined variables (https://support.google.com/tagmanager/topic/9125128).
  2. Under Advanced Settings..
    • Select Once per event under Tag firing options, and
    • Enter ‘1’ for ‘Tag firing priority’ 
  3. Under Triggering, select the trigger that is associated with a product page.
  4. Click Create Tag.

Setup Load of External cnxtag JavaScript library

  1. In Google Tag Manager, select your website's container and click Add a new tag.
  2. Click Custom HTML Tag and enter a name for your tag (e.g. CNX – Tag 3 - Remote cnxtag resource download). Replace all placeholders in RED with your unique merchant values. 
    <script async src="https://js.cnnx.link/roi/cnxtag-min.js?id=12345"></script>
  1. Return to Google Tag Manager and paste the code in the HTML container.
  2. Under Advanced Settings…
    • Select Once per page under Tag firing options, and
    • Enter ‘0’ for ‘Tag firing priority’
  3. Under Triggering, select All Pages (Page View).
  4. Click Create Tag.

Setup Add to Cart Event

  1. In Google Tag Manager, select your website's container and click Add a new tag.
  2. Click Custom HTML Tag and enter a name for your tag (e.g. CNX - User Event Tag - Add to Cart). Copy and paste this code being sure to map your site defined Product ID values to the code. Replace all placeholders in RED with your unique merchant values. 
<script>
  cnxtag('event', 'addtocart', {'product_ids':['8888']});
</script>
  1. Map your site defined product id variables to the appropriate Add To Cart Event values. For Google Tag Manager, you will likely want to use user-defined variables (https://support.google.com/tagmanager/topic/9125128).
  2. Under Advanced Settings, select Once per event under Tag firing options.
  3. Under Triggering, select the trigger that is associated with adding a product to a cart or saved product list. For example, a trigger on Click - All Elements where Click Id equals ‘addToCartButton’ and a button with an id of ‘addToCartButton’ is defined on the page.
  4. Click Create Tag.

 

 

VERIFYING INSTALLATION

Connexity provides a Tag Helper to assist you in verifying correct installation of the Connexity Shopping Tag. This Tag Helper tool will identify whether each event in your Shopping Tag installation is being captured correctly and will recommend changes where errors exist. The Connexity Tag Helper is a Chrome extension available on the Chrome Web Store. 

Connexity Pixel Helper

The Connexity Tag Helper is a browser extension used to verify proper installation of Connexity Shopping Tags on your ecommerce site. Use this tool once you have completed the implementation of all required Connexity Shopping Tags.

Download and install the extension directly from the Chrome Browser Store. Once installed, the extension should appear on your browser toolbar (Connexity logo) Go to your ecommerce site and use the Tag Helper tool to verify installation and functionality on these specific page events:

  • Page view
  • Category view
  • Product view
  • Add to Cart
  • Conversion*

*Note: You must trigger a test conversion for this event. You should clear your cookies after completing the test purchase to prevent future orders from being associated with the test click.

How to Use The Tag Helper

The Tag Helper will identify if tags are found, installed properly, and functioning. Errors will be flagged and the tool will suggest how to address the error.

cnx-th1.jpg

(Example: Connexity Tag found and functioning for “Category view”)

 

CNX-ph2.png

(Example: Connexity tag not found on page)

 

To rerun testing, use the blue slider to turn off the Pixel Helper tool, then turn it back on again. This will reset the extension’s cache so you can properly retest a page event.

CNX-ph3.png

 

If you receive “Page loaded tab multiple times” message, ensure that the Connexity tag is only loaded once in each page. This can happen when you reload or revisit the same page again.

cnx-ph4.jpg

Related articles