feat: facebook pixel 설정

i-Tracker · Jul 14, 2024 · d8e2fa2 · d8e2fa2
1 parent 425808f
commit d8e2fa2
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 0 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,6 +6,10 @@ import GoogleAnalytics from '@/shared/components/GoogleAnalytics';
 import { getMetadata } from '@/shared/utils/metadata';
 import { Toaster } from '@/shared/components/shadcn/ui/toaster';
 import { UserStatusProvider } from '@/features/auth/context/userStatusContext';
+import { Suspense } from 'react';
+import NavigationEvents from '@/shared/components/PixelEvents';
+import Image from 'next/image';
+import { FB_PIXEL_ID } from '@/shared/utils/pixel';
 
 const roboto = Roboto({
   weight: ['400', '700'],
@@ -27,6 +31,17 @@ export default function RootLayout({
 
   return (
     <html lang="ko">
+      <head>
+        <noscript>
+          <Image
+            alt="fb"
+            height="1"
+            width="1"
+            style={{ display: 'none' }}
+            src={`https://www.facebook.com/tr?id=${FB_PIXEL_ID}&ev=PageView&noscript=1`}
+          />
+        </noscript>
+      </head>
       <body className={roboto.className}>
         {process.env.NEXT_PUBLIC_GA_ID && <GoogleAnalytics />}
 
@@ -35,6 +50,9 @@ export default function RootLayout({
             <UserStatusProvider>{children}</UserStatusProvider>
           </QueryProvider>
         </MSWProvider>
+        <Suspense fallback={null}>
+          <NavigationEvents />
+        </Suspense>
 
         <Toaster />
       </body>

diff --git a/src/shared/components/PixelEvents/index.tsx b/src/shared/components/PixelEvents/index.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+import * as fbq from '../../utils/pixel';
+import Script from 'next/script';
+import { FB_PIXEL_ID } from '@/shared/utils/pixel';
+
+export default function NavigationEvents() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  useEffect(() => {
+    fbq.pageview();
+  }, [pathname, searchParams]);
+  return (
+    <>
+      <Script
+        id="fb-pixel"
+        strategy="afterInteractive"
+        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', '${FB_PIXEL_ID}');
+            fbq('track', 'PageView');
+            `,
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/shared/utils/pixel.ts b/src/shared/utils/pixel.ts
@@ -0,0 +1,9 @@
+export const FB_PIXEL_ID = 294598350342835;
+
+export const pageview = () => {
+  window.fbq('track', 'PageView');
+};
+
+export const event = (name, options = {}) => {
+  window.fbq('track', name, options);
+};