Add (optional) plausible analytics

docs/customise-client/api.md

@@ -26,7 +26,8 @@ A useful reference may be the [customisation JSON file](https://github.com/nexts
 * `splashComponent` a (relative) path to a JS file exporting a React component to be rendered as the splash page. See below.
 * `browserTitle` The browser title for the page. Defaults to "auspice" if not defined.
 * `finePrint` String of Markdown to add to the "fine print" at the bottom of pages.
-* `googleAnalyticsKey` You can specify a Google Analytics key to enable (some) analytics functionality. More documentation to come.
+* `plausibleDataDomain` plausible.io analytics (see below)
+* `googleAnalyticsKey` You can specify a Google Analytics key to enable (some) analytics functionality. This is deprecated and will be removed from an upcoming release.
 * `serverAddress` Specify the address / prefix which the auspice client uses for API requests.
 * `mapTiles` Specify the address (and other information) for the tiles used to render the map.
 
@@ -152,3 +153,14 @@ If you are distributing your own version of auspice (i.e. not running it locally
 Please see [this discussion post](https://discussion.nextstrain.org/t/build-with-newest-nextstrain-ncov-has-api-requests-to-mapbox-403-forbidden/396/11?u=james) for a hands-on guide to setting custom map tile info.
 For some examples of other tile sets you may use, see the [OpenStreetMap wiki](https://wiki.openstreetmap.org/wiki/Tile_servers), and please remember to adhere to the licenses and terms of use for each tile server.
 The API address contains parameters as specified by the [Leaflet API](https://docs.mapbox.com/api/overview/).
+
+---
+
+### Tracking Analytics
+
+Auspice has in-built support for [Plausible Analytics](https://plausible.io/docs).
+To enable this you will need to provide the `plausibleDataDomain` in your extensions.
+The analytics are not included when running Auspice in development mode.
+
+Auspice has support for Google Analytics but this is deprecated and will be removed in a future release.
+Google Analytics run when the `googleAnalyticsKey` extension is set and only run in production mode.

src/components/framework/head.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from "react-redux";
 import { Helmet } from "react-helmet";
-
+import { PLAUSIBLE_DATA_DOMAIN, PLAUSIBLE_SRC } from "../../util/plausible";
 import { hasExtension, getExtension } from "../../util/extensions";
 
 const Head = ({metadata}) => {
@@ -25,6 +25,10 @@ const Head = ({metadata}) => {
       {metadata && metadata.title ?
         <meta name="description" content={metadata.title} /> :
         null}
+
+      {(PLAUSIBLE_DATA_DOMAIN && PLAUSIBLE_SRC) &&
+        <script async defer data-domain={PLAUSIBLE_DATA_DOMAIN} src={PLAUSIBLE_SRC} />}
+
     </Helmet>
   );
 };

src/util/plausible.js

@@ -0,0 +1,16 @@
+import {hasExtension, getExtension} from './extensions';
+
+export const [PLAUSIBLE_DATA_DOMAIN, PLAUSIBLE_SRC] = (() => {
+
+  if (!hasExtension("plausibleDataDomain")) {
+    return [undefined, undefined];
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn("Not using plausible analytics are we are in development mode");
+    return [undefined, undefined];
+  }
+
+  return [getExtension("plausibleDataDomain"), 'https://plausible.io/js/script.js'];
+
+})();

webpack.config.js

@@ -61,6 +61,9 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyze
     directoriesToTransform.push(dir);
     // console.log("directoriesToTransform", directoriesToTransform);
     extensionData = JSON.parse(fs.readFileSync(extensionPath, {encoding: 'utf8'}));
+    if (extensionData.googleAnalyticsKey) {
+      console.log(`DEPRECATION WARNING: your extensions define a Google Analytics key (${extensionData.googleAnalyticsKey}) but GA will be removed from a future release.`);
+    }
     // console.log("extensionData", extensionData);
   }