Refactor Plausible configuration and update app settings

.env.example

@@ -2,6 +2,7 @@ GITHUB_TOKEN=
 
 # Plausible
 BASE_URL=http://plausible.localhost
-PLAUSIBLE_DOMAIN=http://plausible.localhost
+PLAUSIBLE_DATA_DOMAIN=http://backstage.localhost
+PLAUSIBLE_SOURCE_DOMAIN=http://plausible.localhost
 SECRET_KEY_BASE=
 TOTP_VAULT_KEY=

app-config.production.yaml

@@ -34,4 +34,6 @@ catalog:
       target: ../../examples/acme-corp.yaml
 
 plausible:
-  domain: ${PLAUSIBLE_DOMAIN}
+  enabled: true
+  dataDomain: ${PLAUSIBLE_DATA_DOMAIN}
+  sourceDomain: ${PLAUSIBLE_SOURCE_DOMAIN}

app-config.yaml

@@ -73,5 +73,4 @@ catalog:
     - allow: [Component, System, API, Resource, Location, Template, User, Group]
 
 plausible:
-  enabled: true
-  domain: ${PLAUSIBLE_DOMAIN}
+  enabled: false

plugins/plausible/config.d.ts

@@ -8,6 +8,11 @@ export interface Config {
     /**
      * @visibility frontend
      */
-    domain: string;
+    dataDomain: string;
+
+    /**
+     * @visibility frontend
+     */
+    sourceDomain: string;
   };
 }

plugins/plausible/src/components/PlausibleAnalytics.tsx

@@ -4,17 +4,13 @@ import React from 'react';
 export const PlausibleAnalytics = () => {
   const config = useApi(configApiRef);
   const enabled = config.getOptionalBoolean('plausible.enabled') ?? false;
-  const domain = config.getOptionalString('plausible.domain');
+  const dataDomain = config.getOptionalString('plausible.dataDomain');
+  const sourceDomain = config.getOptionalString('plausible.sourceDomain');
+  const source = `https://${sourceDomain}/js/script.js`;
 
-  if (!enabled || !domain) {
+  if (!enabled || !dataDomain || !sourceDomain) {
     return null;
   }
 
-  return (
-    <script
-      defer
-      data-domain={domain}
-      src="https://plausible.io/js/script.js"
-    />
-  );
+  return <script defer data-domain={dataDomain} src={source} />;
 };

plugins/plausible/src/plugin.test.tsx

@@ -38,7 +38,8 @@ describe('PlausibleAnalytics', () => {
     const config = mockConfigApi({
       plausible: {
         enabled: true,
-        domain: 'example.com',
+        dataDomain: 'example.com',
+        sourceDomain: 'plausible.example.com',
       },
     });
     const { container } = render(
@@ -51,7 +52,7 @@ describe('PlausibleAnalytics', () => {
     expect(scriptTag).toHaveAttribute('data-domain', 'example.com');
     expect(scriptTag).toHaveAttribute(
       'src',
-      'https://plausible.io/js/script.js',
+      'https://plausible.example.com/js/script.js',
     );
     expect(scriptTag).toHaveAttribute('defer');
   });