Category: Tutorial

  • How to Automate Privacy Compliance Testing with the FitConsent CLI Validator

    Validating Google Consent Mode V2, Shopify’s Customer Privacy API, and Google Tag Manager (GTM) setups manually using browser DevTools is tedious and prone to human error. If a deployment accidentally breaks your consent architecture, you risk severe GDPR fines and data loss. Here is how to automate the entire audit process directly from your terminal or CI/CD pipeline using FitConsent’s open-source CLI tool.

    FitConsent has released an open-source command-line interface (CLI) tool: @fitconsent/consent-mode-validator. Instead of clicking through banners and reading console variables manually, this tool uses headless browser automation to scan your target URL, interact with your site, and generate a strict pass/fail compliance report.

    In this tutorial, we will cover how to install the validator, run audits from your local terminal, and integrate it into your automated deployment pipelines.

    What the Validator Actually Checks

    The FitConsent CLI doesn’t just look for the presence of a banner. It aggressively audits the underlying APIs and data layers to ensure true technical compliance:

    • Google Consent Mode V2: Verifies that core signals (ad_user_data, ad_personalization, ad_storage, and analytics_storage) default to denied and update correctly. It also decodes and validates Google’s internal GCS and GCD status strings.
    • Shopify Customer Privacy API: Validates the platform-native window.Shopify.customerPrivacy object, ensuring Web Pixels are correctly gated.
    • GTM dataLayer: Checks that the consent initialization events are fired in the correct chronological order before any tracking tags execute.

    Step 1: Installation and Local Testing

    Because the tool is published to the npm registry, you can run it instantly without permanently installing it globally, or you can add it to your project dependencies. You will need Node.js installed on your machine.

    To run a single, immediate scan against your website using npx, open your terminal and run:

    npx @fitconsent/consent-mode-validator audit https://yourwebsite.com

    Alternatively, to install it globally:

    npm install -g @fitconsent/consent-mode-validator

    Once installed globally, you can initiate a scan simply by using the base command:

    consent-mode-validator audit https://yourwebsite.com

    The CLI will boot a headless Chromium instance, navigate to your URL, observe the pre-consent state, and output a detailed pass/fail matrix directly in your terminal.

    Step 2: Testing Specific Frameworks (Shopify vs. Generic GTM)

    By default, the tool performs a standard Google Consent Mode audit. However, if you are running a Shopify store, testing Google Consent Mode alone is insufficient. You must also verify Shopify’s native API.

    You can pass the --framework shopify flag to instruct the headless browser to look for the Shopify core objects:

    npx @fitconsent/consent-mode-validator audit https://your-shopify-store.com --framework shopify

    If the validator detects that window.Shopify.customerPrivacy.analyticsProcessingAllowed() is returning true before the banner is clicked under a GDPR context, the audit will fail and alert you immediately.

    Step 3: Automating Audits in Your CI/CD Pipeline (GitHub Actions)

    The true power of a CLI tool is automation. By integrating this validator into your continuous integration (CI) pipeline, you can prevent developers from merging code that breaks your site’s privacy compliance.

    Because the CLI returns a standard non-zero exit code (exit 1) when an audit fails, it will automatically block deployments in modern CI systems. Here is an example of how to implement it using a GitHub Actions workflow.

    Create a file in your repository at .github/workflows/privacy-audit.yml and paste the following configuration:

    name: Privacy Compliance Audit
    on: [push, pull_request]
    
    jobs:
      consent_validation:
        runs-on: ubuntu-latest
        steps:
          - name: Checkout Code
            uses: actions/checkout@v3
    
          - name: Setup Node.js
            uses: actions/setup-node@v3
            with:
              node-version: '18'
    
          - name: Run FitConsent CLI Validator
            # Replace the URL with your staging or production environment
            run: npx @fitconsent/consent-mode-validator audit https://staging.yourwebsite.com --framework shopify
    

    With this workflow active, every time a developer pushes a new commit, GitHub Actions will spin up an Ubuntu container and run the FitConsent validator against your staging site. If a recent code change accidentally removed the Google Tag Manager container or broke the banner logic, the pull request will fail, preventing the bug from reaching production.

    Open-Source and Developer-Ready

    Privacy compliance should not be a black box. By open-sourcing the validator, the FitConsent team allows developers to see exactly how consent signals are measured and enforced.

    Stop guessing if your consent banner works. Add the validator to your terminal toolkit today and secure your tracking architecture with certainty.

  • Shopify Customer Privacy API: GDPR & CCPA Compliance Audit with FitConsent

    Is Your Cookie Banner Actually Blocking Pixels?

    When Shopify merchants install a consent banner, they often assume their compliance job is done. But there is a critical technical layer most CMPs miss, leaving store owners exposed. Here is how to ensure your consent signals actually control Shopify’s native data processing.

    Many cookie banners are purely cosmetic. They might inject Google Tag Manager signals, but they fail to integrate with Shopify’s platform-native interface: the Customer Privacy API. If your CMP doesn’t integrate here, Shopify’s Web Pixels and analytics may still fire without permission, regardless of what the user clicks on your banner.

    In this technical audit, we verify live in-browser how FitConsent integrates directly at the API layer to guarantee full GDPR and CCPA/CPRA compliance. You can read our full technical breakdown at the Shopify Customer Privacy API Audit page, or watch the live DevTools demonstration below.

    Watch the Live Technical Audit

    The Core Problem: window.Shopify.customerPrivacy

    Shopify injects a native object into every storefront located at window.Shopify.customerPrivacy. This object strictly gates four core processing purposes: analytics, marketing, sale of data, and preferences.

    Any app claiming Shopify compliance must call setTrackingConsent() on this exact object when a visitor makes their choice. FitConsent closes this gap by making direct, platform-level calls. Let’s look at how this behaves under different global frameworks.

    GDPR Compliance: The Opt-In Model

    Under GDPR, no tracking can occur before explicit consent is granted. FitConsent enforces a strict Pre-Consent State.

    • Before Interaction: If you open your DevTools console upon page load and query the API, you will see that analyticsProcessingAllowed(), marketingAllowed(), and saleOfDataAllowed() all return false. Shopify’s Web Pixels are completely blocked.
    • After Consent: When a visitor clicks “Accept” on the FitConsent banner, the app instantly translates those granular choices into a setTrackingConsent() call. The API state immediately updates to true, and tracking is unblocked safely.

    CCPA / CPRA Compliance: The Opt-Out Model

    California’s CPRA operates completely differently. Tracking and data sharing are permitted the moment a visitor arrives. The banner acts as a “Notice at Collection” with a clear path to opt out.

    FitConsent automates several critical, often-overlooked CPRA requirements directly through the Shopify API:

    • Do Not Sell or Share: Installing a Meta or TikTok Pixel now constitutes “sharing” under CPRA. When a user clicks your “Do Not Sell or Share My Personal Information” link, FitConsent fires a surgical update to Shopify, setting only the sale of data to false while keeping analytics intact.
    • Global Privacy Control (GPC): CPRA mandates that stores honor GPC browser signals (like those broadcast by Brave or DuckDuckGo). FitConsent auto-detects GPC and blocks the sale of data before the first pixel has a chance to fire—skipping the banner entirely.
    • CPRA Minor Age Gate: Visitors under 16 require active opt-in consent in California. FitConsent automates this workflow: users 16+ follow the standard opt-out flow, users 13-15 must explicitly accept, and users under 13 have all tracking blocked for the session.

    Platform-Level Enforcement, Not Just Workarounds

    Whether firing Google Consent Mode V2 signals in sync with opt-outs, or locking down Shopify’s native Web Pixels, FitConsent provides a first-class integration directly at the API source.

    Don’t leave your store’s compliance to chance with cosmetic banners. Get the full technical breakdown at the FitConsent Compliance Academy, or install the FitConsent app directly from the Shopify App Store to secure your storefront today.

    Tutorial: Auditing the Shopify Customer Privacy API with FitConsent

    In this technical tutorial, we will use Google Chrome Developer Tools to audit exactly how FitConsent integrates with this API under both GDPR (Opt-In) and CCPA/CPRA (Opt-Out) frameworks.

    Prerequisites for This Tutorial

    • Browser: Google Chrome (for Developer Tools).
    • Test Environment: We will be using the official FitConsent demo store. Navigate to fitconsent-2.myshopify.com (Password: fitconsent).
    • Understanding the API: The API lives globally at window.Shopify.customerPrivacy and gates four processing purposes: analytics, marketing, sale of data, and preferences.

    Phase 1: App Configuration in Shopify Admin

    Before testing the storefront, it is important to understand how FitConsent is configured in the backend.

    1. Inside the Shopify Admin, open the FitConsent app and navigate to General Settings.
    2. Locate the Legislative Framework selector. This is the master control:
    3. GDPR: Activates Opt-In mode (all purposes blocked by default).
    4. CCPA: Activates Opt-Out mode (tracking permitted by default).
    5. Auto: Dynamically applies the correct framework based on visitor IP.

    Phase 2: Live Audit — GDPR Opt-In Framework

    Under GDPR, data collection must not begin until consent is actively given. Let’s verify that FitConsent enforces this before the user interacts with the banner.

    1. Open the demo store in an Incognito window. You will see the FitConsent banner at the bottom of the screen. Do not click anything yet.
    2. Right-click anywhere on the page, click Inspect, and navigate to the Console tab.
    3. Type the following commands into the console one by one and press Enter:
    window.Shopify.customerPrivacy.analyticsProcessingAllowed()
    window.Shopify.customerPrivacy.marketingAllowed()
    window.Shopify.customerPrivacy.saleOfDataAllowed()
    window.Shopify.customerPrivacy.preferencesProcessingAllowed()

    Result: All four commands will return false. Shopify’s Web Pixels are securely locked down.

    Now, let’s simulate a user granting partial consent:

    1. On the visual banner, click to manage preferences. Accept Analytics, Marketing, and Sale of Data, but explicitly leave Preferences turned off. Click Save.
    2. Run the exact same console commands again.

    Result: FitConsent immediately fired setTrackingConsent(). Analytics, marketing, and sale of data will now return true, while preferences remains false. This confirms granular, platform-level enforcement.

    Phase 3: Live Audit — CCPA & CPRA Opt-Out Framework

    California operates on an Opt-Out model. Tracking and data sharing are permitted the moment a visitor arrives. Let’s verify how FitConsent handles CCPA.

    1. Clear your cookies or open a new Incognito window, simulating a California visitor (the demo store is set to Auto).
    2. The banner appears as a “Notice at Collection.” Before clicking anything, query the console:
    window.Shopify.customerPrivacy.saleOfDataAllowed()

    Result: It returns true. Tracking is active by default, as required by law.

    Now, we test the surgical opt-out:

    1. Click the Do Not Sell or Share My Personal Information link on the storefront.
    2. The preference center opens with the Sale of Data toggle already pre-set to off. Confirm your choices.
    3. Query the console again.

    Result: saleOfDataAllowed() now returns false. However, if you check analyticsProcessingAllowed(), it remains true. FitConsent successfully executed a surgical opt-out—blocking the sale and sharing of data without destroying your internal website analytics.

    Advanced CPRA Features: GPC and Minor Age Gates

    A true compliance integration handles the edge cases automatically. FitConsent manages two critical CPRA requirements in the background:

    • Global Privacy Control (GPC): Browsers like Brave and DuckDuckGo broadcast a GPC signal. When FitConsent detects this, it automatically overrides the CCPA default and sets saleOfDataAllowed() to false before the first script loads. The banner is bypassed entirely, honoring the user’s browser-level choice instantly.
    • CPRA Minor Age Gate: Visitors under 16 require an Opt-In workflow, not an Opt-Out. FitConsent automates this: users 16 or older follow the standard flow, 13-15 year-olds must actively Accept, and users under 13 are completely blocked from tracking.

    Conclusion: True Platform Integration

    This audit proves that whether enforcing a GDPR Opt-In or a CCPA Opt-Out, FitConsent utilizes a direct setTrackingConsent() call into Shopify’s core API. It is not a workaround or a GTM patch—it is a first-class integration that gates your Web Pixels at the source.

    Ready to secure your storefront? Read our full compliance guides at the FitConsent Academy, or install the app directly from the Shopify App Store.

  • WordPress Tutorial: How to Automating Privacy Compliance via the WP Consent API

    WordPress Consent API Audit: FitConsent CMP Passes All Checks

    On WordPress, displaying a visual cookie banner is only half the battle. To be truly compliant, every background plugin that collects user data needs to listen to and respect the visitor\’s choices. Learn how the WP Consent API handles this communication seamlessly.

    Historically, plugins on a single site interpreted consent independently or ignored it altogether. To solve this gap, the WordPress community introduced the WP Consent API—a standardized communication protocol that acts as a universal bridge between your Consent Management Platform (CMP) and your data-collecting plugins.

    When you run an audited solution like FitConsent, user choices are automatically mapped directly to the five standard WordPress consent categories: functional, statistics-anonymous, statistics, preferences, and marketing. Let\’s walk through the full configuration and verification workflow as detailed in our official WP Consent API Compliance Audit.

    Watch the Live Walkthrough Audit

    Step 1: Install and Connect the FitConsent Plugin

    FitConsent includes native, automatic support for the WP Consent API without requiring manual code hooks or extra backend development.

    1. Log in to your WordPress dashboard, navigate to Plugins > Add New Plugin.
    2. Search for FitConsent CMP, click Install Now, and then Activate.
    3. Open your FitConsent platform dashboard, navigate to your website settings, and copy your unique Website ID.
    4. Back in WordPress, go to Settings > FitConsent, paste your Website ID into the designated field, and hit Save Changes.

    Step 2: Align Google Site Kit with the WP Consent API

    Google Site Kit handles Consent Mode in WordPress by linking directly into the WP Consent API layer. When a visitor updates their preferences on the banner, the API passes that data directly down to Site Kit.

    1. In your WordPress sidebar, click on Site Kit > Settings.
    2. Locate the Consent Mode section.
    3. Ensure the toggle is enabled. This ensures Google Analytics and Ads automatically hold back or execute data collection based on the API signals.

    Step 3: Test and Validate Your Compliance Live

    To verify that the integration is working as intended under strict opt-in frameworks like GDPR, you can audit the API via your browser\’s developer console.

    Checking the Initial Denied State:
    Open your website in a fresh incognito window. Before interacting with the cookie banner, right-click anywhere and choose Inspect, then open the Console tab. Run the core checking function:

    wp_has_consent('statistics')

    The console will return false. This confirms that data collection is effectively locked out out-of-the-box. You can also run our built-in diagnostic framework shortcut to see all statuses grouped together:

    window.fitconsent_test_consent()

    This will output a clean report confirming that Statistics, Marketing, and Functional parameters are completely set to denied.

    Checking the Updated Granted State:
    Now, click Accept All on your active visual banner. Run the check again in your console:

    wp_has_consent('statistics')

    The console will immediately shift and return true. FitConsent fires a structural update through the WP Consent API layer the exact millisecond the user interacts with the user interface, immediately releasing Google Site Kit to track the session compliantly.

    A Proven Core for Your Client Projects

    If you are a web designer or developer building technical stacks for clients, ensuring cross-plugin harmony is critical to preventing regulatory infractions. This native handshake eliminates the need for complex, manual tag mapping or custom Javascript event triggers.

    To review the complete technical dataset and logs from our validation test, head over to the official WordPress Consent API Audit Report. Ready to deploy automated compliance on your staging environment? Get started with FitConsent today.

    Soufiane
    Founder, FitConsent

  • Tutorial: Implementing Google Consent Mode V2 via Direct Embed with FitConsent

    Managing Google Consent Mode V2 manually can be highly error-prone. In this tutorial, we will walk through how FitConsent automates the technical handshake—from dashboard configuration to live validation in your browser.

    Google offers two implementation modes for Consent Mode V2: Basic Mode (which blocks tags entirely until consent is given, losing attribution data) and Advanced Mode. Google recommends Advanced Mode because it uses cookieless pings to recover up to 70% of lost attribution data for unconsented users.

    To use Advanced Mode, you must inject consent defaults into the dataLayer before any tag fires and include a registered Google CMP Partner ID. Here is exactly how FitConsent handles this for you.

    Watch the Video Guide

    Step 1: Dashboard Configuration

    Let’s start by configuring the consent banner in your FitConsent dashboard to ensure it outputs the correct Advanced Mode signals.

    1. Add Your Website: In the FitConsent dashboard, click Add Website in the top right and enter your domain. Once created, click Configure Website.
    2. General Settings: Enter your GA4 Measurement ID to link FitConsent to your Google Analytics property. Set the Legislative Framework to Auto so FitConsent can dynamically apply the correct legal framework based on the visitor’s location.
    3. Enable Advanced Mode: This is the most critical step. Toggle Google Consent Mode V2 to Advanced. This instructs FitConsent to inject our Google Partner ID into every consent call, certifying your site as CMP-compliant.
    4. Customize Appearance & Behavior: Navigate through the Appearance, Content, and Behavior tabs to adjust colors, text, translations, and button layouts (like enabling/disabling the Decline button based on your region’s requirements).

    Step 2: Integrating the Direct Embed Code

    With the dashboard configured, it is time to add the code to your website. Navigate to the Integration tab and select Code and Integration > Direct Embed.

    The code provided here must be pasted into the <head> section of every page, before any other scripts (like Google Analytics or Google Ads).

    How the code works: The first block immediately sets all four Consent Mode signals (ad_storage, ad_user_data, ad_personalization, and analytics_storage) to denied. It also passes developer_id: true, which registers FitConsent as the active CMP before any user interaction occurs.

    Below the default script, you will load your tracking tags, followed by the asynchronous FitConsent banner script which handles the user’s choice and fires the update calls.

    Step 3: Live Validation in the Browser

    You can verify that FitConsent is working perfectly using your browser’s developer tools.

    1. Open your website and right-click to Inspect the page. Navigate to the Console tab.
    2. Type dataLayer.filter(e => e[0] === 'consent') and press Enter. This isolates the consent-related events.
    3. Inspect the Default Call: Expand the first entry (Index 0). You will see the arguments consent and default, with all four signals set to denied and the developer_id present. Notice the gtm.uniqueEventId is 1—confirming it fired first.
    4. Interact with the Banner: Click Accept All on your live banner.
    5. Inspect the Update Call: Run the filter command again and expand the newest entry. You will now see the arguments consent and update, with all four signals marked as granted.

    Step 4: Cross-Checking with Google Tag Assistant

    For ultimate peace of mind, you can validate the integration using Google Tag Assistant.

    • Connect Tag Assistant to your website URL.
    • Looking at the event timeline on the left, you will verify that Consent Default is Event 1.
    • Navigate to the Consent tab to view the Event Consent State table.
    • Before clicking the banner, the On-page Default, On-page Update, and Current State columns will all show Denied for the four purposes.
    • After clicking Accept All, the timeline will show a new Consent Update. The On-page Update and Current State columns will immediately switch to Granted for ad_storage, analytics_storage, ad_user_data, and ad_personalization.

    And that’s it! Your defaults are set, your updates fire correctly, and Google’s Tag Assistant confirms you are fully compliant.

    Note: If you use a tag-managed environment instead of a direct embed, you can achieve the exact same behavior using the official FitConsent GTM Community Template available in the dashboard.