facebook

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