Merge pull request #6 from michaelpelea/feature/add-fb-pixel

add facebook pixel tracking
andreas-straub · Sep 30, 2020 · 130f673 · 130f673
2 parents 06fe495 + 2b4533f
commit 130f673
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,13 @@ module.exports = {
           controlCookieName: 'gdpr-marketing-enabled', // <--- default
           cookieFlags: 'secure;samesite=none' // <--- default
         },
+        facebookPixel: {
+          // The property ID; the tracking code won't be generated without it.
+          pixelId: 'YOUR_FACEBOOK_PIXEL_TRACKING_ID',
+          // Name of the cookie, that enables the tracking if it is true
+          controlCookieName: 'gdpr-marketing-enabled', // <--- default
+          cookieFlags: 'secure;samesite=none' // <--- default
+        },
         hotjar: {
           // The Hotjar ID; the tracking code won't be generated without it.
           trackingId: 'YOUR_HOTJAR_ID',

diff --git a/src/gatsby-browser.js b/src/gatsby-browser.js
@@ -17,12 +17,16 @@ const defaultOptions = {
     anonymize: true,
     cookieFlags: 'secure;samesite=none'
   },
+  facebookPixel: {
+    controlCookieName: 'gdpr-marketing-enabled',
+    cookieFlags: 'secure;samesite=none'
+  },
   hotjar: {
     controlCookieName: 'gdpr-analytics-enabled',
   }
 };
 
-export const onClientEntry = (_, {environments = defaultOptions.environments, hotjar, debug}) => {
+export const onClientEntry = (_, {environments = defaultOptions.environments, hotjar, facebookPixel, debug}) => {
   if (debug) {
     console.log("onClientEntry - currentEnvironment:", currentEnvironment);
   }
@@ -35,6 +39,7 @@ export const onClientEntry = (_, {environments = defaultOptions.environments, ho
     return null;
   }
 
+  const fbPixelOpt = {...defaultOptions.facebookPixel, ...facebookPixel};
   const hotjarOpt = {...defaultOptions.hotjar, ...hotjar};
 
   if (typeof window.trackHotjar === `function` && Cookies.get(hotjarOpt.controlCookieName) === "true") {
@@ -51,9 +56,16 @@ export const onClientEntry = (_, {environments = defaultOptions.environments, ho
       console.log(`onClientEntry - gtag function is defined. gaLoaded=${gaLoaded}`);
     }
   }
+
+  if (typeof window.fbq === `function` && Cookies.get(fbPixelOpt.controlCookieName) === "true") {
+    if (debug) {
+      console.log(`onClientEntry - Cookies.get('${fbPixelOpt.controlCookieName}') is true ==> start fbpixel`);
+    }
+    window.fbq(`init`, facebookPixel.pixelId);
+  }
 };
 
-export const onRouteUpdate = ({location}, {environments = defaultOptions.environments, googleAnalytics, googleAds, debug}) => {
+export const onRouteUpdate = ({location}, {environments = defaultOptions.environments, googleAnalytics, googleAds, facebookPixel, debug}) => {
   if (debug) {
     console.log("onRouteUpdate - currentEnvironment:", currentEnvironment);
   }
@@ -66,6 +78,7 @@ export const onRouteUpdate = ({location}, {environments = defaultOptions.environ
     return null;
   }
 
+  const facebookPixelOpt = {...defaultOptions.facebookPixel, ...facebookPixel};
   const googleAnalyticsOpt = {...defaultOptions.googleAnalytics, ...googleAnalytics};
   const googleAdsOpt = {...defaultOptions.googleAds, ...googleAds};
 
@@ -142,6 +155,12 @@ export const onRouteUpdate = ({location}, {environments = defaultOptions.environ
     }
   };
 
+  // facebook pixel
+  window.fbPixel = () => {
+    if (Cookies.get(facebookPixelOpt.controlCookieName) === "true" && typeof window.fbq === `function` && facebookPixelOpt.pixelId) {
+      window.fbq(`track`, `PageView`);
+    }
+  }
 
   if (debug) {
     console.log(`onRouteUpdate - call tracking functions`);
@@ -150,5 +169,6 @@ export const onRouteUpdate = ({location}, {environments = defaultOptions.environ
   setTimeout(() => {
     window.trackGoogleAnalytics();
     window.trackGoogleAds();
+    window.fbPixel();
   }, timeoutLength);
 };
diff --git a/src/gatsby-ssr.js b/src/gatsby-ssr.js
@@ -1,7 +1,7 @@
 import React from "react"
 
 export const onRenderBody = (
-  {setHeadComponents, setPostBodyComponents}, { googleAnalytics = {}, environments = ['production'], hotjar }
+  {setHeadComponents, setPostBodyComponents}, { googleAnalytics = {}, environments = ['production'], hotjar, facebookPixel = {} }
 ) => {
   const currentEnvironment = process.env.ENV || process.env.NODE_ENV || "development";
 
@@ -68,4 +68,24 @@ export const onRenderBody = (
       />,
     ])
   }
+
+  if (facebookPixel && facebookPixel.pixelId) {
+    setHeadComponents([
+      <script
+        key="gatsby-plugin-gdpr-cookies-facebook-pixel"
+        dangerouslySetInnerHTML={{
+          __html: stripIndent`
+            !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');
+          `,
+        }}
+      />,
+    ])
+  }
 }