# 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`).

   <figure><img src="https://867177989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpXyFBfh7hfzrY5z7HQRN%2Fuploads%2FZmdg2gai54Kp8bwbvJBR%2Fimage.png?alt=media&#x26;token=f5b3b5a1-2910-482c-98d3-2bd9d874ffc8" alt=""><figcaption></figcaption></figure>
6. **Replace the default code**
   * Remove all existing code in the **Code editor**.
   * Paste the following code snippet instead:

```javascript
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})
}
    });

```

7. **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.