4 minute read

Google Consent Mode

This guide shows you how to connect Silktide Consent Manager to Google Tag Manager (GTM) so it works with Google Consent Mode v2. You’ll just need to copy and paste a few snippets into your website and GTM.

Before you start

You’ll need:

  • Access to your website’s header code (sometimes called <head>, “custom code”, or “tracking code”)
  • A Google Tag Manager account with the container already installed on your site

If you can’t edit your website header, jump to the Fallback setup at the end of this guide.

In Google Tag Manager, make sure Consent Mode is enabled, and that your tags reference the appropriate Google consent types: analytics_storage, ad_storage, ad_user_data, ad_personalization, functionality_storage, and security_storage. Google’s own tags (GA4, Google Ads) already check the right types automatically.

Before GTM loads, set the default consent state. This prevents data from being shared before the visitor has made a choice. Add this snippet above your existing GTM container snippet in your website header:

<script>
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments);
  }

  gtag('consent', 'default', {
    analytics_storage:     localStorage.getItem('stcm.consent.analytics') === 'true' ? 'granted' : 'denied',
    ad_storage:            localStorage.getItem('stcm.consent.marketing') === 'true' ? 'granted' : 'denied',
    ad_user_data:          localStorage.getItem('stcm.consent.marketing') === 'true' ? 'granted' : 'denied',
    ad_personalization:    localStorage.getItem('stcm.consent.marketing') === 'true' ? 'granted' : 'denied',
    functionality_storage: localStorage.getItem('stcm.consent.essential') === 'true' ? 'granted' : 'denied',
    security_storage:      localStorage.getItem('stcm.consent.essential') === 'true' ? 'granted' : 'denied'
  });
</script>

On a first visit, all optional consent types are denied because the visitor hasn’t made a choice yet. By default, we recommend this mapping:

Google consent typeSilktide consent type
analytics_storageanalytics
ad_storagemarketing
ad_user_datamarketing
ad_personalizationmarketing
functionality_storageessential
security_storageessential

If you change the id of any consent type in your Consent Manager config, update the matching localStorage.getItem('stcm.consent.<id>') values above to match.

Add the Silktide Consent Manager stylesheet and script to your website header, above your GTM code:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/silktide/consent-manager@v2.0.0/silktide-consent-manager.css"
  integrity="sha384-IO1E/jCrQXyH5rwcI0SXP7OXw47JFqQNDQcKhbFvqnL2IunBxxwE2Ne5XyAmCqKs"
  crossorigin="anonymous">

<script
  src="https://cdn.jsdelivr.net/gh/silktide/consent-manager@v2.0.0/silktide-consent-manager.js"
  integrity="sha384-j4NIMOecmtzMWe9GJADIIe5hTlHG63aiTQ/2XorW10RNyQJg+IU+xwFVDy45wBah"
  crossorigin="anonymous"></script>

The integrity and crossorigin attributes verify the files haven’t been tampered with – keep them if you’re using the URLs above. Don’t add defer: the Consent Manager needs to be ready before GTM runs its Consent Initialization tags.

Where do I add this?

It depends on your platform:

PlatformWhere to look
WordPressTheme header, header scripts plugin, or tag/code injection settings
Shopifytheme.liquid
WebflowSite settings → Custom code → Head code
SquarespaceSettings → Advanced → Code Injection
WixCustom code / tracking tools

If you’re unsure, ask your developer to add the snippets above your existing GTM code.

Self-hosting option

You can also self-host. Download silktide-consent-manager.css and silktide-consent-manager.js from the silktide/consent-manager GitHub repo, then load them from your own server:

<link rel="stylesheet" href="/assets/v2.0.0/silktide-consent-manager.css?x82613">
<script src="/assets/v2.0.0/silktide-consent-manager.js?x82613"></script>

A versioned folder like /v2.0.0/ makes updates easier to manage.

Now create a tag in GTM to initialize the Consent Manager. In Tags → New, choose Custom HTML and name it Consent Manager (Silktide).

The tag should contain only the silktideConsentManager.init({...}) call (and optionally a <style> block for CSS variable overrides). Don’t include the external Consent Manager script – it’s already loaded from your website header.

<style>
  #stcm-wrapper {
    --primaryColor: #533BE2;
    --backgroundColor: #FFFFFF;
    --textColor: #4B494B;
  }
</style>

<script>
  window.silktideConsentManager.init({
    consentTypes: [
      {
        id: 'analytics',
        label: 'Analytics',
        description: 'These help us understand how visitors interact with the website.',
        defaultValue: false,
        gtag: 'analytics_storage'
      },
      {
        id: 'marketing',
        label: 'Marketing',
        description: 'These are used to deliver personalized advertisements.',
        defaultValue: false,
        gtag: ['ad_storage', 'ad_user_data', 'ad_personalization']
      },
      {
        id: 'essential',
        label: 'Essential',
        description: 'These are required for the website to work properly.',
        required: true
      }
    ]
  });
</script>

Under Advanced settings:

SettingValue
Tag firing optionsOnce per page
Consent settingsNo additional consent required

Set the trigger to Consent Initialization – All Pages. This is the earliest GTM trigger and ensures the Consent Manager runs before other tags check consent.

Each consent type in your config can map to one or more Google consent types via the gtag option (as shown in the Step 4 example):

  • gtag: 'analytics_storage' for a single Google type
  • gtag: ['ad_storage', 'ad_user_data', 'ad_personalization'] for multiple

When the visitor changes consent, Silktide Consent Manager calls gtag('consent', 'update', {...}) automatically. The install wizard can generate the right gtag mapping for you.

Next, create a trigger in GTM that listens for consent changes. In Triggers → New, choose Custom Event and name it STCM Consent Update. Set the event name to stcm_consent_update and set it to fire on All Custom Events.

If you’ve changed the eventName option in your Consent Manager config, use that custom event name instead.

Finally, choose which GTM tags should wait for consent. For an analytics tag:

  1. Open the tag and go to Advanced settings
  2. Set Tag firing options to Once per page
  3. Under Consent settings, choose Require additional consent for tag to fire and add analytics_storage
  4. Add the STCM Consent Update trigger

The tag will then fire after the visitor grants analytics consent. Some Google tags (GA4, Google Ads) already include built-in consent checks – those may match your setup without needing extra requirements.

Fallback: load everything from GTM

Use this option only if you can’t edit your website header. The stylesheet, script, and init() call all live in one GTM Custom HTML tag:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/silktide/consent-manager@v2.0.0/silktide-consent-manager.css">

<style>
  #stcm-wrapper {
    --primaryColor: #533BE2;
  }
</style>

<script src="https://cdn.jsdelivr.net/gh/silktide/consent-manager@v2.0.0/silktide-consent-manager.js"></script>

<script>
  window.silktideConsentManager.init({
    // Your config options here
  });
</script>

Fire this tag on Consent Initialization – All Pages, and tick Support document.write in the Custom HTML tag. Without it, GTM may run the init() call before the Consent Manager script has loaded, and you may see silktideConsentManager is undefined in the browser console.

Trade-offs of the GTM-only setup

  • The banner appears slightly later, since the Consent Manager loads after GTM has already started
  • You can’t use the integrity and crossorigin security attributes (GTM Custom HTML strips them)
  • Easier to run into script-loading or tag-ordering issues
  • You can’t set consent defaults before GTM loads – if you can add a snippet to the website, prefer the recommended setup above
Back to top