Connect direct Google tags

Before you start

1. Create an account and a workspace, then activate a plan. Create account
2. Add the site, authorize every exact host, and configure its policy and categories.
3. Open Sites → your site → Installation. Replace the public site-key marker below with the key shown there. Open dashboard

Put each part in the right place

Set early defaults in the head. Install the bridge before initializing the runtime.

1. Use either this bridge or the GTM template, never both.
2. For Basic mode, defer the Google loader until the matching category is granted. Denied defaults alone do not prevent cookieless requests.

npm install @supaapps/mayicookies

<script>
window.dataLayer = window.dataLayer || [];
window.__mayicookiesConsentModeListeners = window.__mayicookiesConsentModeListeners || new Set();
window.mayicookiesAddConsentModeListener = window.mayicookiesAddConsentModeListener || function(listener) {
  window.__mayicookiesConsentModeListeners.add(listener);
  return function() { window.__mayicookiesConsentModeListeners.delete(listener); };
};
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
  ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied',
  analytics_storage: 'denied', functionality_storage: 'denied',
  personalization_storage: 'denied', security_storage: 'granted', wait_for_update: 500
});
</script>

// assets/consent.js (bundle with your build tool)
import { Mayicookies, installGoogleConsentModeBridge } from '@supaapps/mayicookies';

installGoogleConsentModeBridge({ waitForUpdate: 500 });
await Mayicookies.init({
  siteKey: "REPLACE_WITH_YOUR_PUBLIC_SITE_KEY",
  apiUrl: "https://api.mayicookies.com/api",
  mode: 'auto',
  locale: 'auto',
  autoBlock: true,
  googleConsentMode: { waitForUpdate: 500 },
});

document.getElementById('cookie-settings')?.addEventListener('click', () => {
  Mayicookies.openPreferences();
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
window.dataLayer = window.dataLayer || [];
window.__mayicookiesConsentModeListeners = window.__mayicookiesConsentModeListeners || new Set();
window.mayicookiesAddConsentModeListener = window.mayicookiesAddConsentModeListener || function(listener) {
  window.__mayicookiesConsentModeListeners.add(listener);
  return function() { window.__mayicookiesConsentModeListeners.delete(listener); };
};
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
  ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied',
  analytics_storage: 'denied', functionality_storage: 'denied',
  personalization_storage: 'denied', security_storage: 'granted', wait_for_update: 500
});
</script>
    <script type="module" src="/assets/consent.js"></script>
  </head>
  <body>
    <button id="cookie-settings" type="button">Cookie settings</button>
  </body>
</html>

Basic / Advanced Consent Mode

Basic mode blocks Google tags until the relevant consent. Advanced mode loads tags with denied defaults and can send cookieless pings. Choose deliberately: denied storage is not the same as no network requests. The GTM template communicates choices; your tag checks control what fires.

Other optional scripts

<script type="text/plain" data-mayicookies-category="analytics" src="https://YOUR_ANALYTICS_HOST/script.js"></script>

Replace the vendor URL and use a category key configured on the site. Do not leave a second active copy of the vendor script elsewhere.

Keep cookie settings accessible

Place this control in a shared footer or privacy page so visitors can withdraw or change consent.

import { Mayicookies } from '@supaapps/mayicookies';

document.getElementById('cookie-settings')?.addEventListener('click', () => {
  Mayicookies.openPreferences();
});

Multilingual websites

Set the page's HTML lang attribute. The CMP follows it automatically; configure custom wording and translated privacy links under Consent Policy → Languages in the dashboard. For client-side language switches, call Mayicookies.setLocale(language) instead of rewriting banner text in the DOM. A language change preserves consent. Review translations of your own purposes; those are not automatically translated.

Check the actual browser behavior

1. Before consent, check that _ga and _ga_* are absent. In Basic mode, check that no Google analytics requests were sent.
2. Test reject, analytics-only, marketing, preference changes, withdrawal, and GPC. Repeat with slow network loading.
3. Check a saved record in the dashboard. A received record proves API activity, not correct tag ordering.
4. Use GTM Preview and Tag Assistant to confirm defaults and updates. Check both analytics and ad-related signals.

Common failures

403 / config

Authorize the exact host, including www when used.

404 / config

Check the site key and API URL copied from Installation.

Google cookies before consent

Inspect tag order, duplicated loaders, and consent checks. Do not solve this by delaying the banner.

No recorded choice

Check the consent POST, billing status, and remaining record allowance. A local saved choice does not prove successful server recording.

Mayicookies manages consent mechanics, not your legal assessment. It does not scan for cookies or automatically intercept scripts you have not configured. Google Consent Mode support is not Google CMP certification. Review your notices and test every optional tag.