with-facebook-pixel (#19762)

## Problems with the other implementation - pixel not working first time load page (this generate fake information to facebook analytics data) - package react-facebook-pixel error when try use events in code blocks or other pages with the current implementation - sometimes pixel mark twice pageview (this generate warning in facebook panel) - standar or custom events not working ## Solutions - Initialize pixel when entering each page (_document) - Now, we can use custom and standar events (utils/fpixel.js) - correct way to implement pixel according to facebook and guide facebook to implement in SPA - this solution is complemented with example "with-google-analytics" In my opinion, the other development has problems, but I preferred created a new example because the way to implement the base code is different. It seems that the other example is based on set the events from the Facebook control panel then this method limits an advanced implementation.

with-facebook-pixel (#19762)
## Problems with the other implementation - pixel not working first time load page (this generate fake information to facebook analytics data) - package react-facebook-pixel error when try use events in code blocks or other pages with the current implementation - sometimes pixel mark twice pageview (this generate warning in facebook panel) - standar or custom events not working ## Solutions - Initialize pixel when entering each page (_document) - Now, we can use custom and standar events (utils/fpixel.js) - correct way to implement pixel according to facebook and guide facebook to implement in SPA - this solution is complemented with example "with-google-analytics" In my opinion, the other development has problems, but I preferred created a new example because the way to implement the base code is different. It seems that the other example is based on set the events from the Facebook control panel then this method limits an advanced implementation.
dc4beade · Nicolás Figueroa · GitHub · 20949612 · dc4beade · dc4beade
4 changed file
--- a/examples/with-facebook-pixel/components/FacebookPixel.js
+++ b/examples/with-facebook-pixel/components/FacebookPixel.js
 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
--- a/examples/with-facebook-pixel/lib/fpixel.js
+++ b/examples/with-facebook-pixel/lib/fpixel.js
+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)
+}
--- a/examples/with-facebook-pixel/pages/_document.js
+++ b/examples/with-facebook-pixel/pages/_document.js
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { FB_PIXEL_ID } from '../lib/fpixel'
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          {/* Global Site Code Pixel - Facebook Pixel */}
+          <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', ${FB_PIXEL_ID});
+              `,
+            }}
+          />
+          <noscript>
+            <img
+              height="1"
+              width="1"
+              style={{ display: 'none' }}
+              src={`https://www.facebook.com/tr?id=${FB_PIXEL_ID}&ev=PageView&noscript=1`}
+            />
+          </noscript>
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
--- a/examples/with-facebook-pixel/pages/index.js
+++ b/examples/with-facebook-pixel/pages/index.js
+import * as fbq from '../lib/fpixel'
+
 export default function Home() {
+  const handleClick = () => {
+    fbq.event('Purchase', { currency: 'USD', value: 10 })
+  }
+
  return (
-    <h1>
-      Go to `pages/_app.js` to see how you can add Facebook Pixel to your app
-    </h1>
+    <div>
+      <h1>
+        Go to `pages/_app.js` to see how you can add Facebook Pixel to your app
+      </h1>
+      <p>Click the button below to send a purchase event to Pixel</p>
+      <button type="button" onClick={handleClick}>
+        Buy $10
+      </button>
+    </div>
  )
 }