Overview

Follow this guide to learn how to set up Shopify's Consent Banner with Elevar's Google Consent Mode.

🚧

NOTE: This guide is only meant to be followed for Shopify pages. It won’t work on third-party pages (including headless sites).

Enable Shopify Cookie Banner

Access Shopify Settings:

• Begin on your Shopify account and use the left-hand navigation menu to click on the "Settings" button located in the bottom left-hand corner of the page.
  • (See Figure 1)

_Figure 1_

Access Cookie Banner:

• Once in your Shopify settings, use the left-hand navigation menu to locate and click on the "Customer privacy" tab.
• Navigate to the section of the page titled "Privacy settings" and click on the "Cookie banner" tab.
  • (See Figure 2)

_Figure 2_

Customize and Save Cookie Banner:

• Once you have accessed the cookie banner settings, you can customize and configure your Shopify Cookie Banner.
• After you have selected all of the required information, ensure that you click on the "Save" button located at the top of the page.
  • (See Figure 3)

_Figure 3_

Download Shopify Consent Container

Download the Customer Privacy API Google Tag Manager Container:

• Download the following container: Shopify Customer Privacy API GTM Container
• This file includes:
  • The tag template and tag responsible for pulling consent values from Shopify’s Customer Privacy API and pushing it to Google Consent Mode.
  • The Shopify CMP - Update Listener tag responsible for updating the consent values when the user interacts with the banner. The reason why this is managed by a separate tag is because GTM’s custom template API does not allow us to add an event listener to the DOM file.

Import the Customer Privacy API Container into Google Tag Manager

Import Container:

• Log in to your Google Tag Manager Account.
• Select your GTM Web Container.
• Click on the "Admin" button located in the upper menu bar.
• Use the right-hand menu under the "Container" section and click on the tab labeled "Import Container".
  • (See Figure 4)

_Figure 4_

Import Container Information:

• Under the "Select file to import" section, click on the "Select File" button and choose the CustomerPrivacyAPI-GTM container that was previously downloaded.
• Under the "Choose workplace" section, either create a new workplace titled "CustomerPrivacyAPI-GTM Tracking" or select your "Default Workspace".
• Next be sure to select the "Merge" option first, then the "Overwrite conflicting tags, triggers, and variables" option second.
• Once you have completed filling out the necessary details for this container, click on the "Confirm" button located at the bottom of the page.
  • (See Figure 5)

_Figure 5_