Remove Google Analytics and replace it with Plausible

Daniel15 · Nov 23, 2023 · 3d875e6 · 3d875e6
1 parent 7246c8e
commit 3d875e6
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 64 deletions.
diff --git a/src/DnsTools.Web/ClientApp/package.json b/src/DnsTools.Web/ClientApp/package.json
@@ -11,7 +11,6 @@
     "@sentry/cli": "^1.69.1",
     "@sentry/react": "^7.81.1",
     "@sentry/webpack-plugin": "^2.10.1",
-    "@types/google.analytics": "^0.0.40",
     "@types/grecaptcha": "^3.0.0",
     "@types/jest": "24.0.19",
     "@types/node": "12.11.1",
@@ -26,6 +25,7 @@
     "downshift": "^3.4.8",
     "flag-icon-css": "^3.4.5",
     "node-sass": "^5.0.0",
+    "plausible-tracker": "^0.3.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-google-charts": "^3.0.15",

diff --git a/src/DnsTools.Web/ClientApp/public/index.html b/src/DnsTools.Web/ClientApp/public/index.html
@@ -11,16 +11,6 @@
 
     <link rel="apple-touch-icon" href="logo192.png" />
     <link rel="manifest" href="/manifest.json" />
-    <script>
-		if (navigator.userAgent !== 'ReactSnap') {
-			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-			})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-			ga('create', 'UA-25623237-9', 'auto');
-			ga('send', 'pageview');
-		}
-    </script>
 </head>
 <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/DnsTools.Web/ClientApp/src/App.tsx b/src/DnsTools.Web/ClientApp/src/App.tsx
@@ -19,7 +19,7 @@ import Traceroute from './pages/Traceroute';
 import Whois from './pages/Whois';
 
 const connection = new HubConnectionBuilder()
-  .withUrl(`${apiUrl}hub`)
+  .withUrl(`${apiUrl}/hub`)
   .withAutomaticReconnect()
   .build();
 

