fb comments, mixpanel, hotjar, google tag manager, tawk, crisp, olark integration added

Author: Gunnerforlife

gatsby-config.js

@@ -1,3 +1,10 @@
+// loading env
+const activeEnv = process.env.NODE_ENV || 'development'
+console.log(`Using environment config: '${activeEnv}'`)
+require("dotenv").config({
+  path: `.env.${activeEnv}`,
+})
+
 let siteConfig;
 let wordpressConfig;
 
@@ -60,6 +67,65 @@ if (process.env.GA) {
   });
 }
 
+if (process.env.GATSBY_MIXPANEL_TOKEN) {
+  gatsbyPlugins.unshift({
+    resolve: `gatsby-plugin-mixpanel`,
+    options: {
+      apiToken: process.env.GATSBY_MIXPANEL_TOKEN,
+      enableOnDevMode: true,
+      pageViews: 'all'
+    },
+  });
+}
+
+if (process.env.GATSBY_HOTJAR_ID) {
+  gatsbyPlugins.unshift({
+    resolve: `gatsby-plugin-hotjar`,
+    options: {
+      id: process.env.GATSBY_HOTJAR_ID,
+      sv: process.env.GATSBY_HOTJAR_SV
+    }
+  });
+}
+
+if (process.env.GATSBY_GTAG_MANAGER_ID) {
+  gatsbyPlugins.unshift({
+    resolve: `gatsby-plugin-google-tagmanager`,
+    options: {
+      id: process.env.GATSBY_GTAG_MANAGER_ID,
+      includeInDevelopment: true
+    },
+  });
+}
+
+if (process.env.GATSBY_TAWK_ID) {
+  gatsbyPlugins.unshift({
+    resolve: `gatsby-plugin-tawk`,
+    options: {
+      tawkId: process.env.GATSBY_TAWK_ID,
+    }
+  });
+}
+
+if (process.env.GATSBY_CRISP_ID) {
+  gatsbyPlugins.unshift({
+    resolve: `gatsby-plugin-crisp-chat`,
+    options: {
+      websiteId: process.env.GATSBY_CRISP_ID,
+      enableDuringDevelop: true
+    }
+  });
+}
+
+if (process.env.GATSBY_OLARK_ID) {
+  gatsbyPlugins.unshift({
+    resolve: `gatsby-plugin-olark`,
+    options: {
+      olarkSiteID: process.env.GATSBY_OLARK_ID,
+    }
+  });
+}
+
 module.exports = {
   plugins: gatsbyPlugins,
 };

package.json

@@ -16,12 +16,20 @@
   },
   "dependencies": {
     "@draftbox-co/gatsby-wordpress-theme-libre": "^1.0.26",
+    "dotenv": "^8.2.0",
     "gatsby": "2.20.24",
+    "gatsby-plugin-crisp-chat": "^3.2.2",
     "gatsby-plugin-disqus": "^1.1.4",
     "gatsby-plugin-google-analytics": "^2.2.2",
+    "gatsby-plugin-google-tagmanager": "^2.3.5",
+    "gatsby-plugin-hotjar": "^1.0.1",
     "gatsby-plugin-mailchimp": "^5.1.2",
+    "gatsby-plugin-mixpanel": "^3.1.6",
+    "gatsby-plugin-olark": "^1.0.0",
     "gatsby-plugin-segment-js": "^3.1.0",
+    "gatsby-plugin-tawk": "^1.0.0",
     "react": "^16.13.0",
-    "react-dom": "^16.13.0"
+    "react-dom": "^16.13.0",
+    "react-facebook": "^8.1.4"
   }
 }

src/@draftbox-co/gatsby-wordpress-theme-libre/components/fb-comments.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { FacebookProvider, Comments } from 'react-facebook';
+
+const FbComments = props => {
+  console.log({ props });
+  return process.env.FB_APP_ID ? (
+    <FacebookProvider appId={process.env.FB_APP_ID}>
+      <Comments width={"100%"} href={props.href}/>
+    </FacebookProvider>
+  ) : (
+    <></>
+  );
+  return ;
+};
+
+export default FbComments;