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 Google Consent Mode for Shopify Customer Privacy API Container

🚧

(Optional): Download Shopify Customer Privacy API Container Directly

If you would perfer to download the container directly, click on this link!

First, you will need to select your website. Then, you will have access to the Shopify Customer Privacy API Container to download.

Locate Google Consent Mode for Shopify Customer Privacy API Container:

• Begin on the homepage of your Elevar app. Use the left-hand navigation menu and click on the tab titled "Pre-Build Tags".
• Use the search function to locate and click on the "Google Consent Mode for Shopify Customer Privacy API" Container.
  • (See Figure 4)

_Figure 4_

Download the Google Consent Mode for Shopify Customer Privacy API Container:

• Once in the Google Consent Mode for Shopify Customer Privacy API Container, navigate to the box titled "Download Container".
• Click on the button labeled "Download 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. This container also includes the the Shopify CMP which has the Update Listener tag that is 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.
    • (See Figure 5)

_Figure 5_

Import the Google Consent Mode for Shopify Customer Privacy API Container

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 6)

_Figure 6_

Import Container Information:

• Under the "Select file to import" section, click on the "Select File" button and choose the container that was previously downloaded.
• Under the "Choose workplace" section, either create a new workplace titled "Shopify Customer Privacy API 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 7)

_Figure 7_