diff --git a/examples/with-facebook-pixel/components/FacebookPixel.js b/examples/with-facebook-pixel/components/FacebookPixel.js index 6d0a6038124cf..17df4ec3e5b11 100644 --- a/examples/with-facebook-pixel/components/FacebookPixel.js +++ b/examples/with-facebook-pixel/components/FacebookPixel.js @@ -1,27 +1,25 @@ import { useEffect } from 'react' import { useRouter } from 'next/router' +import * as fbq from '../lib/fpixel' -const pixelId = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID +const handleRouteChange = () => { + fbq.pageview() +} -export default function FacebookPixel({ children }) { +const FacebookPixel = ({ children }) => { const router = useRouter() + useEffect(() => { - if (!pixelId) return - let fb - function onRouteChange() { - fb.pageView() + // This pageview only trigger first time (it is important for Pixel to have real information) + fbq.pageview() + + router.events.on('routeChangeComplete', handleRouteChange) + return () => { + router.events.off('routeChangeComplete', handleRouteChange) } - import('react-facebook-pixel') - .then((module) => (fb = module.default)) - .then(() => { - fb.init(pixelId, { - autoConfig: true, - debug: true, - }) - fb.pageView() - }) - router.events.on('routeChangeComplete', onRouteChange) - return () => router.events.off('routeChangeComplete', onRouteChange) }, [router.events]) + return children } + +export default FacebookPixel diff --git a/examples/with-facebook-pixel/lib/fpixel.js b/examples/with-facebook-pixel/lib/fpixel.js new file mode 100644 index 0000000000000..145f000bfc024 --- /dev/null +++ b/examples/with-facebook-pixel/lib/fpixel.js @@ -0,0 +1,10 @@ +export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID + +export const pageview = () => { + window.fbq('track', 'PageView') +} + +// https://developers.facebook.com/docs/facebook-pixel/advanced/ +export const event = (name, options = {}) => { + window.fbq('track', name, options) +} diff --git a/examples/with-facebook-pixel/pages/_document.js b/examples/with-facebook-pixel/pages/_document.js new file mode 100644 index 0000000000000..ccfc02007802c --- /dev/null +++ b/examples/with-facebook-pixel/pages/_document.js @@ -0,0 +1,41 @@ +import Document, { Html, Head, Main, NextScript } from 'next/document' +import { FB_PIXEL_ID } from '../lib/fpixel' + +export default class MyDocument extends Document { + render() { + return ( + + + {/* Global Site Code Pixel - Facebook Pixel */} +