✨ feat(analytics): support new plausible script (#587)

Co-authored-by: welpo <welpo@users.noreply.github.com>

config.toml

@@ -387,7 +387,7 @@ service = "goatcounter"
 # Unique identifier for tracking.
 # For GoatCounter, this is the code you choose during signup.
 # For Umami, this is the website ID.
-# For Plausible, this is the domain name (e.g. "example.com").
+# For Plausible, this is the random script name without the extension (e.g. "pa-XXXXXX") or the domain name (legacy mode, e.g. "example.com").
 # Note: Leave this field empty if you're self-hosting GoatCounter.
 # id = "yourID"
 

content/blog/mastering-tabi-settings/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuració de tabi: guia completa"
 date = 2023-09-18
-updated = 2026-01-13
+updated = 2026-01-31
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -829,7 +829,9 @@ Pots configurar-los en la secció `[extra.analytics]` del teu arxiu `config.toml
 - `id`: l'identificador únic per al teu servei d'anàlisi. Això varia segons el servei:
   - Per a GoatCounter, és el codi triat durant el registre. Instàncies auto-allotjades de GoatCounter no requereixen aquest camp.
   - Per a Umami, és l'ID del lloc web.
-  - Per a Plausible, és el nom de domini.
+  - Per a Plausible, pot ser:
+    - **Format nou** (Plausible v3.1.0+): El nom d'script aleatori sense l'extensió (ex. `"pa-XXXXXX"`). Troba'l al teu panell de Plausible a Configuració → Detalls del lloc web → Nom de l'script.
+    - **Format heretat**: El teu nom de domini (ex. `"example.com"`). Útil si necessites enviar estadístiques a múltiples panells simultàniament; el nou format no admet aquesta funcionalitat. Consulta la [guia d'actualització d'scripts de Plausible](https://plausible.io/docs/script-update-guide) per a més detalls.
 
 - `self_hosted_url`: Opcional. Utilitza aquest camp per especificar l'URL si tens una instància auto-allotjada. L'URL base variarà segons la teva configuració particular. Alguns exemples:
   - Per a GoatCounter: `"https://stats.example.com"`

content/blog/mastering-tabi-settings/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuración de tabi: guía completa"
 date = 2023-09-18
-updated = 2026-01-13
+updated = 2026-01-31
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -832,7 +832,9 @@ Puedes configurarlos en la sección `[extra.analytics]` de tu archivo `config.to
 - `id`: el identificador único para tu servicio de análisis. Esto varía según el servicio:
   - Para GoatCounter, es el código elegido durante el registro. Instancias auto-alojadas de GoatCounter no requieren este campo.
   - Para Umami, es la ID del sitio web.
-  - Para Plausible, es el nombre de dominio.
+  - Para Plausible, puede ser:
+    - **Formato nuevo** (Plausible v3.1.0+): El nombre de script aleatorio sin la extensión (ej. `"pa-XXXXXX"`). Encuéntralo en tu panel de Plausible en Ajustes → Detalles del sitio web → Nombre del script.
+    - **Formato heredado**: Tu nombre de dominio (ej. `"example.com"`). Útil si necesitas enviar estadísticas a múltiples paneles simultáneamente; el nuevo formato no admite esta funcionalidad. Consulta la [guía de actualización de scripts de Plausible](https://plausible.io/docs/script-update-guide) para más detalles.
 
 - `self_hosted_url`. Opcional. Utiliza este campo para especificar la URL si tienes una instancia auto-alojada. La URL base variará según tu configuración particular. Algunos ejemplos:
   - Para GoatCounter: `"https://stats.example.com"`

content/blog/mastering-tabi-settings/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Mastering tabi Settings: A Comprehensive Guide"
 date = 2023-09-18
-updated = 2026-01-13
+updated = 2026-01-31
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -840,7 +840,9 @@ You can set them up in the `[extra.analytics]` section of your `config.toml`.
 - `id`: The unique identifier for your analytics service. This varies based on the service:
   - For GoatCounter, it's the code chosen during signup. Self-hosted instances of GoatCounter don't require this field.
   - For Umami, it's the website ID.
-  - For Plausible, it's the domain name.
+  - For Plausible, it's either:
+    - **New format** (Plausible v3.1.0+): The random script name without the extension (e.g. `"pa-XXXXXX"`). Find this in your Plausible dashboard under Settings → Website Details → Script name.
+    - **Legacy format**: Your domain name (e.g. `"example.com"`). Use this if you need to send stats to multiple dashboards simultaneously, as the new format doesn't support this feature. See [Plausible's script update guide](https://plausible.io/docs/script-update-guide) for details.
 
 - `self_hosted_url`: Optional. Use this field to specify the URL for self-hosted instances of your chosen analytics service. The base URL differs based on your specific setup. Some examples:
   - For GoatCounter: `"https://stats.example.com"`

static/js/initializePlausible.js

@@ -0,0 +1,12 @@
+// Initialise Plausible analytics queue for the new script format (v3.1.0+).
+// This sets up a queue system that collects tracking calls before the main
+// Plausible script loads, ensuring no events are lost.
+window.plausible = window.plausible || function () {
+    (plausible.q = plausible.q || []).push(arguments);
+};
+// Initialise the Plausible configuration object.
+plausible.init = plausible.init || function (config) {
+    plausible.o = config || {};
+};
+// Set up Plausible with default configuration.
+plausible.init();

static/js/initializePlausible.min.js

@@ -0,0 +1 @@
+window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}},plausible.init();

templates/partials/analytics.html

@@ -28,11 +28,17 @@
     {% if config.extra.analytics.do_not_track %}data-do-not-track="true"{% endif %}>
     </script>
 
-    {% elif analytics_service == "plausible" %}
+{% elif analytics_service == "plausible" %}
+{% if analytics_id is matching("^pa-[^\.]+$") %}
+    {# Use new script available in Plausible 3.1.0 or later #}
+    <script defer src="{{ get_url(path='js/initializePlausible.min.js', trailing_slash=false) | safe }}"></script>
+    <script defer src="{% if self_hosted_url %}{{ self_hosted_url ~ '/js/' }}{% else %}https://plausible.io/js/{% endif %}{{ analytics_id }}.js"></script>
+{% else %}
     <script
         defer
         data-domain="{{ analytics_id }}"
         src="{% if self_hosted_url %}{{ self_hosted_url ~ '/js/plausible.js' }}{% else %}https://plausible.io/js/script.js{% endif %}"
     ></script>
+{% endif %}
 
 {% endif %}

theme.toml

@@ -333,7 +333,7 @@ custom_subset = true
 # Unique identifier for tracking.
 # For GoatCounter, this is the code you choose during signup.
 # For Umami, this is the website ID.
-# For Plausible, this is the domain name (e.g. "example.com").
+# For Plausible, this is the random script name without the extension (e.g. "pa-XXXXXX") or the domain name (legacy mode, e.g. "example.com").
 # Note: Leave this field empty if you're self-hosting GoatCounter.
 # id = "yourID"