Meta Facebook Pixel Setup

[hhissami]

Hi!

How would I set up the meta pixel in my SSR enabled react router v7 (framework mode) app? Thanks!

META INSTRUCTIONS:
Install Pixel Base Code
The pixel base code tracks activity on your website, providing a baseline for measuring specific events. Copy the base code below and paste it between the header tags on every page of your website:

<script> !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', 'XXXXXXXXX'); fbq('track', 'PageView'); </script>

[gustavopch]

In the end, it's just regular JavaScript. You can wrap the code in a function and call it from entry.client.tsx which will run when your app is initialized.

[gustavopch]

You'll have to write the types for what you use. Here's what I have in my project (for your usage, you may not need to type all these properties):

declare global {
  interface Window {
    fbq: ((...args: any[]) => void) & {
      callMethod?: (...args: any[]) => void
      push?: (...args: any[]) => void
      getFbeventsModules?: (module: string) => any
      loaded?: boolean
      version?: string
      queue?: any[]
      disablePushState?: boolean
      allowDuplicatePageViews?: boolean
      instance?: {
        pixelsByID: {
          [id: string]: {
            userData: { [key: string]: string }
            censoredUserDataFormat: { [key: string]: string }
          }
        }
      }
    }
    _fbq: Window['fbq']
  }
}

[gustavopch]

Well, you can probably just have:

declare global {
  interface Window {
    fbq: any
    _fbq: any
  }
}

And insert a few more anys where needed. Or maybe even move the function to a .js file.

[hhissami]

Perfect thanks! And how do you recommend doing the page view tracking events, given the client-side navigation nature of react router?

Because from what I understand, entry.client.tsx is a one time firing thing.

I have SSR enabled by the way.

[gustavopch]

I have a useEffect at the root component (root.tsx) that runs whenever location.pathname changes and fires the PageView event.

[aliyazdanpanah-beep]

``Hey there! Setting up Meta Pixel in React Router v7 with SSR requires a slightly different approach than traditional SPAs. Here's how you can do it:

Since you're using SSR (Framework Mode), you need to ensure the Pixel code runs on both server and client side, but only initializes once.

Option 1: Using a Client Component (Recommended)
Create a separate client component for the Pixel:

`// components/meta-pixel.jsx
import { useEffect } from 'react';

export function MetaPixel({ pixelId = 'YOUR_PIXEL_ID_HERE' }) {
useEffect(() => {
// Only run on client side
!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', pixelId);
fbq('track', 'PageView');

}, [pixelId]);

return null;
}Then use it in your root component:// app/root.jsx
import { MetaPixel } from '~/components/meta-pixel';

export default function Root() {
return (


{/* Your head content /}


{/ Your app content */}



);
}`

Option 2: Direct Script Injection
Alternatively, you can add it directly to your root HTML:
`// app/root.jsx
import { useEffect } from 'react';

export default function Root() {
useEffect(() => {
// Client-side initialization
if (typeof window !== 'undefined') {
fbq('track', 'PageView');
}
}, []);

return (


<script
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', 'XXXXXXXXX');
}}
/>


{/* Your app content */}


);
}`