From 7e894bf65ee772e69b74e17ab2a91057057f7689 Mon Sep 17 00:00:00 2001
From: knuthtimo-lab <knuth.timo@gmail.com>
Date: Sun, 25 Jan 2026 23:10:03 +0100
Subject: [PATCH] facebook

---
 package-lock.json                          |  7 ++++
 package.json                               |  1 +
 src/app/(marketing-de)/layout.tsx          |  7 ++++
 src/components/analytics/FacebookPixel.tsx | 38 ++++++++++++++++++++++
 4 files changed, 53 insertions(+)
 create mode 100644 src/components/analytics/FacebookPixel.tsx

diff --git a/package-lock.json b/package-lock.json
index f35bbaa..bf44758 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,6 +46,7 @@
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",
+        "react-facebook-pixel": "^1.0.4",
         "react-i18next": "^13.5.0",
         "react-simple-maps": "^3.0.0",
         "resend": "^6.4.2",
@@ -10436,6 +10437,12 @@
         "react": ">= 16.8 || 18.0.0"
       }
     },
+    "node_modules/react-facebook-pixel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/react-facebook-pixel/-/react-facebook-pixel-1.0.4.tgz",
+      "integrity": "sha512-givZY8MS0v/mdbRzvcvouBo/j0TtDiu/93f4gIjJXwDDgwlf6bYUiQvb2qcqjluOOD/hIKUQHNYLNsSOnoEklg==",
+      "license": "MIT"
+    },
     "node_modules/react-i18next": {
       "version": "13.5.0",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.5.0.tgz",
diff --git a/package.json b/package.json
index c42cf7a..a8c069d 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-facebook-pixel": "^1.0.4",
     "react-i18next": "^13.5.0",
     "react-simple-maps": "^3.0.0",
     "resend": "^6.4.2",
diff --git a/src/app/(marketing-de)/layout.tsx b/src/app/(marketing-de)/layout.tsx
index 903706b..3f43d1c 100644
--- a/src/app/(marketing-de)/layout.tsx
+++ b/src/app/(marketing-de)/layout.tsx
@@ -5,6 +5,7 @@ import { Providers } from '@/components/Providers';
 import MarketingDeLayout from './MarketingDeLayout';
 import { organizationSchema, websiteSchema } from '@/lib/schema';
 import AdSenseScript from '@/components/ads/AdSenseScript';
+import FacebookPixel from '@/components/analytics/FacebookPixel';
 
 export const metadata: Metadata = {
     title: {
@@ -49,6 +50,11 @@ export const metadata: Metadata = {
             'de': 'https://www.qrmaster.net/qr-code-erstellen',
         },
     },
+    verification: {
+        other: {
+            'facebook-domain-verification': process.env.NEXT_PUBLIC_FACEBOOK_DOMAIN_VERIFICATION || '',
+        },
+    },
 };
 
 import AdBanner from '@/components/ads/AdBanner'; // Import AdBanner
@@ -64,6 +70,7 @@ export default function MarketingDeGroupLayout({
                 <Suspense fallback={null}>
                     <Providers>
                         <AdSenseScript />
+                        <FacebookPixel />
                         <script
                             type="application/ld+json"
                             dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema()) }}
diff --git a/src/components/analytics/FacebookPixel.tsx b/src/components/analytics/FacebookPixel.tsx
new file mode 100644
index 0000000..872499f
--- /dev/null
+++ b/src/components/analytics/FacebookPixel.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+
+export default function FacebookPixel() {
+    const [loaded, setLoaded] = useState(false);
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+
+    useEffect(() => {
+        // Only load if ID is present
+        const pixelId = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID;
+        if (!pixelId) return;
+
+        // Check consent
+        const cookieConsent = localStorage.getItem('cookieConsent');
+        if (cookieConsent !== 'accepted') return;
+
+        if (!loaded) {
+            import('react-facebook-pixel')
+                .then((x) => x.default)
+                .then((ReactPixel) => {
+                    ReactPixel.init(pixelId);
+                    ReactPixel.pageView();
+                    setLoaded(true);
+                });
+        } else {
+            import('react-facebook-pixel')
+                .then((x) => x.default)
+                .then((ReactPixel) => {
+                    ReactPixel.pageView();
+                });
+        }
+    }, [pathname, searchParams, loaded]);
+
+    return null;
+}