WIP: Add Matomo search events

spraakbanken · Oct 7, 2024 · a48c249 · a48c249
1 parent bdb08bd
commit a48c249
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 4 deletions.
diff --git a/app/scripts/components/advanced-search.js b/app/scripts/components/advanced-search.js
@@ -51,10 +51,11 @@ angular.module("korpApp").component("advancedSearch", {
     bindings: {},
     controller: [
         "compareSearches",
+        "matomo",
         "$location",
         "$scope",
         "$timeout",
-        function (compareSearches, $location, $scope, $timeout) {
+        function (compareSearches, matomo, $location, $scope, $timeout) {
             const $ctrl = this
 
             $ctrl.cqp = "[]"
@@ -75,6 +76,7 @@ angular.module("korpApp").component("advancedSearch", {
             )
 
             $ctrl.onSearch = () => {
+                matomo.send("trackEvent", "Search", "Search advanced")
                 $location.search("search", null)
                 $location.search("page", null)
                 $location.search("within", null)

diff --git a/app/scripts/components/extended/extended-parallel.js b/app/scripts/components/extended/extended-parallel.js
@@ -61,8 +61,9 @@ angular.module("korpApp").component("extendedParallel", {
         "$location",
         "$rootScope",
         "$timeout",
+        "matomo",
         "searches",
-        function ($location, $rootScope, $timeout, searches) {
+        function ($location, $rootScope, $timeout, matomo, searches) {
             const ctrl = this
 
             ctrl.initialized = false
@@ -152,6 +153,7 @@ angular.module("korpApp").component("extendedParallel", {
             }
 
             ctrl.onSubmit = function () {
+                matomo.send("trackEvent", "Search", "Submit search", "Extended")
                 // Unset and set query in next time step in order to trigger changes correctly in `searches`.
                 $location.search("search", null)
                 $location.replace()

diff --git a/app/scripts/components/extended/extended-standard.js b/app/scripts/components/extended/extended-standard.js
@@ -50,8 +50,9 @@ angular.module("korpApp").component("extendedStandard", {
         "$rootScope",
         "$scope",
         "compareSearches",
+        "matomo",
         "$timeout",
-        function ($location, $rootScope, $scope, compareSearches, $timeout) {
+        function ($location, $rootScope, $scope, compareSearches, matomo, $timeout) {
             const ctrl = this
 
             ctrl.lang = $rootScope.lang
@@ -85,6 +86,7 @@ angular.module("korpApp").component("extendedStandard", {
             })
 
             ctrl.onSearch = () => {
+                matomo.send("trackEvent", "Search", "Search extended")
                 triggerSearch()
             }
 

diff --git a/app/scripts/components/simple-search.js b/app/scripts/components/simple-search.js
@@ -86,9 +86,10 @@ angular.module("korpApp").component("simpleSearch", {
         "searches",
         "compareSearches",
         "lexicons",
+        "matomo",
         "$uibModal",
         "$timeout",
-        function ($location, $rootScope, $scope, searches, compareSearches, lexicons, $uibModal, $timeout) {
+        function ($location, $rootScope, $scope, searches, compareSearches, lexicons, matomo, $uibModal, $timeout) {
             const ctrl = this
 
             ctrl.disableLemgramAutocomplete = !settings.autocomplete
@@ -114,6 +115,7 @@ angular.module("korpApp").component("simpleSearch", {
 
             // triggers watch on searches.activeSearch
             ctrl.updateSearch = function () {
+                matomo.send("trackEvent", "Search", "Search simple")
                 $location.search("in_order", ctrl.freeOrder && ctrl.freeOrderEnabled ? false : null)
                 $location.search("prefix", ctrl.prefix ? true : null)
                 $location.search("mid_comp", ctrl.mid_comp ? true : null)

diff --git a/app/scripts/matomo.ts b/app/scripts/matomo.ts
@@ -3,6 +3,7 @@
  * @see: https://developer.matomo.org/guides/tracking-javascript-guide
  */
 import settings from "@/settings"
+import angular from "angular"
 
 // Allow environment-specific (development/staging/production) settings or fallback to general settings
 const matomoSettings = {
@@ -30,3 +31,16 @@ if (matomoSettings.url && matomoSettings.site) {
         s.parentNode!.insertBefore(g, s)
     })()
 }
+
+type MatomoService = {
+    /** Queue a Matomo command */
+    send: (cmd: string, ...args: string[]) => void
+}
+
+angular.module("korpApp").factory("matomo", [
+    (): MatomoService => ({
+        send(cmd, ...args) {
+            window._paq?.push([cmd, ...args])
+        },
+    }),
+])