Make analytics part of the bundle

Instead of loading an external script, put the logic in the bundle itself
This gives us more control over it, so now we:
 - do not include project IDs
 - delay events until idle

src/lib/analytics.js

@@ -1,4 +1,49 @@
-// tw: disable analytics entirely
+const plausibleHost = process.env.PLAUSIBLE_HOST;
+const plausibleDomain = process.env.PLAUSIBLE_DOMAIN;
+const isLocalhost = false && /^localhost$|^127(?:\.[0-9]+){0,2}\.[0-9]+$|^(?:0*:)*?:?0*1$/.test(location.hostname);
+const isFile = location.protocol === 'file:';
+const enabled = plausibleHost && plausibleDomain && !isLocalhost && !isFile;
+
+if (enabled) {
+    const sendEvent = eventName => {
+        // Delay analytics events until idle, we don't need to run them immediately.
+        (window.requestIdleCallback || window.setTimeout)(() => {
+            const url = new URL(location.href);
+
+            url.pathname = url.pathname
+                // Don't include project IDs
+                .replace(/\d/g, '')
+                // Removing project IDs might result in multiple slashes: //editor, so merge multiple slashes into one
+                .replace(/\/+/g, '/');
+
+            const req = new XMLHttpRequest();
+            req.open('POST', `${plausibleHost}/api/event`, true);
+            req.setRequestHeader('Content-Type', 'text/plain');
+            req.send(JSON.stringify({
+                n: eventName,
+                u: url.href,
+                d: plausibleDomain,
+                r: document.referrer || null,
+                w: window.innerWidth
+            }));
+        });
+    };
+    
+    const trackPageview = () => {
+        sendEvent('pageview');
+    };
+    
+    const originalPushState = history.pushState;
+    history.pushState = (a, b, c) => {
+        originalPushState.call(history, a, b, c);
+        trackPageview();
+    };
+    window.addEventListener('popstate', trackPageview);
+    
+    trackPageview();
+}
+
+// Mock GoogleAnalytics to disable Scratch's events
 const GoogleAnalytics = {
     event () {}
 };

src/playground/index.ejs

@@ -28,9 +28,6 @@
         </script>
         <!-- /Sentry -->
     <% } %>
-    <% if (htmlWebpackPlugin.options.plausible) { %>
-      <script async defer data-domain="<%= htmlWebpackPlugin.options.plausible.domain %>" src="https://<%= htmlWebpackPlugin.options.plausible.host %>/js/plausible.js"></script>
-    <% } %>
   </head>
   <body>
     <div id="splash" aria-hidden="true">

webpack.config.js

@@ -144,7 +144,9 @@ module.exports = [
                 'process.env.DEBUG': Boolean(process.env.DEBUG),
                 'process.env.ANNOUNCEMENT': process.env.ANNOUNCEMENT ? '"' + process.env.ANNOUNCEMENT + '"' : '""',
                 'process.env.ROOT': JSON.stringify(root),
-                'process.env.ROUTING_STYLE': JSON.stringify(process.env.ROUTING_STYLE || 'filehash')
+                'process.env.ROUTING_STYLE': JSON.stringify(process.env.ROUTING_STYLE || 'filehash'),
+                'process.env.PLAUSIBLE_HOST': JSON.stringify(process.env.PLAUSIBLE_HOST),
+                'process.env.PLAUSIBLE_DOMAIN': JSON.stringify(process.env.PLAUSIBLE_DOMAIN)
             }),
             new HtmlWebpackPlugin({
                 chunks: ['editor'],