Merge branch 'font-redo' of https://github.com/azukaru/next.js into f…

…ont-redo
vercel · Dec 4, 2020 · dfb2e70 · dfb2e70
2 parents 228f2a7 + b1e309a
commit dfb2e70
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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 (
+      <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>
+    )
+  }
+}
diff --git a/examples/with-facebook-pixel/pages/index.js b/examples/with-facebook-pixel/pages/index.js
@@ -1,7 +1,19 @@
+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>
   )
 }