Create a gatsby plugin for plausible

Author: benadam11

gatsby-config.js

@@ -22,6 +22,7 @@ module.exports = {
     "gatsby-plugin-styled-components",
     "gatsby-plugin-react-helmet",
     "custom-bytes-subscriber-count-plugin",
+    "custom-plausible-plugin",
     {
       resolve: "gatsby-source-filesystem",
       options: {

plugins/custom-plausible-plugin/gatsby-browser.js

@@ -0,0 +1,15 @@
+exports.onRouteUpdate = function ({ location }) {
+  if (
+    process.env.NODE_ENV === `production` &&
+    typeof window.plausible === `object`
+  ) {
+    const pathIsExcluded =
+      location &&
+      typeof window.plausibleExcludePaths !== `undefined` &&
+      window.plausibleExcludePaths.some((rx) => rx.test(location.pathname));
+
+    if (pathIsExcluded) return null;
+
+    window.plausible("pageview");
+  }
+};

plugins/custom-plausible-plugin/gatsby-ssr.js

@@ -0,0 +1,25 @@
+const React = require("react");
+
+exports.onRenderBody = ({ setHeadComponents }) => {
+  if (process.env.NODE_ENV === "production") {
+    const scriptProps = {
+      defer: true,
+      "data-domain": "ui.dev",
+      src: `https://pl-proxy.uidotdev.workers.dev/js/script.js`,
+    };
+
+    return setHeadComponents([
+      <script key="custom-plausible-plugin" {...scriptProps}></script>,
+      <script
+        key="custom-plausible-plugin-custom-events"
+        dangerouslySetInnerHTML={{
+          __html: `
+          window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) };
+          `,
+        }}
+      />,
+    ]);
+  }
+
+  return null;
+};

plugins/custom-plausible-plugin/package.json

@@ -0,0 +1 @@
+{}