From 60c788cda579f783b3fb8212de0fee30f3324127 Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Mon, 28 Jun 2021 12:26:14 -0700 Subject: [PATCH] improve analytics --- gatsby-browser.js | 9 +++++++++ src/components/GalleryImage.js | 13 +++++++++++++ src/html.js | 2 ++ src/pages/index.js | 1 + 4 files changed, 25 insertions(+) diff --git a/gatsby-browser.js b/gatsby-browser.js index 7b42130..5c00eff 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -5,6 +5,15 @@ const env = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || 'developmen if (env === 'production') { posthog.init('HR8Gte105aCHNx2BqhL1XkbvH9kzKGptxjkbhuTj6Ek', { api_host: 'https://posthog.chuckdries.com' }); } +exports.onRouteUpdate = function () { + if ( + process.env.NODE_ENV === 'production' && + typeof window.plausible === 'object' + ) { + window.plausible('pageview'); + posthog.capture('$pageview'); + } +}; // import * as React from 'react'; // import { MDXProvider } from '@mdx-js/react'; diff --git a/src/components/GalleryImage.js b/src/components/GalleryImage.js index 461c454..fb4b70a 100644 --- a/src/components/GalleryImage.js +++ b/src/components/GalleryImage.js @@ -12,6 +12,15 @@ import { import { GatsbyImage, getImage } from 'gatsby-plugin-image'; import { Helmet } from 'react-helmet'; import classnames from 'classnames'; +import posthog from 'posthog-js'; + +const logKeyShortcut = (keyCode: string) => { + try { + // eslint-disable-next-line + posthog.capture('[key shortcut]', { keyCode }); + window.plausible('KeyShortcut', {props: { keyCode }}); + } catch (e) {/* do nothing */} +}; const GalleryImage = ({ data, pageContext }) => { const image = data.allFile.edges[0].node; @@ -19,14 +28,17 @@ const GalleryImage = ({ data, pageContext }) => { React.useEffect(() => { const keyListener = (e) => { + switch (e.code) { case 'ArrowRight': { + logKeyShortcut(e.code); if (pageContext.nextImage) { navigate(`/photogallery/${pageContext.nextImage}/`); } return; } case 'ArrowLeft': { + logKeyShortcut(e.code); if (pageContext.prevImage) { navigate(`/photogallery/${pageContext.prevImage}/`); } @@ -34,6 +46,7 @@ const GalleryImage = ({ data, pageContext }) => { } case 'Escape': case 'KeyG': { + logKeyShortcut(e.code); navigate('/photogallery/'); } } diff --git a/src/html.js b/src/html.js index 6af661d..e4e3a7f 100644 --- a/src/html.js +++ b/src/html.js @@ -16,6 +16,8 @@ export default function HTML(props) { /> {props.headComponents} {env === 'production' && } + {/* eslint-disable-next-line */} + {env === 'production' && } {props.preBodyComponents} diff --git a/src/pages/index.js b/src/pages/index.js index 89ee5a3..082cb9d 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -37,6 +37,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => { try { // eslint-disable-next-line posthog.capture('[shuffle image]', { currentImage: currentImage?.base }); + window.plausible('Shuffle', {props: { currentImage: currentImage?.base }}); } catch (e) {/* do nothing */} } const index = getDifferentRand(images.length, lastThreeImages);