help with a workaround for data-domain deprecation

[airedwin]

in the new script, there is no longer a data-domain variable which is problematic for me as my app is deployed into multiple domain (ie: dev, test, prod)
since it is a frontend react app, the code is compiled and i used to be able to build a different version of my app for each domain easily by specificying something like data-domain="%VITE_DATA_DOMAIN%"
it becomes somewhat cumbersome to have to save (in this case) three version of the .js file and then reference each for each build

any ideas on a reasonable alternative?

[manimovassagh]

The data-domain attribute was removed in newer versions of the Plausible script because the script is now tied to a specific site via the script URL itself (each site gets its own script endpoint).

For your multi-environment React setup, here are a few approaches:

Option 1: Use separate Plausible sites per environment

Register dev.yourapp.com, test.yourapp.com, and yourapp.com as separate sites in Plausible. The newer script auto-detects the domain from window.location.hostname, so it will route to the correct site automatically — no data-domain needed. This is probably the cleanest approach if you use different domains per environment.

Option 2: Dynamic script injection via env variable

Instead of a static script tag, inject it dynamically based on the build environment:

// PlausibleScript.jsx
export function PlausibleScript() {
  const scriptUrl = import.meta.env.VITE_PLAUSIBLE_SCRIPT_URL;
  if (!scriptUrl) return null;
  
  return <script defer src={scriptUrl} />;
}

Then in each environment's .env:

# .env.development
VITE_PLAUSIBLE_SCRIPT_URL=https://plausible.yourdomain.com/js/script.js

# .env.production
VITE_PLAUSIBLE_SCRIPT_URL=https://plausible.yourdomain.com/js/script.js

Option 3: Use the data-api attribute

If all environments share one Plausible instance, you can use the same script but point to different API endpoints or use a proxy script per environment:

<script defer src="/js/script.js" data-api="/api/event"></script>

Then configure your reverse proxy in each environment to route /api/event to Plausible with the correct site identifier.

Option 1 is the simplest if you have different domains per environment, since the auto-detection replaces what data-domain used to do.