✨ feat(analytics): support new plausible script

config.toml

@@ -383,7 +383,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.md

@@ -835,7 +835,7 @@ 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 the random script name without the extension (e.g. `"pa-XXXXXX"`) or the domain name (legacy mode).
 
 - `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"`

templates/partials/analytics.html

@@ -29,10 +29,19 @@
     </script>
 
 {% elif analytics_service == "plausible" %}
+{% if analytics_id is matching("^pa-[^\.]+$") %}
+    {# Use new script available in Plausible 3.1.0 or later #}
+    <script async src="{% if self_hosted_url %}{{ self_hosted_url ~ '/js/' }}{% else %}https://plausible.io/js/{% endif %}{{ analytics_id }}.js"></script>
+    <script>
+        window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
+        plausible.init()
+    </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

@@ -331,7 +331,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"