improve analytics

This commit is contained in:
Chuck Dries 2021-06-28 12:26:14 -07:00
parent de72997986
commit 60c788cda5
4 changed files with 25 additions and 0 deletions

View File

@ -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';

View File

@ -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/');
}
}

View File

@ -16,6 +16,8 @@ export default function HTML(props) {
/>
{props.headComponents}
{env === 'production' && <script async data-domain="chuckdries.com" defer src="https://analytics.chuckdries.com/js/plausible.js"></script>}
{/* eslint-disable-next-line */}
{env === 'production' && <script>{`window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }`}</script>}
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}

View File

@ -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);