feat: plausible analytics integration

bootstrap.cjs

@@ -29,6 +29,9 @@ async function bootstrap() {
 		["VITE_VERSION", appVersion],
 		["VITE_GIT_BRANCH", gitBranch],
 		["VITE_GIT_COMMIT", gitCommitHashShort],
+		// ['VITE_PLAUSIBLE_ENABLE', true],
+		// ['VITE_PLAUSIBLE_DOMAIN', 'PLAUSIBLE_DOMAIN'],
+		// ['VITE_PLAUSIBLE_API_HOST', 'https://plausible.io']
 	];
 
 	const isProd = args.length >= 2 && (args[1] === "build" || args[1] === "preview");

package.json

@@ -25,6 +25,7 @@
 		"@linaria/react": "6.0.0",
 		"@reduxjs/toolkit": "^2.1.0",
 		"dayjs": "^1.11.10",
+		"plausible-tracker": "^0.3.8",
 		"react": "^18.2.0",
 		"react-device-detect": "^2.2.3",
 		"react-dom": "^18.2.0",

src/index.tsx

@@ -4,13 +4,16 @@ import { Provider as Redux } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
 import store from "state";
 
+import { plausibleBootstrap } from "lib/analytics";
 import "lib/styles/global/index.scss";
 
 import { HaloProvider } from "view/components";
 
 import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
 import App from "./App";
 
+plausibleBootstrap();
+
 const rootElement = document.getElementById("root");
 const root = createRoot(rootElement as HTMLElement);
 

src/lib/analytics.ts

@@ -0,0 +1,43 @@
+import Plausible, { type EventOptions, type PlausibleOptions } from "plausible-tracker";
+
+// Add all custom events/goals here.
+export type PlausibleEvents = "pageview";
+
+/**
+ * Plausible Analytics - https://plausible.io.
+ *
+ * Enable and configure env in `/bootstrap.cjs`.
+ */
+export const plausible = Plausible({
+	domain: env.plausible.domain || location.hostname,
+	apiHost: env.plausible.apiHost || "https://plausible.io",
+	hashMode: false,
+	trackLocalhost: true
+});
+
+export const trackEvent = (
+	eventName: PlausibleEvents,
+	options?: EventOptions,
+	eventData?: PlausibleOptions
+) => {
+	if (!env.plausible.enable) return;
+	plausible.trackEvent(eventName, options, eventData);
+};
+
+export const enableAutoPageviews = () => {
+	if (!env.plausible.enable) return;
+	plausible.enableAutoPageviews();
+};
+
+export const enableAutoOutboundTracking = (
+	targetNode?: (Node & ParentNode) | undefined,
+	observerInit?: MutationObserverInit | undefined
+) => {
+	if (!env.plausible.enable) return;
+	plausible.enableAutoOutboundTracking(targetNode, observerInit);
+};
+
+export const plausibleBootstrap = () => {
+	enableAutoPageviews();
+	enableAutoOutboundTracking();
+};

src/lib/global/env.ts

@@ -15,6 +15,11 @@ export const env = {
 	isDevelopment: import.meta.env.MODE === "development",
 	isProduction: import.meta.env.MODE === "production",
 	isTesting: import.meta.env.MODE === "test" || import.meta.env.MODE === "testing",
+	plausible: {
+		enable: import.meta.env.VITE_PLAUSIBLE_ENABLE === "true",
+		domain: import.meta.env.VITE_PLAUSIBLE_DOMAIN,
+		apiHost: import.meta.env.VITE_PLAUSIBLE_API_HOST
+	},
 	// Features
 	timerIncrement: import.meta.env.VITE_FEATURE_INCREMENT,
 	someOtherFeature: false

yarn.lock

@@ -3194,6 +3194,7 @@ __metadata:
     css: ^3.0.0
     dayjs: ^1.11.10
     happy-dom: 13.3.1
+    plausible-tracker: ^0.3.8
     prettier: 3.2.4
     react: ^18.2.0
     react-device-detect: ^2.2.3
@@ -6150,6 +6151,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"plausible-tracker@npm:^0.3.8":
+  version: 0.3.8
+  resolution: "plausible-tracker@npm:0.3.8"
+  checksum: 066dd51586922fabbd70e4cfdeff77356669bf57852cd3cbc00d813938ed6637669ee615a1d7b865090550de61fc58bffb6e7c3e6d99f361ec7312d316033194
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.4.32":
   version: 8.4.33
   resolution: "postcss@npm:8.4.33"