> For the complete documentation index, see [llms.txt](https://docs.consentik.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.consentik.com/integrations/how-to-integrate-google-consent-mode-v2-on-your-shopify-checkout-page.md).

# 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="/files/itppv9iXNu25Hcx047E0" 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.consentik.com/integrations/how-to-integrate-google-consent-mode-v2-on-your-shopify-checkout-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.