add matomo tracking

package.json

@@ -1,10 +1,12 @@
 {
   "name": "@creately/siddi",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "A convenient event tracker API which sends events to multiple consumers",
   "main": "dist/siddi.js",
   "scripts": {
     "build": "tsc",
+    "build:dev": "MATOMO_OFFSET=3 webpack --mode=development",
+    "build:prod": "MATOMO_OFFSET=0 webpack --mode=production",
     "lint": "prettier --print-width 120 --single-quote --trailing-comma es5 --write \"src/**/*.ts\"",
     "test": "jest --coverage",
     "test:watch": "jest --watch --coverage",
@@ -26,13 +28,14 @@
   "license": "MIT",
   "devDependencies": {
     "@types/jest": "^23.3.12",
-    "jest": "^23.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "^1.15.3",
     "rimraf": "^2.6.3",
-    "ts-jest": "^23.10.5",
-    "ts-loader": "^5.3.3",
-    "typescript": "~3.1.1",
-    "webpack": "^4.29.0",
-    "webpack-cli": "^3.2.1"
+    "ts-jest": "^29.2.5",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.7.2",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
   }
 }

src/__tests__/consumers.spec.ts

@@ -290,7 +290,7 @@ describe('Consumers', () => {
       describe('identify', () => {
         beforeEach(() => {
           window.ga = ga;
-          spyOn(window, 'ga');
+          jest.spyOn(window, 'ga');
         });
         it('should register given user', () => {
           Consumers.googleAnalytics.identify('user-id');
@@ -304,7 +304,7 @@ describe('Consumers', () => {
       describe('track', () => {
         beforeEach(() => {
           window.ga = ga;
-          spyOn(window, 'ga');
+          jest.spyOn(window, 'ga');
         });
         it('should use All as the event category if not provided in the event properties', () => {
           Consumers.googleAnalytics.track('dog.bark');
@@ -369,8 +369,8 @@ describe('Consumers', () => {
       });
       describe('identify', () => {
         beforeEach(() => {
-          window.gtag = ga4;
-          spyOn(window, 'gtag');
+          window.gtag = () => {};
+          jest.spyOn(window, 'gtag');
         });
         it('should register given user', () => {
           Consumers.ga4.identify('user-id');
@@ -383,8 +383,8 @@ describe('Consumers', () => {
       });
       describe('track', () => {
         beforeEach(() => {
-          window.gtag = ga4;
-          spyOn(window, 'gtag');
+          window.gtag = () => {};
+          jest.spyOn(window, 'gtag');
         });
         it('should send given tracking data', () => {
           Consumers.ga4.track('event name..with_dots.spaces  and-hyphens', { prop: 'a prop' });

src/consumers.ts

@@ -1,3 +1,5 @@
+import { prepareMatomoDimensions } from './utils';
+
 /**
  * Siddi event consumer configuration object
  * test: Function which returnes a boolean based on consumer is initialized and active
@@ -24,11 +26,12 @@ declare global {
     outbound: any;
     ga: any;
     snowplow: any;
-    snowplowschema: string; //Variable which holds the schema path
+    snowplowschema?: string; //Variable which holds the schema path
     sendinblue: any;
     gtag: any;
     Indicative: any;
     HyperDX: any;
+    Piwik: any;
   }
 }
 
@@ -149,4 +152,19 @@ export const Consumers: ConsumerConfiguration = {
       window.HyperDX.addAction(eventName, eventProperties);
     },
   },
+  matomo: {
+    test: () => !!window.Piwik,
+    identify: (userId: string, _: any = {}) => {
+      window.Piwik.getAsyncTracker().setUserId(userId);
+    },
+    track: (eventName: string, eventProperties: any) => {
+      window.Piwik.getAsyncTracker().trackEvent(
+        eventProperties.eventCategory,
+        eventName,
+        eventName,
+        1,
+        prepareMatomoDimensions(eventProperties)
+      );
+    },
+  },
 };

src/global.d.ts

@@ -0,0 +1 @@
+declare const WEBPACK_INJECT___MATOMO_DIMENSION_OFFSET: string;

src/siddi.ts

@@ -110,7 +110,7 @@ export class Siddi {
           }
           new Promise(resolve => {
             Consumers[config.name].track(eventName, filteredEventProperties);
-            resolve();
+            resolve(true);
           });
         }
       }

src/utils.ts

@@ -0,0 +1,14 @@
+const prepareMatomoDimensions = (eventProperties: any) => {
+  return Object.entries(eventProperties).reduce((evProps: Record<string, any>, [k, v]) => {
+    if (/value[0-9]Type/.test(k)) {
+      return evProps;
+    }
+    const regexParts = /value([0-9])$/.exec(k) || [];
+    if (!regexParts[1]) {
+      return { ...evProps, [k]: v };
+    }
+    return { ...evProps, [`dimension${parseInt(regexParts[1]) + 3}`]: v };
+  }, {});
+};
+
+export { prepareMatomoDimensions };

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "commonjs",
-    "lib": [ "dom", "es2015" ],
+    "module": "es2015",
+    "lib": [ "dom", "es2015", "es2017" ],
     "declaration": true,
     "sourceMap": true,
     "outDir": "./dist",
@@ -17,11 +17,9 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
-    "typeRoots": [ "node_modules/@types" ],
+    "typeRoots": ["node_modules/@types"],
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true
   },
-  "exclude": [
-    "**/__tests__/*"
-  ]
+  "exclude": ["node_modules",  "./dist/**/*", "**/__tests__/*"]
 }

webpack.config.js

@@ -1,20 +1,21 @@
 const path = require('path');
-
-console.log( __dirname );
+const webpack = require('webpack');
 
 module.exports = {
-    mode: 'production',
-    entry: {
-        bundle: './src/bundle.ts',
-        index: './src/index.ts',
-    },
+    entry: './src/siddi.ts',
     output: {
         path: path.resolve(__dirname, 'dist'),
-        filename: '[name].js'
+        filename: 'siddi.js'
     },
     resolve: {
         extensions: [ '.ts', '.js' ]
     },
+    plugins: [
+        new webpack.DefinePlugin({
+            WEBPACK_INJECT___MATOMO_DIMENSION_OFFSET: parseInt(process.env.MATOMO_OFFSET),
+        }),
+        new webpack.SourceMapDevToolPlugin({ filename: "[file].map" }),
+    ],
     module: {
         rules: [
             { test: /\.ts$/, use: 'ts-loader' },