Plausible's new script not working

[hymair]

🐛 The bug

The changes done in #534 do not seem to work for us.

We see the elements added in the DOM with the correct script IDs, but no events are sent.

Our setup is basic:

export default defineNuxtConfig({
 scripts: {
 registry: {
 plausibleAnalytics: {
 scriptId: process.env.PLAUSIBLE_SCRIPT_ID!,
 },
 },
 },
})

Here are the elements added to the DOM:

1. link in head

<link href="https://plausible.io/js/pa-CORRECT_SCRIPT_ID.js" rel="preload" crossorigin="anonymous" referrerpolicy="no-referrer" fetchpriority="low" as="script">

2. script in head:

<script defer="" fetchpriority="low" crossorigin="anonymous" referrerpolicy="no-referrer" src="https://plausible.io/js/pa-CORRECT_SCRIPT_ID.js" data-onload="" data-onerror="" data-hid="plausibleAnalytics"></script>

3. nuxt context at end of body (relevant parts only):

{
 "public": {
 "nuxt-scripts": {
 "version": "",
 "defaultScriptOptions": { "trigger": "onNuxtReady" }
 },
 "scripts": {
 "plausibleAnalytics": { "scriptId": "CORRECT_SCRIPT_ID" }
 }
 }
}

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-pkwfkx?file=pages%2Findex.vue

🌈 Expected behavior

No repro, as I don't really know how to repro this without a plausible account and all.

We expect events to be logged. We were using @nuxtjs/plausible before (no script ids) and it worked fine.

ℹ️ Additional context

Plausible dashboard couldn't detect the installation either:

[MickL]

I just tried on localhost and I am a little too scared to deploy to production yet, because we are currently using @nuxtjs/plausible and I cant afford to have a downtime. Also it is crucial to proxy all events through Nitro to prevent ad blockers to block Plausible.

A few questions I do have, maybe @harlan-zw can help out?

1. When deploying to production, will the Plausible js script be bundled? Because a website should not load scripts from external sources in the EU.
2. Can all events sent to Plausible be proxied to Nuxt/Nitro server first? @nuxtjs/plausible has a poxy config value that does exactly that and sends all events to _plausible/api/event first. This option is very import IMO because ad-blockers will block events being sent to Plausible, but if it sent to the website one is currently browsing everything goes through.
3. Is this the recommended way to send a custom event? Docs are a bit confusing on that topic:```ts
   const { proxy } = useScriptPlausibleAnalytics();
   proxy.plausible('event', { name: 'conversion-step' })

If yes, why is it called proxy? And why does it contain another function that is then called plausible? Why not like this:

```ts
const { trackEvent } = useScriptPlausibleAnalytics();
trackEvent('event', { name: 'conversion-step' }) // Not sent on SSR and develop

Btw @hymair instead of accessing process.env directly I recommend you to just set NUXT_PUBLIC_SCRIPTS_PLAUSIBLE_ANALYTICS_SCRIPT_ID within .env file and then you dont have to set scriptId yourself.

[MickL]

@harlan-zw Thanks for the fix! I guess we need to wait for next Nuxt Scripts release to test it?

May you have time to answer my questions from above?
Also: How to disable Plausible? I dont see any enabled prop in the nuxt config options. Because I would like to disable Plausible on all other deployment environments that are not production (dev, staging, etc)

[harlan-zw]

1. If you have script bundling enabled, then yes.
2. I'm working on this at the moment, it will support all (compatible) scripts. It will be available in the same release.
3. The proxy accessor is explicit in that it's queing the request for when the script is loaded. If the script fails due to it being blocked or some other server error, it won't throw an exception on your page. Nuxt Scripts tries to stay as close as possible to the underlying scripts API to avoid the maintanence burden of implementing our own wrapper functions.

See production only on https://scripts.nuxt.com/scripts/analytics/plausible-analytics

[MickL]

@harlan-zw Thanks for the info, sounds good!

Just for the disable on non-production environment it doesnt work like that because every build is $production no matter if it is a build for staging deployment environment or production deployment environment.

Possibly it could work like this?

 scripts: {
 registry: {
 plausibleAnalytics: process.env.NUXT_SITE_ENV === 'production' ? true : 'mock',
 },
 },

or maybe with the new envName?

$env: {
 production: {
 scripts: {
 registry: {
 plausibleAnalytics: {
 scriptId: 'YOUR_SCRIPT_ID',
 }
 }
 }
 }
}

For local development it should be always disabled by default or no?