From d6da6b45d9a50c183a81bee54be781b950fc28bc Mon Sep 17 00:00:00 2001
From: Karl-Aksel Puulmann <macobo@users.noreply.github.com>
Date: Tue, 4 Feb 2025 09:08:17 +0200
Subject: [PATCH] Revert "Use `fetch` over `XMLHttpRequest` in plausible.js
 (#5025)"

This reverts commit de62f8056461f5fcc702ab54981681ebd4913d67.
---
 CHANGELOG.md                                  |  1 -
 .../templates/layout/_tracking.html.heex      |  1 +
 tracker/src/plausible.js                      | 32 +++++++++++--------
 .../fixtures/pageleave-hash-exclusions.html   |  2 +-
 .../pageleave-hash-pageview-props.html        |  2 +-
 tracker/test/fixtures/pageleave-hash.html     |  2 +-
 tracker/test/fixtures/pageleave-manual.html   |  2 +-
 .../fixtures/pageleave-pageview-props.html    |  2 +-
 tracker/test/fixtures/pageleave.html          |  2 +-
 .../scroll-depth-content-onscroll.html        |  2 +-
 .../scroll-depth-dynamic-content-load.html    |  2 +-
 tracker/test/fixtures/scroll-depth-hash.html  |  2 +-
 .../scroll-depth-slow-window-load.html        |  2 +-
 tracker/test/fixtures/scroll-depth.html       |  2 +-
 14 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b3bea9a34aa6..59d7b2ca717b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,7 +19,6 @@ All notable changes to this project will be documented in this file.
 - Filters appear in the search bar as ?f=is,page,/docs,/blog&f=... instead of ?filters=((is,page,(/docs,/blog)),...) for Plausible links sent on various platforms to work reliably.
 - Details modal search inputs are now case-insensitive.
 - Improved report performance in cases where site has a lot of unique pathnames
-- Plausible script now uses `fetch` with keepalive flag as default over `XMLHttpRequest`. This will ensure more reliable tracking. Reminder to use `compat` script variant if tracking Internet Explorer is required.
 
 ### Fixed
 
diff --git a/lib/plausible_web/templates/layout/_tracking.html.heex b/lib/plausible_web/templates/layout/_tracking.html.heex
index 4db5c84388d1..9401e064eb7c 100644
--- a/lib/plausible_web/templates/layout/_tracking.html.heex
+++ b/lib/plausible_web/templates/layout/_tracking.html.heex
@@ -5,6 +5,7 @@
       data-api={PlausibleWeb.Dogfood.api_destination()}
       data-domain={PlausibleWeb.Dogfood.domain(@conn)}
       src={PlausibleWeb.Dogfood.script_url()}
+      data-allow-fetch
     >
     </script>
     <script>
diff --git a/tracker/src/plausible.js b/tracker/src/plausible.js
index 3fc4a40c87da..80ff4eca9c1c 100644
--- a/tracker/src/plausible.js
+++ b/tracker/src/plausible.js
@@ -11,6 +11,7 @@
   {{/if}}
   var endpoint = scriptEl.getAttribute('data-api') || defaultEndpoint(scriptEl)
   var dataDomain = scriptEl.getAttribute('data-domain')
+  var allowFetch = scriptEl.hasAttribute('data-allow-fetch')
 
   function onIgnoredEvent(eventName, reason, options) {
     if (reason) console.warn('Ignoring Event: ' + reason);
@@ -247,20 +248,8 @@
   }
 
   function sendRequest(endpoint, payload, options) {
-    {{#if compat}}
-    var request = new XMLHttpRequest();
-    request.open('POST', endpoint, true);
-    request.setRequestHeader('Content-Type', 'text/plain');
-
-    request.send(JSON.stringify(payload));
-
-    request.onreadystatechange = function() {
-      if (request.readyState === 4) {
-        options && options.callback && options.callback({status: request.status})
-      }
-    }
-    {{else}}
-    if (window.fetch) {
+    {{#if pageleave}}
+    if (allowFetch && window.fetch) {
       fetch(endpoint, {
         method: 'POST',
         headers: {
@@ -271,8 +260,23 @@
       }).then(function(response) {
         options && options.callback && options.callback({status: response.status})
       })
+
+      return
     }
     {{/if}}
+
+    var request = new XMLHttpRequest();
+    request.open('POST', endpoint, true);
+    request.setRequestHeader('Content-Type', 'text/plain');
+
+    request.send(JSON.stringify(payload));
+
+    request.onreadystatechange = function() {
+      if (request.readyState === 4) {
+        options && options.callback && options.callback({status: request.status})
+      }
+    }
+
   }
 
   var queue = (window.plausible && window.plausible.q) || []
diff --git a/tracker/test/fixtures/pageleave-hash-exclusions.html b/tracker/test/fixtures/pageleave-hash-exclusions.html
index aecca154e936..267ee43b68b2 100644
--- a/tracker/test/fixtures/pageleave-hash-exclusions.html
+++ b/tracker/test/fixtures/pageleave-hash-exclusions.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer data-exclude='/*#*/hash/**/ignored' src="/tracker/js/plausible.exclusions.hash.local.pageleave.js"></script>
+  <script defer data-exclude='/*#*/hash/**/ignored' src="/tracker/js/plausible.exclusions.hash.local.pageleave.js" data-allow-fetch></script>
 </head>
 
 <body>
diff --git a/tracker/test/fixtures/pageleave-hash-pageview-props.html b/tracker/test/fixtures/pageleave-hash-pageview-props.html
index 651acdb034d8..1d4da17ed819 100644
--- a/tracker/test/fixtures/pageleave-hash-pageview-props.html
+++ b/tracker/test/fixtures/pageleave-hash-pageview-props.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script id="plausible-script" defer src="/tracker/js/plausible.hash.local.pageleave.pageview-props.js"></script>
+  <script id="plausible-script" defer src="/tracker/js/plausible.hash.local.pageleave.pageview-props.js" data-allow-fetch></script>
 </head>
 
 <body>
diff --git a/tracker/test/fixtures/pageleave-hash.html b/tracker/test/fixtures/pageleave-hash.html
index e164362ccf29..a0a596589804 100644
--- a/tracker/test/fixtures/pageleave-hash.html
+++ b/tracker/test/fixtures/pageleave-hash.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer src="/tracker/js/plausible.hash.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.hash.local.pageleave.js" data-allow-fetch></script>
   <script>
 
   </script>
diff --git a/tracker/test/fixtures/pageleave-manual.html b/tracker/test/fixtures/pageleave-manual.html
index f87f00b322cd..e730c6d0e658 100644
--- a/tracker/test/fixtures/pageleave-manual.html
+++ b/tracker/test/fixtures/pageleave-manual.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer src="/tracker/js/plausible.local.manual.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.local.manual.pageleave.js" data-allow-fetch></script>
   <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
 </head>
 
diff --git a/tracker/test/fixtures/pageleave-pageview-props.html b/tracker/test/fixtures/pageleave-pageview-props.html
index c2c9cd11e374..256f7e8e1316 100644
--- a/tracker/test/fixtures/pageleave-pageview-props.html
+++ b/tracker/test/fixtures/pageleave-pageview-props.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer event-author="John" src="/tracker/js/plausible.local.pageleave.pageview-props.js"></script>
+  <script defer event-author="John" src="/tracker/js/plausible.local.pageleave.pageview-props.js" data-allow-fetch></script>
 </head>
 
 <body>
diff --git a/tracker/test/fixtures/pageleave.html b/tracker/test/fixtures/pageleave.html
index a8d415e62f43..d7abc10369e0 100644
--- a/tracker/test/fixtures/pageleave.html
+++ b/tracker/test/fixtures/pageleave.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer src="/tracker/js/plausible.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js" data-allow-fetch></script>
 </head>
 
 <body>
diff --git a/tracker/test/fixtures/scroll-depth-content-onscroll.html b/tracker/test/fixtures/scroll-depth-content-onscroll.html
index 588776c2cf47..2849ed23dcea 100644
--- a/tracker/test/fixtures/scroll-depth-content-onscroll.html
+++ b/tracker/test/fixtures/scroll-depth-content-onscroll.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer src="/tracker/js/plausible.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js" data-allow-fetch></script>
 </head>
 
 <body>
diff --git a/tracker/test/fixtures/scroll-depth-dynamic-content-load.html b/tracker/test/fixtures/scroll-depth-dynamic-content-load.html
index 6cd3a77185dc..5edeeea9df09 100644
--- a/tracker/test/fixtures/scroll-depth-dynamic-content-load.html
+++ b/tracker/test/fixtures/scroll-depth-dynamic-content-load.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
-  <script defer src="/tracker/js/plausible.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js" data-allow-fetch></script>
 </head>
 <body>
   <br>
diff --git a/tracker/test/fixtures/scroll-depth-hash.html b/tracker/test/fixtures/scroll-depth-hash.html
index 359ba5548cba..62f62d401b53 100644
--- a/tracker/test/fixtures/scroll-depth-hash.html
+++ b/tracker/test/fixtures/scroll-depth-hash.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Plausible Playwright tests</title>
-  <script defer src="/tracker/js/plausible.hash.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.hash.local.pageleave.js" data-allow-fetch></script>
 </head>
 
 <body>
diff --git a/tracker/test/fixtures/scroll-depth-slow-window-load.html b/tracker/test/fixtures/scroll-depth-slow-window-load.html
index eea2a5fa29d4..1638f0627856 100644
--- a/tracker/test/fixtures/scroll-depth-slow-window-load.html
+++ b/tracker/test/fixtures/scroll-depth-slow-window-load.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
-  <script defer src="/tracker/js/plausible.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js" data-allow-fetch></script>
 </head>
 <body>
   <a id="navigate-away" href="/manual.html">
diff --git a/tracker/test/fixtures/scroll-depth.html b/tracker/test/fixtures/scroll-depth.html
index 23aad7c4aa88..2800bf016c17 100644
--- a/tracker/test/fixtures/scroll-depth.html
+++ b/tracker/test/fixtures/scroll-depth.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script defer src="/tracker/js/plausible.local.pageleave.js"></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js" data-allow-fetch></script>
   <title>Document</title>
 </head>
 <body>