Introducing ember-plausible

README.md

@@ -28,11 +28,15 @@ Next we clone this repository, install the dependencies, and boot the developmen
 You can visit the live reloading site at http://localhost:4200
 
 ## Configuration via docker environment variables
+
 This frontend can be configured at runtime. It will get the environment variables prefixed by EMBER_ and match them with the variables defined in the frontend's configuration. When the docker container is started it will update /app/index.html to match the provided configuration.
 
-### analytics through plausible
-* `EMBER_ANALYTICS_APP_DOMAIN`: domain the app is deployed on, e.g. "gelinkt-notuleren.vlaanderen.be". 
-* `EMBER_ANALYTICS_PLAUSIBLE_SCRIPT`: url of the script provided by your plausible instance, e.g. "https://analytics.mydomain.com/js/plausible.js"
+### Analytics through Plausible
+
+Plausible analytics is handled by the [ember-plausible addon](https://github.com/redpencilio/ember-plausible).
+
+* `EMBER_PLAUSIBLE_APP_DOMAIN`: domain the app is deployed on, e.g. "gelinkt-notuleren.vlaanderen.be". 
+* `EMBER_PLAUSIBLE_API_ENDPOINT`: URL of the Plausible instance to post analytics data, e.g. "https://analytics.mydomain.com"
 
 ### authentication through ACM/IDM
 * `EMBER_OAUTH_API_KEY`

app/routes/application.js

@@ -1,20 +1,36 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import ENV from 'frontend-gelinkt-notuleren/config/environment';
 
 const featureFlagRegex = /^feature\[(.+)\]$/;
 
 export default class ApplicationRoute extends Route {
   @service currentSession;
   @service features;
   @service session;
+  @service plausible;
 
   async beforeModel(transition) {
     this.updateFeatureFlags(transition.to.queryParams);
-
+    await this.startAnalytics();
     await this.session.setup();
     return this.loadCurrentSession();
   }
 
+  async startAnalytics() {
+    const conf = ENV['ember-plausible'];
+    // RegEx for matching some word in curly braces which are usually not part of a hostname
+    const regex = /\{\{\w*\}\}/;
+    // If config exists, application in production and config with proper data filled in
+    if (
+      conf &&
+      ENV.environment === 'production' &&
+      !regex.test(conf.domain) &&
+      !regex.test(conf.apiHost)
+    )
+      return this.plausible.enable(conf);
+  }
+
   loadCurrentSession() {
     return this.currentSession.load().catch(() => this.session.invalidate());
   }

config/environment.js

@@ -21,17 +21,22 @@ module.exports = function (environment) {
         allowedInputDateFormats: ['DD/MM/YYYY', 'DD-MM-YYYY', 'DD.MM.YYYY'],
         outputDateFormat: 'D MMMM YYYY',
       },
-      analytics: {
-        appDomain: '{{ANALYTICS_APP_DOMAIN}}',
-        plausibleScript: '{{ANALYTICS_PLAUSIBLE_SCRIPT}}',
-      },
     },
     roadsignRegulationPlugin: {
       endpoint: '{{MOW_REGISTRY_ENDPOINT}}',
     },
     templateVariablePlugin: {
       endpoint: '{{MOW_REGISTRY_ENDPOINT}}',
     },
+    'ember-plausible': {
+      enabled: false,
+      domain: '{{PLAUSIBLE_APP_DOMAIN}}',
+      apiHost: '{{PLAUSIBLE_API_ENDPOINT}}',
+      trackLocalhost: true,
+      hashMode: false,
+      enableAutoPageviewTracking: true,
+      enableAutoOutboundTracking: true,
+    },
     manual: {
       baseUrl: '{{MANUAL_BASE_URL}}',
       notuleren: '{{MANUAL_NOTULEREN}}',