chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve analytics

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
gatsby-browser.js
View File

@ -5,6 +5,15 @@ const env = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || 'developmen
if (env === 'production') { if (env === 'production') {
posthog.init('HR8Gte105aCHNx2BqhL1XkbvH9kzKGptxjkbhuTj6Ek', { api_host: 'https://posthog.chuckdries.com' }); 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 * as React from 'react';
// import { MDXProvider } from '@mdx-js/react'; // import { MDXProvider } from '@mdx-js/react';

13
src/components/GalleryImage.js
View File

@ -12,6 +12,15 @@ import {
import { GatsbyImage, getImage } from 'gatsby-plugin-image'; import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import classnames from 'classnames'; 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 GalleryImage = ({ data, pageContext }) => {
const image = data.allFile.edges[0].node; const image = data.allFile.edges[0].node;
@ -19,14 +28,17 @@ const GalleryImage = ({ data, pageContext }) => {
React.useEffect(() => { React.useEffect(() => {
const keyListener = (e) => { const keyListener = (e) => {
switch (e.code) { switch (e.code) {
case 'ArrowRight': { case 'ArrowRight': {
logKeyShortcut(e.code);
if (pageContext.nextImage) { if (pageContext.nextImage) {
navigate(`/photogallery/${pageContext.nextImage}/`); navigate(`/photogallery/${pageContext.nextImage}/`);
} }
return; return;
} }
case 'ArrowLeft': { case 'ArrowLeft': {
logKeyShortcut(e.code);
if (pageContext.prevImage) { if (pageContext.prevImage) {
navigate(`/photogallery/${pageContext.prevImage}/`); navigate(`/photogallery/${pageContext.prevImage}/`);
} }
@ -34,6 +46,7 @@ const GalleryImage = ({ data, pageContext }) => {
} }
case 'Escape': case 'Escape':
case 'KeyG': { case 'KeyG': {
logKeyShortcut(e.code);
navigate('/photogallery/'); navigate('/photogallery/');
} }
} }

2
src/html.js
View File

@ -16,6 +16,8 @@ export default function HTML(props) {
/> />
{props.headComponents} {props.headComponents}
{env === 'production' && <script async data-domain="chuckdries.com" defer src="https://analytics.chuckdries.com/js/plausible.js"></script>} {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> </head>
<body {...props.bodyAttributes}> <body {...props.bodyAttributes}>
{props.preBodyComponents} {props.preBodyComponents}

1
src/pages/index.js
View File

@ -37,6 +37,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
try { try {
// eslint-disable-next-line // eslint-disable-next-line
posthog.capture('[shuffle image]', { currentImage: currentImage?.base }); posthog.capture('[shuffle image]', { currentImage: currentImage?.base });
window.plausible('Shuffle', {props: { currentImage: currentImage?.base }});
} catch (e) {/* do nothing */} } catch (e) {/* do nothing */}
} }
const index = getDifferentRand(images.length, lastThreeImages); const index = getDifferentRand(images.length, lastThreeImages);