Lovable Integration

Add ConsentLayer cookie consent to this project.

1. Put this exact script tag in the shared document <head> so it loads on every page:

<script src="https://b.consentlayer.com/YOUR_PROJECT_KEY/banner.js"></script>

Use the root layout or document for this project's framework: in a TanStack Start app, the <head> of the root route's document in src/routes/__root.tsx, before <HeadContent />; in a Vite app, the <head> of index.html. Keep server rendering as it is. It must be the first script in <head>, before any analytics or tracking scripts.

2. Keep it a plain, synchronous <script> tag. Never add async or defer, never load it from useEffect or other client-side code, and never swap it for a framework script helper or a head() scripts entry. It must run before anything else to block trackers.

3. From now on, never let analytics or ad pixels run before consent. Add any new tracking script as <script type="text/plain" data-cl-category="statistics"> (analytics) or data-cl-category="marketing" (ads and pixels), or load it only after hasConsent("statistics") / hasConsent("marketing") from @consentlayer/sdk returns true (re-check with onConsentChange).

Change nothing else. When you're done, remind me to publish the project. I'll verify the installation from the ConsentLayer dashboard on the published domain (*.lovable.app or my custom domain), not the editor preview.

// src/routes/__root.tsx
import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";

export const Route = createRootRoute({
  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <script src="https://b.consentlayer.com/YOUR_PROJECT_KEY/banner.js" />
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

<!-- index.html -->
<head>
  <script src="https://b.consentlayer.com/YOUR_PROJECT_KEY/banner.js"></script>
</head>

Cookie consent (ConsentLayer):
- The ConsentLayer <script> tag in the document <head> (src/routes/__root.tsx or index.html) must stay the first script in <head>. Never add async or defer, never move it into useEffect or a framework script helper, never remove it.
- Never load analytics, ad pixels or other tracking scripts before consent.
- Add analytics scripts as <script type="text/plain" data-cl-category="statistics">.
- Add ad and marketing pixels as <script type="text/plain" data-cl-category="marketing">.
- Or load them from code only after hasConsent("statistics") / hasConsent("marketing") from @consentlayer/sdk returns true, and re-check with onConsentChange.

// src/routes/__root.tsx — inside <head>, after the banner tag
<script
  type="text/plain"
  data-cl-category="statistics"
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"
/>
<script
  type="text/plain"
  data-cl-category="statistics"
  dangerouslySetInnerHTML={{
    __html: `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXX');
    `,
  }}
/>

<script
  type="text/plain"
  data-cl-category="marketing"
  dangerouslySetInnerHTML={{
    __html: `
      !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
      n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
      document,'script','https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', 'YOUR_PIXEL_ID');
      fbq('track', 'PageView');
    `,
  }}
/>

// src/components/ConsentTrackers.tsx — render once, in the root route
import { useEffect } from "react";
import { hasConsent, onConsentChange } from "@consentlayer/sdk";

let gaLoaded = false;

function loadGA() {
  if (gaLoaded || !hasConsent("statistics")) return;
  gaLoaded = true;
  const s = document.createElement("script");
  s.src = "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX";
  document.head.appendChild(s);
  const w = window as any;
  w.dataLayer = w.dataLayer || [];
  w.gtag = function () { w.dataLayer.push(arguments); };
  w.gtag("js", new Date());
  w.gtag("config", "G-XXXXXXXXX");
}

export function ConsentTrackers() {
  useEffect(() => {
    loadGA();
    return onConsentChange(() => loadGA());
  }, []);
  return null;
}