feat(third-parties): add facebook pixel

Author: tbor00

packages/third-parties/meta.d.ts

@@ -0,0 +1 @@
+export * from './dist/meta/index'

packages/third-parties/package.json

@@ -9,11 +9,16 @@
     "./google": {
       "types": "./dist/google/index.d.ts",
       "default": "./dist/google/index.js"
+    },
+    "./meta": {
+      "types": "./dist/meta/index.d.ts",
+      "default": "./dist/meta/index.js"
     }
   },
   "files": [
     "dist",
-    "google.d.ts"
+    "google.d.ts",
+    "meta.d.ts"
   ],
   "license": "MIT",
   "scripts": {

packages/third-parties/src/meta/fb-pixel.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { useEffect } from 'react'
+import Script from 'next/script'
+
+import type { FBPixelProps } from '../types/meta'
+
+export const FacebookPixel = (props: FBPixelProps) => {
+  const {
+    pixelId,
+    pixelScriptUrl = 'https://connect.facebook.net/en_US/fbevents.js',
+  } = props
+
+  useEffect(() => {
+    // performance.mark is being used as a feature use signal. While it is traditionally used for performance
+    // benchmarking it is low overhead and thus considered safe to use in production and it is a widely available
+    // existing API.
+    // The performance measurement will be handled by Chrome Aurora
+
+    performance.mark('mark_feature_usage', {
+      detail: {
+        feature: 'next-third-parties-fb-pixel',
+      },
+    })
+  }, [])
+
+  return (
+    <>
+      <Script
+        id="_next-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',
+  '${pixelScriptUrl}');
+  fbq('init', '${pixelId}');
+  fbq('track', 'PageView');
+	`,
+        }}
+      />
+      <noscript>
+        <img
+          height="1"
+          width="1"
+          style={{ display: 'none' }}
+          src={`https://www.facebook.com/tr?id=${pixelId}&ev=PageView&noscript=1`}
+        />
+      </noscript>
+    </>
+  )
+}
+
+// https://developers.facebook.com/docs/facebook-pixel/advanced/
+export const pageView = () => {
+  window?.fbq('track', 'PageView')
+}
+
+export const trackPixelEvent = (name: string, options: any = {}) => {
+  window?.fbq('track', name, options)
+}

packages/third-parties/src/meta/index.ts

@@ -0,0 +1 @@
+export { FacebookPixel, pageView, trackPixelEvent } from './fb-pixel'

packages/third-parties/src/types/meta.ts

@@ -0,0 +1,13 @@
+/* The `declare global` block in TypeScript is used to extend the global scope with custom types or
+interfaces. In this specific case: */
+declare global {
+  interface Window {
+    fbq: (type: string, name: string, options?: any) => void
+  }
+}
+
+export type FBPixelProps = {
+  pixelId: string
+  pixelScriptUrl?: string
+  nonce?: string
+}