Test out fetch-with-keepalive on plausible.io (#5005)

* Test out fetch-with-keepalive on plausible.io

Fetch with keepalive is a
[widely-supported](https://developer.mozilla.org/en-US/docs/Web/API/Request/keepalive)
which indicates whether the browser will keep the associated request alive if the page that initiated it is unloaded before the request is complete.

We're hoping it will improve event capture rates for `pageleave` and
`pageview` events when the user closes the tab

To use it, we also need to start using `fetch` (with fallback to xhr).

For extra safety, we will only deploy this on `plausible.io` initially.
This will ensure that if there are issues we will be able to react
without affecting any other customers.

TODO after this PR:
- [ ] Companion docs PR
- [ ] Purge bunny cache
- [ ] Make fetch the default request method without data-property

* Mark some code conditional

Author: macobo

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>

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);
@@ -221,6 +222,27 @@
     }
     {{/if}}
 
+    sendRequest(endpoint, payload, options)
+  }
+
+  function sendRequest(endpoint, payload, options) {
+    {{#if pageleave}}
+    if (allowFetch && window.fetch) {
+      fetch(endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'text/plain'
+        },
+        keepalive: true,
+        body: JSON.stringify(payload)
+      }).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');
@@ -232,6 +254,7 @@
         options && options.callback && options.callback({status: request.status})
       }
     }
+
   }
 
   var queue = (window.plausible && window.plausible.q) || []