Add ability to use Plausible(.io) for tracking

Does not track unless explicitly configured by search.xml. Tracks initial page view on search and article page, as well as the submitted pattern and filters. (i.e. word and filters, but not pagination, sorting, grouping, etc.).
INL · Sep 13, 2022 · a00ce8d · a00ce8d
1 parent 7d9c948
commit a00ce8d
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 65 deletions.
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -75,6 +75,7 @@
     "urijs": "^1.19.7",
     "v-tooltip": "2.0.2",
     "vue": "^2.6.10",
+    "vue-plausible": "^1.3.2",
     "vue-rx": "^6.0.1",
     "vue-slider-component": "^2.8.1",
     "vuex": "^3.6.2",

diff --git a/src/frontend/src/article.ts b/src/frontend/src/article.ts
@@ -10,6 +10,8 @@ import HighchartsExportingData from 'highcharts/modules/export-data';
 import HighchartsBoost from 'highcharts/modules/boost';
 
 import URI from 'urijs';
+//@ts-ignore
+import VuePlausible from 'vue-plausible/lib/esm/vue-plugin.js';
 
 import * as RootStore from '@/store/article';
 import ArticlePageComponent from '@/pages/article/ArticlePage.vue';
@@ -36,7 +38,17 @@ HighchartsExporting(Highcharts);
 HighchartsExportingData(Highcharts);
 HighchartsBoost(Highcharts);
 
