feat: Matomo track events (search, lang)

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Support `.env`
 - Simplify time interval CQP covering whole days [#379](https://github.com/spraakbanken/korp-frontend/issues/379)
+- Track some events with Matomo: search, language switch
 
 ### Changed
 

app/scripts/components/advanced-search.js

@@ -1,6 +1,7 @@
 /** @format */
 import angular from "angular"
 import { html } from "@/util"
+import { matomoSend } from "@/matomo"
 import "@/services/compare-searches"
 import "@/components/search-submit"
 
@@ -80,6 +81,7 @@ angular.module("korpApp").component("advancedSearch", {
                 $location.search("within", null)
                 $location.search("in_order", $ctrl.freeOrder ? false : null)
                 $timeout(() => $location.search("search", `cqp|${$ctrl.cqp}`), 0)
+                matomoSend("trackEvent", "Search", "Submit search", "Advanced")
             }
 
             $ctrl.onSearchSave = (name) => {

app/scripts/components/extended/extended-parallel.js

@@ -4,6 +4,7 @@ import _ from "lodash"
 import settings from "@/settings"
 import { expandOperators } from "@/cqp_parser/cqp"
 import { html } from "@/util"
+import { matomoSend } from "@/matomo"
 import "@/services/searches"
 import "@/components/extended/tokens"
 
@@ -159,6 +160,7 @@ angular.module("korpApp").component("extendedParallel", {
                     $location.search("search", `cqp|${onCQPChange()}`)
                     $location.search("page", null)
                 }, 0)
+                matomoSend("trackEvent", "Search", "Submit search", "Extended")
             }
 
             ctrl.keydown = function ($event) {

app/scripts/components/extended/extended-standard.js

@@ -5,6 +5,7 @@ import statemachine from "@/statemachine"
 import settings from "@/settings"
 import { expandOperators, mergeCqpExprs, parse, stringify, supportsInOrder } from "@/cqp_parser/cqp"
 import { html } from "@/util"
+import { matomoSend } from "@/matomo"
 import "@/services/compare-searches"
 import "@/components/extended/tokens"
 import "@/components/search-submit"
@@ -85,6 +86,7 @@ angular.module("korpApp").component("extendedStandard", {
             })
 
             ctrl.onSearch = () => {
+                matomoSend("trackEvent", "Search", "Submit search", "Extended")
                 triggerSearch()
             }
 

app/scripts/components/header.js

@@ -12,6 +12,7 @@ import { collatorSort, html } from "@/util"
 import "@/services/utils"
 import "@/components/corpus-chooser/corpus-chooser"
 import "@/components/radio-list"
+import { matomoSend } from "@/matomo"
 
 angular.module("korpApp").component("header", {
     template: html`
@@ -152,6 +153,9 @@ angular.module("korpApp").component("header", {
                 $rootScope["lang"] = $scope.lang
                 // Set url param if different from default.
                 $location.search("lang", $scope.lang !== settings["default_language"] ? $scope.lang : null)
+
+                if (!oldVal) matomoSend("trackEvent", "UI", "Locale init", $scope.lang)
+                else matomoSend("trackEvent", "UI", "Locale switch", $scope.lang)
             })
 
             $ctrl.citeClick = () => {

app/scripts/components/simple-search.js

@@ -5,6 +5,7 @@ import statemachine from "@/statemachine"
 import settings from "@/settings"
 import { expandOperators, mergeCqpExprs, parse, stringify, supportsInOrder } from "@/cqp_parser/cqp"
 import { html, regescape, saldoToHtml, unregescape } from "@/util"
+import { matomoSend } from "@/matomo"
 import "@/services/compare-searches"
 import "@/services/lexicons"
 import "@/services/searches"
@@ -132,6 +133,7 @@ angular.module("korpApp").component("simpleSearch", {
                     }
                     $location.search("page", null)
                 }, 0)
+                matomoSend("trackEvent", "Search", "Submit search", "Simple")
             }
 
             ctrl.getCQP = function () {

app/scripts/matomo.ts

@@ -30,3 +30,26 @@ if (matomoSettings.url && matomoSettings.site) {
         s.parentNode!.insertBefore(g, s)
     })()
 }
+
+/**
+ * Send a command to Matomo.
+ *
+ * Does nothing if Matomo is not configured.
+ */
+export function matomoSend<P extends keyof Matomo>(command: P, ...args: Parameters<Matomo[P]>) {
+    window._paq = window._paq || []
+    window._paq.push([command, ...args])
+}
+
+/**
+ * This type describes available Matomo commands.
+ *
+ * Extend as needed.
+ * Fully described on https://developer.matomo.org/api-reference/tracking-javascript
+ */
+export type Matomo = {
+    trackEvent: (category: string, action: string, name?: string, value?: number) => void
+    trackLink: (url: string, linkType: string) => void
+    trackPageView: (customTitle?: string) => void
+    trackSiteSearch: (keyword: string, category?: string, resultsCount?: number) => void
+}