Use fetch over XMLHttpRequest in plausible.js (#5025)

`fetch` allows us to use the keepalive flag, which more reliably delivers data to us. It's also required for reliable scroll depth capturing down the line. The only major browser not to support fetch is Internet Explorer. Clients who care about IE traffic can use the `.compat` variant of our script (documented in https://plausible.io/docs/script-extensions#scriptcompatjs). As of this commit, IE makes up less than ~0.003% of incoming traffic to plausible.
plausible · Feb 3, 2025 · de62f80 · de62f80
1 parent 62c6cb5
commit de62f80
Show file tree

Hide file tree

Showing 14 changed files with 26 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@ 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
@@ -5,7 +5,6 @@
       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
@@ -11,7 +11,6 @@
   {{/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);
@@ -248,8 +247,20 @@
   }
 
   function sendRequest(endpoint, payload, options) {
-    {{#if pageleave}}
-    if (allowFetch && window.fetch) {
+    {{#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) {
       fetch(endpoint, {
         method: 'POST',
         headers: {
@@ -260,23 +271,8 @@
       }).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
@@ -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" data-allow-fetch></script>
+  <script defer data-exclude='/*#*/hash/**/ignored' src="/tracker/js/plausible.exclusions.hash.local.pageleave.js"></script>
 </head>
 
 <body>

diff --git 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" data-allow-fetch></script>
+  <script id="plausible-script" defer src="/tracker/js/plausible.hash.local.pageleave.pageview-props.js"></script>
 </head>
 
 <body>

diff --git 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" data-allow-fetch></script>
+  <script defer src="/tracker/js/plausible.hash.local.pageleave.js"></script>
   <script>
 
   </script>

diff --git 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" data-allow-fetch></script>
+  <script defer src="/tracker/js/plausible.local.manual.pageleave.js"></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
@@ -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" data-allow-fetch></script>
+  <script defer event-author="John" src="/tracker/js/plausible.local.pageleave.pageview-props.js"></script>
 </head>
 
 <body>

diff --git 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" data-allow-fetch></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js"></script>
 </head>
 
 <body>

diff --git 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" data-allow-fetch></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js"></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
@@ -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" data-allow-fetch></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js"></script>
 </head>
 <body>
   <br>

diff --git 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" data-allow-fetch></script>
+  <script defer src="/tracker/js/plausible.hash.local.pageleave.js"></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
@@ -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" data-allow-fetch></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js"></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
@@ -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" data-allow-fetch></script>
+  <script defer src="/tracker/js/plausible.local.pageleave.js"></script>
   <title>Document</title>
 </head>
 <body>