diff --git a/src/DnsTools.Web/ClientApp/src/analytics.ts b/src/DnsTools.Web/ClientApp/src/analytics.ts
@@ -0,0 +1,44 @@
+import type {EventOptions, PlausibleOptions} from 'plausible-tracker';
+import Plausible from 'plausible-tracker';
+import {init as sentryInit} from '@sentry/react';
+
+import {apiUrl, sentryJS as SentryConfig} from './config';
+
+const shouldLog =
+  (!__DEV__ || document.location.search.includes('enable_logging')) &&
+  navigator.userAgent !== 'ReactSnap';
+
+// Use a no-op trackEvent() in dev or when running ReactSnap
+let trackEvent: (
+  eventName: string,
+  options?: EventOptions,
+  eventData?: PlausibleOptions,
+) => void = () => {};
+
+// Error logging
+if (shouldLog) {
+  sentryInit({
+    dsn: SentryConfig.dsn,
+    debug: __DEV__,
+    environment: __DEV__ ? 'development' : 'production',
+    tracesSampleRate: 0.0,
+    tunnel: `${apiUrl}/error/log`,
+  });
+
+  // Analytics
+  const {
+    enableAutoPageviews,
+    enableAutoOutboundTracking,
+    trackEvent: realTrackEvent,
+  } = Plausible({
+    apiHost: __DEV__ ? 'https://hits.d.sb' : apiUrl,
+    domain: 'dnstools.ws',
+    trackLocalhost: true,
+  });
+
+  enableAutoPageviews();
+  enableAutoOutboundTracking();
+  trackEvent = realTrackEvent;
+}
+
+export {trackEvent};
diff --git a/src/DnsTools.Web/ClientApp/src/components/CAPTCHA.tsx b/src/DnsTools.Web/ClientApp/src/components/CAPTCHA.tsx
@@ -51,7 +51,7 @@ export default function CAPTCHA(props: Props) {
     async recaptchaResponse => {
       try {
         onVerifyStarted();
-        const rawResponse = await fetch(`${apiUrl}captcha`, {
+        const rawResponse = await fetch(`${apiUrl}/captcha`, {
           credentials: 'include',
           body: 'response=' + encodeURIComponent(recaptchaResponse),
           headers: {

diff --git a/src/DnsTools.Web/ClientApp/src/components/NavigationSideEffects.tsx b/src/DnsTools.Web/ClientApp/src/components/NavigationSideEffects.tsx
@@ -1,23 +1,14 @@
-import {useEffect, useRef} from 'react';
+import {useEffect} from 'react';
 import {useLocation} from 'react-router-dom';
 
 /**
  * Side effects (eg. logging) that occur when client-side page navigation occurs.
  */
 export default function NavigationSideEffects() {
   const {pathname, search} = useLocation();
-  const hasInitialized = useRef(false);
   useEffect(() => {
     // Scroll to the top on route change
     window.scrollTo(0, 0);
-
-    // Tell Google Analytics that the page has changed, but not for initial
-    // load (as it does that for us automatically).
-    if (hasInitialized.current && pathname !== '/blank') {
-      ga('set', 'page', pathname);
-      ga('send', 'pageview');
-    }
-    hasInitialized.current = true;
   }, [pathname, search]);
   return null;
 }
diff --git a/src/DnsTools.Web/ClientApp/src/components/PromotedServerProviders.tsx b/src/DnsTools.Web/ClientApp/src/components/PromotedServerProviders.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {commaSeparate} from '../utils/react';
 import WithHovercard from './WithHovercard';
+import {trackEvent} from '../analytics';
 
 // Keep these in alphabetical order.
 const providers = [
@@ -50,15 +51,14 @@ export default function FooterHostingProviders() {
             tooltipBody={provider.tooltip}>
             <a
               href={`${provider.url}?utm_source=dnstools&utm_medium=footer&utm_campaign=dnstools-footer-links`}
-              target="blank"
+              rel="noreferrer"
+              target="_blank"
               onClick={() => {
-                ga(
-                  'send',
-                  'event',
-                  'Hosting Provider Link',
-                  'click',
-                  provider.name,
-                );
+                trackEvent('Hosting Provider Link', {
+                  props: {
+                    provider_name: provider.name,
+                  },
+                });
               }}>
               {provider.name}
             </a>

diff --git a/src/DnsTools.Web/ClientApp/src/components/WorkerLocation.tsx b/src/DnsTools.Web/ClientApp/src/components/WorkerLocation.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {WorkerConfig} from '../utils/workers';
 import CountryFlag from './CountryFlag';
 import WithHovercard from './WithHovercard';
+import {trackEvent} from '../analytics';
 
 type Props = Readonly<{
   flagSize?: number;
@@ -28,13 +29,11 @@ export default function WorkerLocation({flagSize, worker}: Props) {
             target="_blank"
             rel="nofollow noopener"
             onClick={() => {
-              ga(
-                'send',
-                'event',
-                'Hosting Provider Link (Location)',
-                'click',
-                worker.providerName,
-              );
+              trackEvent('Hosting Provider Link (Location)', {
+                props: {
+                  provider_name: worker.providerName,
+                },
+              });
             }}>
             {worker.providerName}
           </a>{' '}

diff --git a/src/DnsTools.Web/ClientApp/src/config.ts b/src/DnsTools.Web/ClientApp/src/config.ts
@@ -8,8 +8,9 @@ import {
 
 export {defaultWorker, googleMapsKey, ReCaptcha, sentryJS, workers};
 
-export const apiUrl = /^(localhost|dnstools.test)/.test(
-  window.location.hostname,
-)
-  ? 'https://localhost:5011/'
-  : 'https://api.dnstools.ws/';
+export let apiUrl = 'https://api.dnstools.ws';
+if (/^(localhost|dnstools.test)/.test(window.location.hostname)) {
+  apiUrl = 'https://localhost:5011';
+} else if (window.location.hostname.includes('staging')) {
+  apiUrl = 'https://api.staging.dnstools.ws';
+}
diff --git a/src/DnsTools.Web/ClientApp/src/index.tsx b/src/DnsTools.Web/ClientApp/src/index.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {ErrorBoundary as SentryErrorBoundary} from '@sentry/react';
+
 import './index.scss';
+import './analytics';
 import App from './App';
-import {
-  init as sentryInit,
-  ErrorBoundary as SentryErrorBoundary,
-} from '@sentry/react';
-import {apiUrl, sentryJS as SentryConfig} from './config';
 
 const appWithErrorBoundary = (
   <SentryErrorBoundary
@@ -34,13 +32,3 @@ if (rootElement.hasChildNodes()) {
 } else {
   ReactDOM.render(appWithErrorBoundary, rootElement);
 }
-
-if (!__DEV__ || document.location.search.includes('enable_error_logging')) {
-  sentryInit({
-    dsn: SentryConfig.dsn,
-    debug: __DEV__,
-    environment: __DEV__ ? 'development' : 'production',
-    tracesSampleRate: 0.0,
-    tunnel: `${apiUrl}error/log`,
-  });
-}
diff --git a/src/DnsTools.Web/ClientApp/src/pages/Whois.tsx b/src/DnsTools.Web/ClientApp/src/pages/Whois.tsx
@@ -36,7 +36,7 @@ export default function Whois(props: Props) {
         setResults(null);
         setError(null);
         setShowCaptcha(false);
-        const rawResponse = await fetch(`${apiUrl}data/whois/${host}/`, {
+        const rawResponse = await fetch(`${apiUrl}/data/whois/${host}/`, {
           credentials: 'include',
         });
         const response = await rawResponse.text();

diff --git a/src/DnsTools.Web/ClientApp/yarn.lock b/src/DnsTools.Web/ClientApp/yarn.lock
@@ -2007,11 +2007,6 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/google.analytics@^0.0.40":
-  version "0.0.40"
-  resolved "https://registry.yarnpkg.com/@types/google.analytics/-/google.analytics-0.0.40.tgz#35526e9d78333423c430ade1c821ce54d0f0f850"
-  integrity sha512-R3HpnLkqmKxhUAf8kIVvDVGJqPtaaZlW4yowNwjOZUTmYUQEgHh8Nh5wkSXKMroNAuQM8gbXJHmNbbgA8tdb7Q==
-
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@@ -9625,6 +9620,11 @@ [email protected]:
   dependencies:
     find-up "^3.0.0"
 
+plausible-tracker@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/plausible-tracker/-/plausible-tracker-0.3.8.tgz#9b8b322cc41e0e1d6473869ef234deea365a5a40"
+  integrity sha512-lmOWYQ7s9KOUJ1R+YTOR3HrjdbxIS2Z4de0P/Jx2dQPteznJl2eX3tXxKClpvbfyGP59B5bbhW8ftN59HbbFSg==
+
 [email protected]:
   version "1.6.4"
   resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"

diff --git a/src/DnsTools.Web/nginx/nginx.conf b/src/DnsTools.Web/nginx/nginx.conf
@@ -55,6 +55,22 @@ server {
 		return 301 https://dnstools.ws/;
 	}
 
+	# Plausible logging
+	location = /api/event {
+		proxy_pass https://hits.d.sb/api/event;
+		proxy_set_header Host hits.d.sb;
+		proxy_buffering on;
+		proxy_http_version 1.1;
+
+		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+		proxy_set_header X-Forwarded-Proto $scheme;
+		proxy_set_header X-Forwarded-Host $host;
+		proxy_set_header Host hits.d.sb;
+		proxy_ssl_name hits.d.sb;
+		proxy_ssl_server_name on;
+		proxy_ssl_session_reuse off;
+	}
+
 	location / {
 		include /var/www/dnstools/nginx/aspnet.conf;
 	}