feat(website): integrate Facebook Pixel and restructure Google Analytics components

Author: aymericzip

apps/website/.env.template

@@ -40,6 +40,12 @@ ENABLE_SERVICE_WORKER=false
 
 NEXT_PUBLIC_MEASUREMENT_ID=
 
+#######################################################################################
+# Facebook Pixel                                                                      #
+#######################################################################################
+
+NEXT_PUBLIC_PIXEL_ID=
+
 #######################################################################################
 # Intlayer                                                                            #
 #######################################################################################

apps/website/src/components/Metrics/FacebookPixel/index.tsx

@@ -0,0 +1,28 @@
+import Script from 'next/script';
+
+export const FacebookPixel = () => (
+  <>
+    <Script id="fb-pixel-init" strategy="afterInteractive">
+      {`
+          !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', '${process.env.NEXT_PUBLIC_PIXEL_ID}');
+          fbq('track', 'PageView');
+        `}
+    </Script>
+    <noscript>
+      <img
+        height="1"
+        width="1"
+        style={{ display: 'none' }}
+        src={`https://www.facebook.com/tr?id=${process.env.NEXT_PUBLIC_PIXEL_ID}&ev=PageView&noscript=1`}
+      />
+    </noscript>
+  </>
+);

apps/website/src/components/GoogleAnalytics/index.tsx renamed to apps/website/src/components/Metrics/GoogleAnalytics/index.tsx

@@ -1,7 +1,6 @@
 import Script from 'next/script';
-import React from 'react';
 
-const GoogleAnalytics = () => (
+export const GoogleAnalytics = () => (
   <>
     <Script
       strategy="lazyOnload"
@@ -20,5 +19,3 @@ const GoogleAnalytics = () => (
     </Script>
   </>
 );
-
-export default GoogleAnalytics;

apps/website/src/providers/AppProviders.tsx

@@ -1,4 +1,5 @@
-import GoogleAnalytics from '@components/GoogleAnalytics';
+import { FacebookPixel } from '@components/Metrics/FacebookPixel';
+import { GoogleAnalytics } from '@components/Metrics/GoogleAnalytics';
 import { ServiceWorkerSubscriber } from '@components/ServiceWorker/ServiceWorkerSubscriber';
 import { Toaster } from '@intlayer/design-system';
 import { AsyncStateProvider } from '@intlayer/design-system/hooks';
@@ -18,6 +19,7 @@ export const AppProviders: FC<AppProvidersProps> = ({ children, locale }) => (
         <AsyncStateProvider>
           <Toaster />
           <GoogleAnalytics />
+          <FacebookPixel />
           {children}
         </AsyncStateProvider>
       </AnimatePresenceProvider>