🎛️How to Integrate Google Consent Mode V2 on Your Shopify Checkout Page

This guide explains how to integrate Google Consent Mode V2 on your Shopify checkout page, specifically to trigger the consent signal only if the customer has previously accepted your cookie banner on earlier pages (e.g., homepage, product pages, etc.).

🔧 Steps to Implement

1. Log in to your Shopify Admin Go to: https://admin.shopify.com

2. Navigate to Settings In the lower-left corner of your admin panel, click Settings.

3. Go to Customer Events In the Settings menu, click on Customer events.

4. Open the Custom Pixels tab At the top of the page, switch to the Custom pixels tab.

5. Add a new custom pixel

   • Click the “Add custom pixel” button.

   • Give your pixel a name (e.g., Consentik - Google Consent Mode V2).

   
6. Replace the default code

   • Remove all existing code in the Code editor.

   • Paste the following code snippet instead:

analytics.subscribe("page_viewed", function (event) {
 window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
if(/.+\/checkouts?\/.*/.test(window.location.href)) {
  let timeout = 0
  const checkoutInterval = setInterval( async () => {
    timeout += 100
    if(typeof gtag != 'undefined') {
    
      //default consent 
      gtag("consent", "default", {
        ad_user_data: "denied",
        ad_personalization: "denied",
        ad_storage: "denied",
        analytics_storage: "denied",
        functionality_storage: "denied",
        personalization_storage: "denied",
        security_storage: "denied",
        wait_for_update: 500
      });
      
      // cosent update 
      await updateGtagConsentFromCookie();
      clearInterval(checkoutInterval)
    }
    else if(timeout >= 3000) {
      clearInterval(checkoutInterval)
    }
  },100)
  

  // Google tag magner code will come here
  // Checkout event will go here eg: add_payment_info, add_shipping_info, purchase
}



async function getCookieValue(name) {
  return await browser.cookie.get(name)
}

async function parseConsentikCookie() {
  const raw = await getCookieValue('_consentik_gcm');
  if (!raw) return null;
  try {
    // Cookie might be encoded (like %5B...%5D), so decode first
    return JSON.parse(decodeURIComponent(raw));
  } catch (e) {
      console.error('Invalid _consentik_gcm JSON', e);
    return null;
  }
}

async function updateGtagConsentFromCookie() {
  const parsed = await parseConsentikCookie();
  if (!parsed || !Array.isArray(parsed)) return;

  const selected = parsed || [];

  const has = (category) => selected.includes(category);
  gtag("consent", "update", {
    ad_user_data: has('advertising') ? 'granted' : 'denied',
    ad_personalization: has('advertising') ? 'granted' : 'denied',
    ad_storage: has('advertising') ? 'granted' : 'denied',
    analytics_storage: has('analytics') ? 'granted' : 'denied',
    functionality_storage: has('functional') ? 'granted' : 'denied',
    personalization_storage: has('functional') ? 'granted' : 'denied',
    security_storage: 'granted' // typically always granted
  });
  console.log({dataLayer})
}
    });

1. Click Save Once you’ve pasted the code, click Save to apply the changes.

✅ You’re Done!

Google Consent Mode V2 will now properly trigger on the checkout page only if the user has previously accepted cookies.