facebook

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

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

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()) }}

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