While AdRoll offers our customers our own cookie consent banner we recognize that third party consent managers are becoming increasingly popular, especially for websites seeking a centralized tool to manage multiple cookies, and so we’ve published several guides explaining how to connect AdRoll to third-party cookie consent tools. However, none of those guides covered how to use a third-party consent tool with a NextRoll cookie that is placed via one of our ecommerce platform integrations and so we have written this guide to explain just that.
This guide explains how to use CookiePro by OneTrust on Shopify and WooCommerce stores leveraging the AdRoll integration. While each cookie consent tool is different and may require slightly different steps, this guide should provide the background necessary to complete the process unique to your consent tool.
The AdRoll Pixel
The AdRoll pixel is a JavaScript code snippet that you place on every page of your site to track your website visitors in AdRoll. For manual installations where you copy-paste the script onto your website it’s quite simple and contains two important variables: adroll_adv_id and adroll_pix_id. These define your account and pixel unique identifiers.
When the AdRoll pixel is placed on your website via one of our ecommerce integrations the script is automatically enhanced with extra parameters that allow AdRoll to track advanced interactions like which specific products were viewed to power Dynamic Ads, when a product was added to a cart, the value of the cart, the actual value of an individual sale, and much more. The ease of implementation and advanced measurement features are why most of our customers built on ecommerce platforms opt to use our integrations instead of placing the pixel manually.
Shopify Integration
When using the AdRoll integration for Shopify, the AdRoll pixel is injected using the Shopify ScriptTag API.
Scripts added via ScriptTags are added to the array shown above, and end up being asynchronously loaded in the pages headers.
If we take a look into the https://assets1.adroll.com/shopify/latest/j/shopify_rolling_bootstrap_v2.js script we can see that it provides the same structure as the other pixels provided by integrations, with the addition that it can be loaded as a tag with parameters.
WooCommerce Integration
This is how the injected pixel appears on a WooCommerce store when using the AdRoll integration for WooCommerce.
Delaying the pixel execution with CookiePro
Now that we have established what the AdRoll pixel is and how it is placed on your ecommerce store, let’s learn how to delay the pixel from firing until your visitor has granted consent in your third-party consent management tool. As noted in the introduction these steps will vary according to the tool that you are using. For this guide we are using CookiePro by OneTrust.
When choosing a tool it’s important to pick one that allows for some level of customization, letting you specify what actions to take as soon as the user allows cookies to be deployed.
CookiePro with Shopify
Per CookiePro documentation (Client-Side Cookie Management) and (Cookie Consent Public APIs), the correct way to specify these actions is by calling OneTrust.insertScript() helper function from inside the provided wrapper, so we can define code that is going to be imported only after the user consents to the cookie.
In this case we need to go back to where we set up CookiePro script first, and add this script underneath:
OneTrust.InsertScript('https://assets1.adroll.com/shopify/latest/j/shopify_rolling_bootstrap_v2.js?adroll_adv_id=ADVERTISABLE&adroll_pix_id=PIXEL&shop=yourstore.myshopify.com', 'head', null, null, '2'); |
Please notice that you need to replace ADVERTISABLE and PIXEL with your advertisable and pixel unique identifiers, also, notice that '2' refers to the cookie type defined in CookiePro dashboard.
The pixel script is now going to run as soon as the user offers her consent to cookies, this means that the way we used to run before, via the injection, is no longer necessary, so using shopify ScriptTag API, we must delete the old script:
Go into https://yourstore.myshopify.com/admin/api/2020-07/script_tags.json and see if the script is there:
You can see it there with the tag id 116368375857. In order to remove the script without removing the Shopify Integration, please make the request to AdRoll via your Account Manager or AdRoll Customer Support.
CookiePro with WooCommerce
For other integrations that do not use script importing like WooCommerce, CookiePro offers an even simpler way of handling the execution of scripts per consent. Let's see how this is done in WooCommerce.
Go into the plugin editor, and head into pixel.php of AdRolls plugin:
Here, find the line:
<script type="text/javascript" data-adroll="woocommerce-adroll-pixel"> |
and replace it with:
<script type="text/plain" data-adroll="woocommerce-adroll-pixel" class="optanon-category-C0002-C0003-C0004"> |
In this example C0002-C0003-C0004 refer to the cookie categories in CookiePro, so when cookie categories 2, 3 and 4 are allowed, this means that this script is supposed to run.
Finally, save your change by clicking Update File button.
Final Step: Changing the AdRoll consent method
After everything is done and working, the final step is to disable AdRolls cookie consent banner so that it does not interfere with your third-party tool. If you don’t do this the visitor will see two consent banners and be confused.
Go to: https://app.adroll.com/settings/gdpr and select the center option, Use a Custom Banner, and save your selection.
This will trigger a review process to ensure that your third-party cookie consent banner is functioning properly so it’s important that you change your AdRoll consent method setting only after your third-party consent tool is properly functioning.
Reverting back to the AdRoll Consent Banner
If you wish to return to using the free cookie consent banner provided by AdRoll, just undo the changes described above and you’ll be all set.