middleware: add data-pathname attribute for custom pathname handling

Modified middleware to support the `data-pathname` attribute, ensuring it can be used to customize the pathname sent with tracking events.

Author: tinydaniel

README.md

@@ -58,6 +58,7 @@ These parameters can be used with the tracker snippet:
 | `data-proxy-url`  | No        | A complete proxy URL endpoint for the tracking request. Use this when you need to specify a custom tracking endpoint beyond just the domain. Cannot be used together with `data-proxy`.             |
 | `data-host`       | No        | Tinybird host URL. Defaults to `https://api.tinybird.co/`, but could be `https://api.us-east.tinybird.co` or a dedicated cluster. The banner already generates the snippet with the proper host.  |
 | `data-datasource` | No        | If you iterate the landing data source, or you just want to ingest the event in a different one, you can specify the landing data source name. 
+| `data-pathname`   | No        | Override the `pathname` field sent with every event. Useful for SPAs where `window.location` is polluted with campaign parameters, or when you need to send a virtual/canonical URL (e.g. a content ID instead of the full path). 
 | `web-vitals`      | No        | Tracks web vitals using the [web-vitals](https://www.npmjs.com/package/web-vitals) library 
 
 ### Implementing custom attributes

middleware/src/index.js

@@ -11,14 +11,15 @@
   let globalAttributes = {}
   let stringifyPayload = true
 
-  let proxy, proxyUrl, token, host, domain, tenantId
+  let proxy, proxyUrl, token, host, domain, tenantId, customPathname
   if (document.currentScript) {
     host = document.currentScript.getAttribute('data-host')
     proxy = document.currentScript.getAttribute('data-proxy')
     proxyUrl = document.currentScript.getAttribute('data-proxy-url')
     token = document.currentScript.getAttribute('data-token')
     domain = document.currentScript.getAttribute('data-domain') || ''
     tenantId = document.currentScript.getAttribute('data-tenant-id') || ''
+    customPathname = document.currentScript.getAttribute('data-pathname') || ''
 
     // Check if both proxy and proxyUrl are specified
     if (proxy && proxyUrl) {
@@ -322,7 +323,7 @@
         locale,
         location: country,
         referrer: document.referrer,
-        pathname: window.location.pathname,
+        pathname: customPathname || window.location.pathname,
         href: window.location.href,
       })
     }, 300)
@@ -339,7 +340,7 @@
           rating: metric.rating,
           id: metric.id,
           navigationType: metric.navigationType,
-          pathname: window.location.pathname,
+          pathname: customPathname || window.location.pathname,
           href: window.location.href,
           'user-agent': window.navigator.userAgent,
           locale,