diff --git a/facebook-pixel/.gitignore b/facebook-pixel/.gitignore new file mode 100644 index 00000000..bb514fd1 --- /dev/null +++ b/facebook-pixel/.gitignore @@ -0,0 +1,4 @@ +node_modules + +/.cache +.env diff --git a/facebook-pixel/README.md b/facebook-pixel/README.md new file mode 100644 index 00000000..f7693075 --- /dev/null +++ b/facebook-pixel/README.md @@ -0,0 +1,35 @@ +# TODO: Title of Example + +Setup Facebook Pixel with Remix. Inspired by the ```google-analytics``` example, we will do some adjustments to make sending Pixel events work with Remix. + + + +## Preview + +Open this example on [CodeSandbox](https://codesandbox.com): + + + +[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/examples/tree/main/__template) + +## Example + +- Check ```app/utils/pixel.client.ts```. its a simple wrapper for the pixel's ```fbq``` function. + +- Check [app/root.tsx](./app/root.tsx) to see how the Facebook Pixel script is added. + + We use ```root.stx``` to fire initial events and the default ```PageView``` event. Every url visited in the app will fire a ```PageView``` event. + +- Check [app/routes/view-content.tsx](./app/routes/view-content.tsx) to see how to send specific standard events using a Button to trigger / send the event. +- Check [app/routes/custom-content.tsx](./app/routes/cuctom-content.tsx) to see how to send your own custom events using a Button to trigger / send the event. + + + You should see warning in the browser console when you open your app in dev mode. That's fine. + + Here's the result in Facebook Events Manager + ![Screenshot 2024-11-04 at 21 27 43](https://github.com/user-attachments/assets/92127622-2575-4df6-8c2e-6479037b9cc7) + + +## Related Links + +[Facebook Pixel Events Specification](https://developers.facebook.com/docs/meta-pixel/reference) diff --git a/facebook-pixel/app/root.tsx b/facebook-pixel/app/root.tsx new file mode 100644 index 00000000..6a575030 --- /dev/null +++ b/facebook-pixel/app/root.tsx @@ -0,0 +1,84 @@ +import { + Links, + Meta, + Outlet, + Scripts, + ScrollRestoration, + json, + useLoaderData, + useLocation, +} from "@remix-run/react"; + +// import the pixel client helper +import * as pixel from "./utils/pixel.client"; +import { useEffect } from "react"; + +/** + * put the Your Pixel ID in the loader. + * Sure you can also put it in the .env + * @returns Lets + */ +export let loader = async () => { + return json({ + PIXEL_ID: 'YOUR_PIXEL_ID_HERE', + }); +}; + +export function Layout({ children }: { children: React.ReactNode }) { + + const location = useLocation(); + + // get the pixel id + const { PIXEL_ID } = useLoaderData(); + + // fire pixel init and the default pageview event here + // we use location as the depency index. so everytime the route changes, the pixel will fire + useEffect(() => { + pixel.init(PIXEL_ID); + pixel.pageView(); + }, [location, PIXEL_ID]); + + return ( + + + + + + {/* + Facebook Pixel script injection. lets only activate it on Production only + + You will also notice that I split script injection into 2 parts as seen below. After several atempts and trial, puting it as a single script tag as Facebook suggested did not work. It rise a hydation error in Production. + + You should try it yourself and see it. + */} + {process.env.NODE_ENV === "development" ? null : ( + <> +