-Vue.use(HighchartsVue);
+declare const PLAUSIBLE_DOMAIN: string|undefined;
+declare const PLAUSIBLE_APIHOST: string|undefined;
+if (PLAUSIBLE_DOMAIN && PLAUSIBLE_APIHOST) {
+	Vue.use(VuePlausible, {
+		domain: PLAUSIBLE_DOMAIN,
+		trackLocalhost: true,
+		apiHost: PLAUSIBLE_APIHOST,
+	});
+	//@ts-ignore
+	Vue.$plausible.trackPageview();
+}Vue.use(HighchartsVue);
 
 $(document).ready(() => {
 	RootStore.init();

diff --git a/src/frontend/src/search.tsx b/src/frontend/src/search.tsx
@@ -7,6 +7,8 @@ import Vue from 'vue';
 
 // @ts-ignore
 import VTooltip from 'v-tooltip';
+//@ts-ignore
+import VuePlausible from 'vue-plausible/lib/esm/vue-plugin.js';
 
 import Filters from '@/components/filters';
 
@@ -135,7 +137,7 @@ function initQueryBuilder() {
 // --------------
 Vue.config.productionTip = false;
 Vue.config.errorHandler = (err, vm, info) => {
-	if (err.message !== '[vuex] Do not mutate vuex store state outside mutation handlers.') { // already logged and annoying
+	if (!err.message.includes('[vuex]' /* do not mutate vuex store state outside mutation handlers */)) { // already logged and annoying
 		ga('send', 'exception', { exDescription: err.message, exFatal: true });
 		console.error(err);
 	} else {
@@ -162,6 +164,18 @@ Vue.mixin({
 	// tslint:enable
 });
 
+
+declare const PLAUSIBLE_DOMAIN: string|undefined;
+declare const PLAUSIBLE_APIHOST: string|undefined;
+if (PLAUSIBLE_DOMAIN && PLAUSIBLE_APIHOST) {
+	Vue.use(VuePlausible, {
+		domain: PLAUSIBLE_DOMAIN,
+		trackLocalhost: true,
+		apiHost: PLAUSIBLE_APIHOST,
+	});
+	//@ts-ignore
+	Vue.$plausible.trackPageview();
+}
 Vue.use(Filters);
 Vue.use(VTooltip, {
 	popover: {

diff --git a/src/frontend/src/store/search/streams.ts b/src/frontend/src/store/search/streams.ts
@@ -23,6 +23,7 @@ import * as Api from '@/api';
 import * as BLTypes from '@/types/blacklabtypes';
 import jsonStableStringify from 'json-stable-stringify';
 import { debugLog } from '@/utils/debug';
+import Vue from 'vue';
 
 type QueryState = {
 	params?: BLTypes.BLSearchParameters,
@@ -307,9 +308,7 @@ export default () => {
 				query: state.query
 			}
 		}),
-		v => {
-			url$.next(cloneDeep(v));
-		},
+		v => url$.next(cloneDeep(v)),
 		{
 			immediate: true,
 			deep: true

diff --git a/src/main/java/nl/inl/corpuswebsite/utils/WebsiteConfig.java b/src/main/java/nl/inl/corpuswebsite/utils/WebsiteConfig.java
@@ -94,6 +94,9 @@ public String toString() {
     /** Google analytics key, analytics are disabled if not provided */
     private final Optional<String> analyticsKey;
 
+    private final Optional<String> plausibleDomain;
+    private final Optional<String> plausibleApiHost;
+
     /** Link to put in the top bar */
     private final List<LinkInTopBar> linksInTopBar;
 
@@ -111,55 +114,59 @@ public String toString() {
      */
 
     public WebsiteConfig(File configFile, Optional<CorpusConfig> corpusConfig, String contextPath) throws ConfigurationException {
-    	 Parameters parameters = new Parameters();
-         ConfigurationBuilder<XMLConfiguration> cb = new FileBasedConfigurationBuilder<>(XMLConfiguration.class)
-                 .configure(parameters.fileBased()
-                 .setFile(configFile)
-                 .setListDelimiterHandler(new DisabledListDelimiterHandler())
-                 .setPrefixLookups(new HashMap<String, Lookup>(ConfigurationInterpolator.getDefaultPrefixLookups()) {{
-                     put("request", key -> {
-                         switch (key) {
-                             case "contextPath": return contextPath;
-                             case "corpusId": return corpusConfig.map(CorpusConfig::getCorpusId).orElse(""); // don't return null, or the interpolation string (${request:corpusId}) will be rendered
-                             case "corpusPath": return contextPath + corpusConfig.map(c -> "/" + c.getCorpusId()).orElse("");
-                             default: return key;
-                         }
-                     });
-                 }}));
-         // Load the specified config file
-         XMLConfiguration xmlConfig = cb.getConfiguration();
-
-         corpusId = corpusConfig.map(CorpusConfig::getCorpusId);
-         // Can be specified in multiple places: search.xml, corpusConfig (in blacklab), or as a fallback, just the corpusname with some capitalization and any username removed.
-         corpusDisplayName = Arrays.asList(
-    		 xmlConfig.getString("InterfaceProperties.DisplayName"),
-    		 corpusConfig.flatMap(CorpusConfig::getDisplayName).orElse(""),
-    		 MainServlet.getCorpusName(corpusId).orElse("")
-		 )
-		 .stream().map(StringUtils::trimToNull).filter(s -> s != null).findFirst();	 
-         corpusOwner = MainServlet.getCorpusOwner(corpusId);
-         pathToCustomJs = Optional.ofNullable(StringUtils.trimToNull(xmlConfig.getString("InterfaceProperties.CustomJs")));
-         pathToCustomCss = Optional.ofNullable(StringUtils.trimToNull(xmlConfig.getString("InterfaceProperties.CustomCss")));
-         pathToFaviconDir = xmlConfig.getString("InterfaceProperties.FaviconDir", contextPath + "/img");
-         propColumns = Optional.ofNullable(StringUtils.trimToNull(xmlConfig.getString("InterfaceProperties.PropColumns")));
-         pagination = xmlConfig.getBoolean("InterfaceProperties.Article.Pagination", false);
-         pageSize = Math.max(1, xmlConfig.getInt("InterfaceProperties.Article.PageSize", 1000));
-         analyticsKey = Optional.ofNullable(StringUtils.trimToNull(xmlConfig.getString("InterfaceProperties.Analytics.Key")));
-         linksInTopBar = Stream.concat(
-			 corpusOwner.isPresent() ? Stream.of(new LinkInTopBar("My corpora", contextPath + "/corpora", false)) : Stream.empty(),
-			 xmlConfig.configurationsAt("InterfaceProperties.NavLinks.Link").stream().map(sub -> {
-				 String label = sub.getString("");
-				 String href = StringUtils.defaultIfEmpty(sub.getString("[@value]"), label);
-				 boolean newWindow = sub.getBoolean("[@newWindow]", false);
-				 boolean relative = sub.getBoolean("[@relative]", false); // No longer supported, keep around for compatibility
-				 if (relative)
-					 href = contextPath + "/" + href;
-
-				 return new LinkInTopBar(label, href, newWindow);
-			 })
-		 ).collect(Collectors.toList());
-         xsltParameters = xmlConfig.configurationsAt("XsltParameters.XsltParameter").stream()
-        		 .collect(Collectors.toMap(sub -> sub.getString("[@name]"), sub -> sub.getString("[@value]")));
+        Parameters parameters = new Parameters();
+        ConfigurationBuilder<XMLConfiguration> cb = new FileBasedConfigurationBuilder<>(XMLConfiguration.class)
+                .configure(parameters.fileBased()
+                .setFile(configFile)
+                .setListDelimiterHandler(new DisabledListDelimiterHandler())
+                .setPrefixLookups(new HashMap<String, Lookup>(ConfigurationInterpolator.getDefaultPrefixLookups()) {{
+                    put("request", key -> {
+                        switch (key) {
+                            case "contextPath": return contextPath;
+                            case "corpusId": return corpusConfig.map(CorpusConfig::getCorpusId).orElse(""); // don't return null, or the interpolation string (${request:corpusId}) will be rendered
+                            case "corpusPath": return contextPath + corpusConfig.map(c -> "/" + c.getCorpusId()).orElse("");
+                            default: return key;
+                        }
+                    });
+                }}));
+        // Load the specified config file
+        XMLConfiguration xmlConfig = cb.getConfiguration();
+
+        corpusId = corpusConfig.map(CorpusConfig::getCorpusId);
+        // Can be specified in multiple places: search.xml, corpusConfig (in blacklab), or as a fallback, just the corpusname with some capitalization and any username removed.
+        corpusDisplayName = Arrays.asList(
+            xmlConfig.getString("InterfaceProperties.DisplayName"),
+            corpusConfig.flatMap(CorpusConfig::getDisplayName).orElse(""),
+            MainServlet.getCorpusName(corpusId).orElse("")
+    )
+        .stream().map(StringUtils::trimToNull).filter(s -> s != null).findFirst();	 
+        corpusOwner = MainServlet.getCorpusOwner(corpusId);
+        pathToCustomJs = Optional.ofNullable(StringUtils.trimToNull(xmlConfig.getString("InterfaceProperties.CustomJs")));
+        pathToCustomCss = Optional.ofNullable(StringUtils.trimToNull(xmlConfig.getString("InterfaceProperties.CustomCss")));
+        pathToFaviconDir = xmlConfig.getString("InterfaceProperties.FaviconDir", contextPath + "/img");
+        propColumns = Optional.ofNullable(StringUtils.trimToNull(xmlConfig.getString("InterfaceProperties.PropColumns")));
+        pagination = xmlConfig.getBoolean("InterfaceProperties.Article.Pagination", false);
+        pageSize = Math.max(1, xmlConfig.getInt("InterfaceProperties.Article.PageSize", 1000));
+        analyticsKey = Optional.ofNullable(StringUtils.trimToNull(xmlConfig.getString("InterfaceProperties.Analytics.Key")));
+        linksInTopBar = Stream.concat(
+            corpusOwner.isPresent() ? Stream.of(new LinkInTopBar("My corpora", contextPath + "/corpora", false)) : Stream.empty(),
+            xmlConfig.configurationsAt("InterfaceProperties.NavLinks.Link").stream().map(sub -> {
+                String label = sub.getString("");
+                String href = StringUtils.defaultIfEmpty(sub.getString("[@value]"), label);
+                boolean newWindow = sub.getBoolean("[@newWindow]", false);
+                boolean relative = sub.getBoolean("[@relative]", false); // No longer supported, keep around for compatibility
+                if (relative)
+                    href = contextPath + "/" + href;
+
+                return new LinkInTopBar(label, href, newWindow);
+            })
+        ).collect(Collectors.toList());
+        xsltParameters = xmlConfig.configurationsAt("XsltParameters.XsltParameter").stream()
+                .collect(Collectors.toMap(sub -> sub.getString("[@name]"), sub -> sub.getString("[@value]")));
+
+        // plausible 
+        this.plausibleDomain = Optional.ofNullable(StringUtils.trimToNull(xmlConfig.getString("InterfaceProperties.Plausible.domain")));
+        this.plausibleApiHost = Optional.ofNullable(StringUtils.trimToNull(xmlConfig.getString("InterfaceProperties.Plausible.apiHost")));
     }
 
     public Optional<String> getCorpusId() {
@@ -213,10 +220,18 @@ public boolean usePagination() {
     }
 
     public int getPageSize() {
-    	return pageSize;
+        return pageSize;
     }
 
     public Optional<String> getAnalyticsKey() {
         return analyticsKey;
     }
+
+    public Optional<String> getPlausibleDomain() {
+        return plausibleDomain;
+    }
+
+    public Optional<String> getPlausibleApiHost() {
+    	return plausibleApiHost;
+    }
 }
diff --git a/src/main/resources/interface-default/search.xml b/src/main/resources/interface-default/search.xml
@@ -65,6 +65,12 @@
         </Analytics>
         -->
 
+        <!-- see https://github.com/moritzsternemann/vue-plausible -->
+        <!-- <Plausible>
+            <domain>The domain registered with plausible</domain>
+            <apiHost>The instance of plausible to use (for when self-hosting), normally https://plausible.io</apiHost>
+        </Plausible> -->
+
     </InterfaceProperties>
     <XsltParameters>
     <!--

diff --git a/src/main/webapp/WEB-INF/templates/header.vm b/src/main/webapp/WEB-INF/templates/header.vm
@@ -44,6 +44,10 @@
             var CONTEXT_URL = "$esc.javascript($pathToTop)";
             // Not suffixed with the corpus id
             var BLS_URL = "$esc.javascript($blsUrl)";
+
+            var PLAUSIBLE_DOMAIN = "$esc.javascript($websiteConfig.getPlausibleDomain().orElse(null))"
+            var PLAUSIBLE_APIHOST = "$esc.javascript($websiteConfig.getPlausibleApiHost().orElse(null))"
+
             // Place to register CustomJS hook functions
             var hooks = {};
         </script>