Install in Next.js Pages Router

Before you start

Create an account and a workspace, then activate a plan. Create account
Add the site, authorize every exact host, and configure its policy and categories.
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

pages/_document.tsx controls the initial document; pages/_app.tsx mounts the provider.

Do not mix App Router layout instructions with Pages Router entry points.
Place the provider in components/MayicookiesProvider.tsx to match the example import.

npm

npm install @supaapps/mayicookies

Early denied defaults · before Google

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

Runtime

'use client';
import { useEffect } from 'react';
import { Mayicookies } from '@supaapps/mayicookies';

export function MayicookiesProvider() {
  useEffect(() => {
    void Mayicookies.init({
      siteKey: "REPLACE_WITH_YOUR_PUBLIC_SITE_KEY",
      apiUrl: "https://api.mayicookies.com/api",
      mode: 'auto',
      locale: 'auto',
      autoBlock: true,
      googleConsentMode: { waitForUpdate: 500 },
    });
  }, []);
  return null;
}

Document / root placement

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <Script id="mayicookies-consent-defaults" strategy="beforeInteractive" dangerouslySetInnerHTML={{ __html: "window.dataLayer = window.dataLayer || [];\nwindow.__mayicookiesConsentModeListeners = window.__mayicookiesConsentModeListeners || new Set();\nwindow.mayicookiesAddConsentModeListener = window.mayicookiesAddConsentModeListener || function(listener) {\n  window.__mayicookiesConsentModeListeners.add(listener);\n  return function() { window.__mayicookiesConsentModeListeners.delete(listener); };\n};\nfunction gtag(){dataLayer.push(arguments);}\ngtag('consent', 'default', {\n  ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied',\n  analytics_storage: 'denied', functionality_storage: 'denied',\n  personalization_storage: 'denied', security_storage: 'granted', wait_for_update: 500\n});" }} />
        
      </Head>
      <body><Main /><NextScript /></body>
    </Html>
  );
}

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { MayicookiesProvider } from '../components/MayicookiesProvider';

export default function App({ Component, pageProps }: AppProps) {
  return <><MayicookiesProvider /><Component {...pageProps} /></>;
}

Next: import the GTM template and configure consent checks. A script installation alone does not finish your GTM setup. GTM Tutorials

Download GTM template

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

HTML

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

Preferences control

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

export function CookieSettings() {
  return <button type="button" onClick={() => Mayicookies.openPreferences()}>Cookie settings</button>;
}

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

Before consent, check that _ga and _ga_* are absent. In Basic mode, check that no Google analytics requests were sent.
Test reject, analytics-only, marketing, preference changes, withdrawal, and GPC. Repeat with slow network loading.
Check a saved record in the dashboard. A received record proves API activity, not correct tag ordering.
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.

Need help with this setup?