Implement Google Consent Mode V2 on Shopify - Solution

Implement Google Consent Mode V2 on Shopify - Solution

AlexF_
Shopify Partner
17 0 21

Hi,

 

It seems that everyone is having a hard time figuring out how to implement Google Consent Mode V2 on their Shopify, without the help of a 3rd party app. It's a shame this feature is not native, given that it impacts the conversion data if it is not implemented.

I came up with the code below that I now run on all my stores, it only requires Shopify's native banner app to work. It does the job perfectly and passes Google check : https://support.google.com/tagmanager/answer/14218557?hl=en

This snippet should be pasted as is in the <head> tag of your /layout/theme.liquid and layout/password.liquid files.

What it does : 

  • set the default consent state as "denied" everywhere, except in the US where it is granted
  • listen to the click on Shopify's cookie banner buttons and update the state accordingly

Feel free to let me know how it can be improved.

<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}

    const defaultConsentState = '{{ localization.country.iso_code }}' === 'US' ? 'granted' : 'denied';
    gtag('consent', 'default', {
        'ad_storage': defaultConsentState,
        'analytics_storage': defaultConsentState,
        'ad_user_data': defaultConsentState,
        'ad_personalization': defaultConsentState
    });

    (function loadConsentMode() {
        addEventListener("DOMContentLoaded", () => {
            document.body.addEventListener('click', (e) => {
                const acceptButtonId = 'shopify-pc__banner__btn-accept';
                const declineButtonId = 'shopify-pc__banner__btn-decline';
                if(![acceptButtonId, declineButtonId].includes(e.target.id))
                    return;

                const newState = e.target.id === acceptButtonId ? 'granted' : 'denied';
                gtag('consent', 'update', {
                    'ad_user_data': newState,
                    'ad_personalization': newState,
                    'ad_storage': newState,
                    'analytics_storage': newState
                });
            })
        });
    })();
</script>

 

Replies 6 (6)

Pandectes
Shopify Partner
86 1 23

Hello @AlexF_ ,

 

This is a great effort, but there are some important considerations to keep in mind:

 

1️⃣Different privacy laws require different consent handling, and applying a strict policy everywhere except the US may not be accurate in practice.
2️⃣ The snippet doesn’t account for users who have already given consent or those who may want to change their preferences later.
3️⃣ It won’t work seamlessly with Google Tag Manager (GTM) setups.
4️⃣Server-side tracking is not supported, which can impact data collection and attribution.
5️⃣ Relying on custom code means it may not stay up to date with Shopify’s default banner changes.
6️⃣ GDPR compliance is much more than just enabling Google Consent Mode – a stable and comprehensive solution ensures proper GA tracking, effective conversions, and long-term compliance.

 

Having a structured approach helps businesses stay compliant while optimizing data-driven decisions. 🚀

Please let me know if it works by giving it a like or marking it as a solution!
Pandectes GDPR Compliance - #1 GDPR app for Shopify merchants.
Pandectes - 100% Free Cookie Scanner.
Free plan available. Live Chat Support is available 24/7.
AlexF_
Shopify Partner
17 0 21

Hi,

 

I agree with everything you wrote ! But here are my answers : 

  1. Very true, I set up this code coming from the EU, and only knowing that data collection enabled by default was okay in the US. So this setup is more or less fine for the US and EU, but is definitely not optimized for shops with a greater international reach and a lot of orders outside of these two zones.
  2. Agreed as well, it relies on Shopify's banner cookie expiration to ask again later. In my opinion this is fine as I believe the majority of users won't change their mind about the choice they made regarding data collection. However I can see how it could be a problem for unintentional clicks.
  3. This is a great point that I will actually add to the original post. (edit: **bleep**, cannot edit the original post)
  4. Fair enough, but this is not a regression regarding Shopify's default behavior, without 3rd party app ?
  5. From experience, Shopify's native elements injected directly on the stores' frontend tend to be relatively stable. However I agree with you on the principle.
  6.  Agreed, but making the website fully compliant with GDPR was not the goal of this snippet.

Just to be clear, this code does not intend to replace the services provided by the apps such as yours (which is pretty good from what I heard), this is obvious. However, Shopify's relying on 3rd party apps for basic, even required functionalities is very problematic, and is a pain for small merchants who are just starting their online business and don't want to put tens or hundreds of bucks each month towards features that should already be part of the platform. I believe this snippet is fine for small merchants making their money in the US or in the EU and who just want to comply with Google requirements ; for anything more, they'll probably be happy paying for your services.

TimS95
Visitor
2 0 1

Hey there,

 

i was looking for something like this for weeks now. Do you know if this Code also works with Shopify Pixel / Customer Events Section (for example: I'm running Google Ads Tracking as a Customer Event and the user needs to click Accept on the Shopify Cookie Banner)? And if so, do I still need to paste the Code in the theme.liquid file or do I have to paste it in the alredy existing code in the Customer Events section?

 

AlexF_
Shopify Partner
17 0 21

Hi,

 

If your GA is setup through a custom pixel and not through the "Google & Youtube" sales channel/app, the code should certainly be placed in the custom pixel as well. Shopify allows to track clicks on elements through their own events : https://shopify.dev/docs/api/web-pixels-api/dom-events/clicked

They also provide events for consent that should probably be favored to implement this, but they do not explicitly state that the consent change is triggered through Shopify's native banner, some testing would be required.

However, there's a problem regarding the setup of default consent state, as it seems that the country the customer is currently navigating on is not obtainable inside the Custom pixel sandbox.

Pandectes
Shopify Partner
86 1 23

An alternative, with a way to manage consent states within Shopify, is our app, Pandectes GDPR Compliance, which integrates with Shopify's Custom Pixel, allowing merchants to respect user consent while ensuring accurate data collection.

 

We've also published a detailed guide on how to use Pandectes Consent Event with Shopify Custom Pixel here:
🔗 Use Pandectes Consent Event with Shopify Custom Pixel

 

This integration helps Shopify merchants seamlessly update tracking scripts based on user consent preferences, ensuring compliance with GDPR, Google Consent Mode, and other regulations. 

 

Let me know if you have any questions!

Please let me know if it works by giving it a like or marking it as a solution!
Pandectes GDPR Compliance - #1 GDPR app for Shopify merchants.
Pandectes - 100% Free Cookie Scanner.
Free plan available. Live Chat Support is available 24/7.
karolk95
Tourist
12 0 1

@TimS95 hey Tim, you may want to give this comprehensive tutorial a read on how to handle consent with the custom pixel & customer events:

https://karolkrajcir.com/post/ga4-consent-based-conversion-tracking-on-shopify-with-custom-pixels-co... Let me know if you have any questions - I'd be happy to help!