Moved telemetry code to script.

components/layout/Footer.js

@@ -1,15 +1,15 @@
-import React from 'react';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import styles from './Footer.module.css';
 import useStore from 'store/version';
 import { HOMEPAGE_URL, REPO_URL } from 'lib/constants';
-import useConfig from 'hooks/useConfig';
 
 export default function Footer() {
   const { current } = useStore();
-  const { telemetryDisabled } = useConfig();
+  const { pathname } = useRouter();
 
   return (
     <footer className={classNames(styles.footer, 'row')}>
@@ -30,7 +30,7 @@ export default function Footer() {
       <div className={classNames(styles.version, 'col-12 col-md-4')}>
         <Link href={REPO_URL}>{`v${current}`}</Link>
       </div>
-      {telemetryDisabled && <img src={`https://i.umami.is/a.png?v=${current}`} alt="" />}
+      {!pathname.includes('/share/') && <Script src={`/telemetry.js?v=${current}`} />}
     </footer>
   );
 }

lib/constants.js

@@ -9,6 +9,7 @@ export const SHARE_TOKEN_HEADER = 'x-umami-share-token';
 export const HOMEPAGE_URL = 'https://umami.is';
 export const REPO_URL = 'https://github.com/umami-software/umami';
 export const UPDATES_URL = 'https://api.umami.is/v1/updates';
+export const TELEMETRY_PIXEL = 'https://i.umami.is/a.png';
 
 export const DEFAULT_LOCALE = 'en-US';
 export const DEFAULT_THEME = 'light';

next.config.js

@@ -56,14 +56,13 @@ module.exports = {
         source: '/:path*',
         headers,
       },
+    ];
+  },
+  async rewrites() {
+    return [
       {
-        source: `/(.*\\.js)`,
-        headers: [
-          {
-            key: 'Cache-Control',
-            value: 'public, max-age=2592000', // 30 days
-          },
-        ],
+        source: '/telemetry.js',
+        destination: '/api/scripts/telemetry',
       },
     ];
   },

pages/api/scripts/telemetry.js

@@ -0,0 +1,14 @@
+import { TELEMETRY_PIXEL } from 'lib/constants';
+
+export default function handler(req, res) {
+  const { v } = req.query;
+  res.setHeader('content-type', 'text/javascript');
+  res.send(
+    `(() => {
+      const i = document.createElement('img');
+      i.setAttribute('src','${TELEMETRY_PIXEL}?v=${v}');
+      i.setAttribute('style','width:0;height:0;position:absolute;pointer-events:none;');
+      document.body.appendChild(i);
+    })();`,
+  );
+}