Install in Next.js App Router

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

Use app/layout.tsx and app/MayicookiesProvider.tsx. The provider uses 'use client'.

1. Render the default-denied bootstrap with next/script beforeInteractive in the root layout.
2. Keep the server layout a server component. Only the provider and preferences button need client-side behavior.

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>

'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;
}

// app/layout.tsx
import type { ReactNode } from 'react';
import Script from 'next/script';
import { MayicookiesProvider } from './MayicookiesProvider';

export default function RootLayout({ children }: { children: ReactNode }) {
  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>
        <MayicookiesProvider />
        {children}
      </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.

'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

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.