Skip to main content

Integrating Google Consent Mode v2 on Shopify website using CookieYes GTM Template

Last updated on December 12, 2024

Google Consent Mode v2 enhances user privacy by ensuring that Google’s advertising cookies and associated vendor cookies are not read or written until the user consents. This is a complete guide providing step-by-step instructions on integrating Google Consent Mode v2 for your Shopify store.

Step 1: Install CookieYes

To install CookieYes App from the Shopify store:

  1. Navigate to the Shopify Admin > Apps.

    apps
  2. Click on the search bar, and search: CookieYes.
  3. Select CookieYes GDPR Cookie Banner and click the Install button.

    shopify store
  4. Click on Install app button on the oauth page.

    install app

    Once you complete these steps, you should have successfully installed CookieYes in your Shopify store.
  5. Upon successful installation, you have two alternatives:

New Account Creation:

  1. After installation, you will be taken to the Sign Up page, where you can effortlessly create a new account.
  2. After creating an account, customise your cookie banner by choosing the Banner Language, Layout and Colour that suits your website design and click the Next step button.
  3. On the setup screen, select Install with Google Tag Manager as your installation method.

    Install method

For Existing Users:

  1. Log in to CookieYes:
    Log in to your CookieYes account using your existing credentials.
  2. Remove the CookieYes Script:
    Ensure you remove the existing CookieYes script from your website.
  3. Ensure Google Consent Mode is enabled.
    By default, the Basic Consent Mode feature is enabled. If you have previously disabled it, follow these steps to turn it back on:
    • Navigate to CookieYes Dashboard > Advanced Settings.
    • In Advanced Settings, toggle the button (to the right) labelled “Support GCM“ to enable the Basic Consent Mode.

Step 2: Adding the shopify.js script

To integrate with Shopify’s Consent Settings, follow the steps below.

  1. Head to your Shopify Dashboard, select Online Store under ‘Sales Channels’ and click on Themes.

    themes
  2. Click on the three dots menu and choose Edit Code from the dropdown menu.

    edit code
  3. Under ‘Layout’ section, select {/} theme.liquid.
  4. Insert the code snippet given below immediately after the opening <head> tags.

    <script src="https://cdn-cookieyes.com/common/shopify.js"></script>

    shopify.js

Step 3: Enable Shopify Customer Privacy Settings

  1. Navigate to Settings of your Shopify Admin Dashboard.

    settings
  2. From the left sidebar, select Customer Privacy and click on Cookie Banner. Also, verify that ‘CookieYes GDPR Cookie Banner’ is listed under Installed Privacy Apps.

    Customer privacy
  3. On the Cookie Banner page, click More actions and select Use custom cookie banner.

    More actions
  4. In the Use Custom Cookie Banner modal, select the regions where you want Shopify to collect marketing and analytics data for customers, then click Confirm.

    confirm

Note

CookieYes will notify Shopify when consent is given or revoked. Shopify will collect marketing and analytics data only if consent is obtained in the specified regions.

1. Create a GTM account and set up a container.

create container

2. To Install the container on your website, paste both the GTM snippets immediately after opening your website’s <head> and <body>tags in the {/} theme.liquid section on your Shopify Dashboard.

container script

3. To add the CookieYes CMP template to your workspace,

  • First, you need to create a new tag. Click Tags from the left sidebar and then New as shown.

    Add new tag
  • Click on Tag Configuration > Discover more tag types in the Community Template Gallery and search for CookieYes CMP. Alternatively, you can get the template from this link.
  • Select the CookieYes CMP template and click Add to workspace >  Add to add it to your GTM installation.

    Add to workspace
  • Insert the CookieYes website key, set other fields to appropriate values, and save the tag after naming it.

    tag confg

For New User:

  • Head back to the CookieYes setup screen and locate the Website Key.
  • Click the Copy key button to copy the Website Key to your clipboard.
  • In the GTM account, paste the copied key into this field labelled Website Key.

    copy key

For Existing User

  • Head back to the CookieYes account.
  • Go to Advanced Settings and click Get Installation Code.

    Advanced Setting
  • In the modal, click Install with Google Tag Manager > Copy code.

    Copy code from advance settings
  • In the GTM account, paste the copied key into this field labelled Website Key.

5. To add Default Consent Setting:

  • Click Add Setting.
  • Select Enabled/Disabled from the drop down for each cookie category based on your requirements.
  • Set the Region by entering the region’s ISO-standardised (ISO 3166-2) codes for the specific regions you intend to Geo-target with your banner. However, if you prefer not to geo-target your banner to specific regions around the globe, simply enter All in the Regions field. Refer to the ISO 3166-2 standard for the appropriate region codes.
  • Click Add.

    gcm

5. Select Consent Initialization – All Pages as the trigger for the tag.

consent

trigger

6. Click Save to complete the integration of CookieYes with the Google Consent Mode.

save tag

CookieYes is now integrated with Google Consent Mode, displaying the cookie banner on your Shopify website.

Step 5: Verify Integration

To verify GCM integration on your website,

  1. Navigate to Advanced Settings in the CookieYes Dashboard.
  2. Click the Check Now button against the Check GCM status. If the configuration is correct, you will see a success message stating, ‘No error detected’. If you encounter any errors after running this check, refer to our GCM Troubleshooting Guide to resolve them and check again.

To further confirm the setup is correct, follow the steps in our Verification Documentation.

Should you encounter any issues, our dedicated GCM support team are here to assist you.

Setting Advanced Consent Mode in GCM

To set Advance Consent Mode, follow the below set:

  1. Navigate to CookieYes Dashboard > Advanced Settings.
  2. To set up Advanced Consent Mode in GCM, toggle the button (to the right) labelled “Allow Google tags to fire before consent”.

  3. Now, go back to your GTM account, click Submit, and then Publish to reflect the change on your website.

Enabling only the Support GCM option implements basic functionality, firing only allowed tags based on user consent. When you also activate Allow Google tags to fire before consent, it ensures Google tags fire even before the user consents to the banner, but they operate without setting cookies until the user provides consent. This balance allows for some data collection while respecting user privacy choices.

Help Guide

For detailed information on the Basic and Advanced Consent Mode v2 in CookieYes, refer to the Basic vs Advanced Consent Mode v2 documentation.

Conclusion

By following these steps, you will have integrated Google Consent Mode with your Shopify website using CookieYes CMP. You can complete your website scanning from the CookieYes Dashboard and explore further customizations and features.

Have more questions?

Reach out to us and we'll answer them.

Contact us