switch tracking

.env.sample

@@ -1,4 +1,6 @@
-GATSBY_GITHUB_TOKEN=your_token
+GITHUB_TOKEN=your_token
 GATSBY_MAPBOX_ACCESS_TOKEN=
 GATSBY_TYPEKIT_ID=xxx
-INFURA_ID=xxx
+GATSBY_UMAMI_SCRIPT_URL=xxx
+GATSBY_UMAMI_WEBSITE_ID=xxx
+GATSBY_INFURA_ID=xxx

.github/workflows/ci.yml

@@ -44,6 +44,9 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           GATSBY_TYPEKIT_ID: ${{ secrets.GATSBY_TYPEKIT_ID }}
           GATSBY_MAPBOX_ACCESS_TOKEN: ${{ secrets.GATSBY_MAPBOX_ACCESS_TOKEN }}
+          GATSBY_UMAMI_SCRIPT_URL: ${{ secrets.GATSBY_UMAMI_SCRIPT_URL }}
+          GATSBY_UMAMI_WEBSITE_ID: ${{ secrets.GATSBY_UMAMI_WEBSITE_ID }}
+          GATSBY_INFURA_ID: ${{ secrets.GATSBY_INFURA_ID }}
       - run: npm test
 
       - uses: actions/upload-artifact@v3

README.md

@@ -23,7 +23,6 @@
   - [📝 GitHub changelog rendering](#-github-changelog-rendering)
   - [🌗 Theme Switcher](#-theme-switcher)
   - [🏆 SEO component](#-seo-component)
-  - [📈 Matomo (formerly Piwik) analytics tracking](#-matomo-formerly-piwik-analytics-tracking)
   - [gatsby-redirect-from](#gatsby-redirect-from)
   - [💎 Importing SVG assets](#-importing-svg-assets)
   - [🍬 Typekit component](#-typekit-component)
@@ -134,12 +133,6 @@ If you want to know how this works, have a look at the respective component unde
 
 - [`src/components/atoms/SEO.jsx`](src/components/atoms/SEO.jsx)
 
-### 📈 Matomo (formerly Piwik) analytics tracking
-
-Site sends usage statistics to my own [Matomo](https://matomo.org) installation. To make this work in Gatsby, I created and open sourced a plugin which is in use on this site.
-
-- [gatsby-plugin-matomo](https://github.com/kremalicious/gatsby-plugin-matomo)
-
 ### gatsby-redirect-from
 
 - [gatsby-redirect-from](https://github.com/kremalicious/gatsby-redirect-from)

gatsby-config.ts

@@ -135,15 +135,6 @@ const config: GatsbyConfig = {
         }
       }
     },
-    {
-      resolve: 'gatsby-plugin-matomo',
-      options: {
-        siteId: '1',
-        matomoUrl: 'https://analytics.kremalicious.com',
-        siteUrl: `${siteConfig.siteUrl}`,
-        trackLoad: false
-      }
-    },
     {
       resolve: 'gatsby-plugin-manifest',
       options: {

gatsby-ssr.tsx

@@ -1,5 +1,24 @@
+import React from 'react'
 import { GatsbySSR } from 'gatsby'
 import wrapPageElementWithLayout from './src/helpers/wrapPageElement'
+import { UMAMI_SCRIPT_URL, UMAMI_WEBSITE_ID } from './src/helpers/umami'
 
 export const wrapPageElement: GatsbySSR['wrapPageElement'] =
   wrapPageElementWithLayout
+
+export const onRenderBody = ({ setPostBodyComponents }) => {
+  const isEnabled = process.env.NODE_ENV === 'production'
+
+  if (!isEnabled) {
+    return null
+  }
+
+  const options = {
+    src: UMAMI_SCRIPT_URL,
+    'data-website-id': UMAMI_WEBSITE_ID
+  }
+
+  return setPostBodyComponents([
+    <script key="umami-script" async defer {...options} />
+  ])
+}

package-lock.json

@@ -25,7 +25,6 @@
         "gatsby-plugin-image": "^3.0.0",
         "gatsby-plugin-lunr": "^1.5.2",
         "gatsby-plugin-manifest": "^5.0.0",
-        "gatsby-plugin-matomo": "^0.14.0",
         "gatsby-plugin-meta-redirect": "^1.1.1",
         "gatsby-plugin-offline": "^6.0.0",
         "gatsby-plugin-react-helmet": "^6.0.0",
@@ -18506,16 +18505,6 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
-    "node_modules/gatsby-plugin-matomo": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/gatsby-plugin-matomo/-/gatsby-plugin-matomo-0.14.0.tgz",
-      "integrity": "sha512-zRC+hfqYv5DUXsAnfuEV3x2SkyP/ou/jy9TDxRA3NnxarpBpM+i3h6Rcc4nMmsPq+lEJiQqhBSapw4MTjwqS2A==",
-      "peerDependencies": {
-        "gatsby": "^4.0.0 || ^5.0.0",
-        "react": ">=17.0.0",
-        "react-dom": ">=17.0.0"
-      }
-    },
     "node_modules/gatsby-plugin-meta-redirect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-meta-redirect/-/gatsby-plugin-meta-redirect-1.1.1.tgz",
@@ -52358,12 +52347,6 @@
         }
       }
     },
-    "gatsby-plugin-matomo": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/gatsby-plugin-matomo/-/gatsby-plugin-matomo-0.14.0.tgz",
-      "integrity": "sha512-zRC+hfqYv5DUXsAnfuEV3x2SkyP/ou/jy9TDxRA3NnxarpBpM+i3h6Rcc4nMmsPq+lEJiQqhBSapw4MTjwqS2A==",
-      "requires": {}
-    },
     "gatsby-plugin-meta-redirect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-meta-redirect/-/gatsby-plugin-meta-redirect-1.1.1.tgz",

package.json

@@ -43,7 +43,6 @@
     "gatsby-plugin-image": "^3.0.0",
     "gatsby-plugin-lunr": "^1.5.2",
     "gatsby-plugin-manifest": "^5.0.0",
-    "gatsby-plugin-matomo": "^0.14.0",
     "gatsby-plugin-meta-redirect": "^1.1.1",
     "gatsby-plugin-offline": "^6.0.0",
     "gatsby-plugin-react-helmet": "^6.0.0",

src/helpers/rainbowkit.ts

@@ -5,7 +5,7 @@ import { publicProvider } from 'wagmi/providers/public'
 
 export const { chains, provider } = configureChains(
   [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
-  [infuraProvider({ apiKey: process.env.INFURA_ID }), publicProvider()]
+  [infuraProvider({ apiKey: process.env.GATSBY_INFURA_ID }), publicProvider()]
 )
 
 export const { connectors } = getDefaultWallets({

src/helpers/umami.ts

@@ -0,0 +1,8 @@
+const UMAMI_SCRIPT_URL = process.env.GATSBY_UMAMI_SCRIPT_URL
+const UMAMI_WEBSITE_ID = process.env.GATSBY_UMAMI_WEBSITE_ID
+
+if (!UMAMI_SCRIPT_URL || !UMAMI_WEBSITE_ID) {
+  throw new Error('Missing Umami environment variables')
+}
+
+export { UMAMI_SCRIPT_URL, UMAMI_WEBSITE_ID }