feat: Rename Piwik to Matomo and some updates (#413)

angulartics · Oct 7, 2021 · 241365d · 241365d
1 parent 74b6fdb
commit 241365d
Show file tree

Hide file tree

Showing 11 changed files with 514 additions and 332 deletions.
diff --git a/README.md b/README.md
@@ -275,7 +275,7 @@ System.config({
 * [Google Global Site Tag](/src/lib/providers/gst) (`gtag.js`)
 * [Kissmetrics](/src/lib/providers/kissmetrics)
 * [Mixpanel](/src/lib/providers/mixpanel)
-* [Piwik](/src/lib/providers/piwik)
+* [Matomo](/src/lib/providers/matomo)
 * [Segment](/src/lib/providers/segment)
 * [Baidu Analytics](/src/lib/providers/baidu)
 * [Facebook Pixel](/src/lib/providers/facebook)

diff --git a/build.ts b/build.ts
@@ -20,7 +20,7 @@ const MODULE_NAMES = [
   'launch',
   'mixpanel',
   'pyze',
-  'piwik',
+  'matomo',
   'segment',
   'intercom',
   'woopra',

diff --git a/src/app/providers/providers.component.ts b/src/app/providers/providers.component.ts
@@ -85,8 +85,8 @@ export class ProvidersComponent {
       type: 'Analytics',
     },
     {
-      name: 'piwik',
-      display: 'Piwik',
+      name: 'matomo',
+      display: 'Matomo',
       type: 'Analytics',
     },
     {

diff --git a/src/assets/svg/matomo.svg b/src/assets/svg/matomo.svg
diff --git a/src/assets/svg/piwik.svg b/src/assets/svg/piwik.svg
diff --git a/src/lib/core/package.json b/src/lib/core/package.json
@@ -22,7 +22,7 @@
     "gtag",
     "woopra",
     "splunk",
-    "piwik",
+    "matomo",
     "inspectlet",
     "hubspot",
     "interecom",

diff --git a/src/lib/providers/piwik/README.md → src/lib/providers/matomo/README.md b/src/lib/providers/piwik/README.md → src/lib/providers/matomo/README.md
@@ -1,41 +1,41 @@
 <img 
-    src="../../../assets/svg/piwik.svg" 
-    alt="Piwik logo"
+    src="../../../assets/svg/matomo.svg" 
+    alt="Matomo logo"
     height="100px"
     width="200px" />
 
-# Piwik
-__homepage__: [piwik.org](https://piwik.org)  
-__docs__: [developer.piwik.org](https://developer.piwik.org)  
-__import__: `import { Angulartics2Piwik } from 'angulartics2/piwik';`  
+# Matomo
+__homepage__: [matomo.org](https://matomo.org)  
+__docs__: [developer.matomo.org](https://developer.matomo.org)  
+__import__: `import { Angulartics2Matomo } from 'angulartics2/matomo';`  
 
 ## Setup
-Add the standard piwik track code inside your index.html head tag:
+Add the standard matomo track code inside your index.html head tag:
 ```html
-<!-- Piwik -->
+<!-- Matomo -->
 <script type="text/javascript">
   var _paq = _paq || [];
   /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
   // _paq.push(['trackPageView']); // DELETE THIS LINE
   _paq.push(['enableLinkTracking']);
   (function() {
-    var u="//piwik.YOUR-DOMAIN.com/";
-    _paq.push(['setTrackerUrl', u+'piwik.php']);
+    var u="//matomo.YOUR-DOMAIN.com/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
     _paq.push(['setSiteId', '11']);
     var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
   })();
 </script>
-<!-- End Piwik Code -->
+<!-- End Matomo Code -->
 ```
 Make sure "trackPageView" line is commented or deleted. It is not needed as page tracking will be trigger by the angular module on route change.
 
-Replace YOUR-DOMAIN with your piwik domain (`//DOMAIN.innocraft.cloud` if you are using the innocraft cloud service).
+Replace YOUR-DOMAIN with your matomo domain (`//DOMAIN.innocraft.cloud` if you are using the innocraft cloud service).
 
-Pass the Piwik provider to angulartics in app.module:
+Pass the Matomo provider to angulartics in app.module:
 ```ts
 import { Angulartics2Module } from 'angulartics2';
-import { Angulartics2Piwik } from 'angulartics2/piwik';
+import { Angulartics2Matomo } from 'angulartics2/matomo';
 @NgModule({
   imports: [
     Angulartics2Module.forRoot(),
@@ -44,11 +44,11 @@ import { Angulartics2Piwik } from 'angulartics2/piwik';
 
 Inject angulartics into your root component (usually appComponent)
 ```ts
-import { Angulartics2Piwik } from 'angulartics2/piwik';
+import { Angulartics2Matomo } from 'angulartics2/matomo';
 export class AppComponent {
-  // inject Angulartics2Piwik in root component and initialize it
-  constructor(private angulartics2Piwik: Angulartics2Piwik) {
-    angulartics2Piwik.startTracking();
+  // inject Angulartics2Matomo in root component and initialize it
+  constructor(private angulartics2Matomo: Angulartics2Matomo) {
+    angulartics2Matomo.startTracking();
   }
 }
 ```
@@ -69,6 +69,6 @@ angulartics2.setUserProperties.next({
 ```
 Note: Custom Variables and Custom Dimensions cannot be tracked in the same call, and requires separate setUserProperties calls
 
-To track full URLs if there is a hash (#), make sure to enable `settings=>websites=>settings=>page url fragments tracking` in the Piwik dashboard.
+To track full URLs if there is a hash (#), make sure to enable `settings=>websites=>settings=>page url fragments tracking` in the Matomo dashboard.
 
 Once set up, Angulartics [usage](https://github.com/angulartics/angulartics2#usage) is the same regardless of provider
diff --git a/src/lib/providers/piwik/piwik.spec.ts → src/lib/providers/matomo/matomo.spec.ts b/src/lib/providers/piwik/piwik.spec.ts → src/lib/providers/matomo/matomo.spec.ts
@@ -1,32 +1,34 @@
-import { fakeAsync, inject, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, inject, TestBed } from '@angular/core/testing';
 
 import { Angulartics2 } from 'angulartics2';
+
 import { advance, createRoot, RootCmp, TestModule } from '../../test.mocks';
-import { Angulartics2Piwik } from './piwik';
+
+import { Angulartics2Matomo } from './matomo';
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 5000;
 declare var window: any;
 
-describe('Angulartics2Piwik', () => {
+describe('Angulartics2Matomo', () => {
   let _paq: Array<any>;
   let fixture: ComponentFixture<any>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [TestModule],
-      providers: [Angulartics2Piwik],
+      providers: [Angulartics2Matomo],
     });
 
     window._paq = _paq = [];
-    const provider: Angulartics2Piwik = TestBed.inject(Angulartics2Piwik);
+    const provider: Angulartics2Matomo = TestBed.inject(Angulartics2Matomo);
     provider.startTracking();
   });
 
   it('should track pages',
-    fakeAsync(inject([Angulartics2, Angulartics2Piwik],
-      (angulartics2: Angulartics2, angulartics2Piwik: Angulartics2Piwik) => {
+    fakeAsync(inject([Angulartics2, Angulartics2Matomo],
+      (angulartics2: Angulartics2, angulartics2Matomo: Angulartics2Matomo) => {
         fixture = createRoot(RootCmp);
-        angulartics2.pageTrack.next({path: '/abc' });
+        angulartics2.pageTrack.next({ path: '/abc' });
         advance(fixture);
         expect(_paq).toContain(['setCustomUrl', window.location.origin + '/abc']);
       },
@@ -47,15 +49,15 @@ describe('Angulartics2Piwik', () => {
     });
 
     it('should track set ecommerce view events',
-      fakeAsync(inject([Angulartics2, Angulartics2Piwik],
-        (angulartics2: Angulartics2, angulartics2Piwik: Angulartics2Piwik) => {
+      fakeAsync(inject([Angulartics2, Angulartics2Matomo],
+        (angulartics2: Angulartics2, angulartics2Matomo: Angulartics2Matomo) => {
           fixture = createRoot(RootCmp);
 
-          // Set up ecommerce view description to inform Piwik that product details are shown
+          // Set up ecommerce view description to inform Matomo that product details are shown
           const ecommerceViewDescription = product;
           ecommerceViewDescription.categoryName = 'category name';
 
-          angulartics2.eventTrack.next({action: 'setEcommerceView', properties: ecommerceViewDescription});
+          angulartics2.eventTrack.next({ action: 'setEcommerceView', properties: ecommerceViewDescription });
           advance(fixture);
 
           expect(_paq).toContain(['setEcommerceView',
@@ -70,33 +72,33 @@ describe('Angulartics2Piwik', () => {
 
 
     it('should track goals',
-      fakeAsync(inject([Angulartics2, Angulartics2Piwik],
-        (angulartics2: Angulartics2, angulartics2Piwik: Angulartics2Piwik) => {
+      fakeAsync(inject([Angulartics2, Angulartics2Matomo],
+        (angulartics2: Angulartics2, angulartics2Matomo: Angulartics2Matomo) => {
           fixture = createRoot(RootCmp);
 
-          const piwikGoal = {
+          const matomoGoal = {
             goalId: 1,
             value: 35,
           };
 
-          angulartics2.eventTrack.next({action: 'trackGoal', properties: piwikGoal});
+          angulartics2.eventTrack.next({ action: 'trackGoal', properties: matomoGoal });
           advance(fixture);
 
           expect(_paq).toContain([
             'trackGoal',
-            piwikGoal.goalId,
-            piwikGoal.value,
+            matomoGoal.goalId,
+            matomoGoal.value,
           ]);
         }
       )),
     );
 
     it('should track add ecommerce item events',
-      fakeAsync(inject([Angulartics2, Angulartics2Piwik],
-        (angulartics2: Angulartics2, angulartics2Piwik: Angulartics2Piwik) => {
+      fakeAsync(inject([Angulartics2, Angulartics2Matomo],
+        (angulartics2: Angulartics2, angulartics2Matomo: Angulartics2Matomo) => {
           fixture = createRoot(RootCmp);
 
-          angulartics2.eventTrack.next({action: 'addEcommerceItem', properties: product});
+          angulartics2.eventTrack.next({ action: 'addEcommerceItem', properties: product });
           advance(fixture);
 
           expect(_paq).toContain(['addEcommerceItem',
@@ -111,11 +113,11 @@ describe('Angulartics2Piwik', () => {
     );
 
     it('should track ecommerce cart update events',
-      fakeAsync(inject([Angulartics2, Angulartics2Piwik],
-        (angulartics2: Angulartics2, angulartics2Piwik: Angulartics2Piwik) => {
+      fakeAsync(inject([Angulartics2, Angulartics2Matomo],
+        (angulartics2: Angulartics2, angulartics2Matomo: Angulartics2Matomo) => {
           fixture = createRoot(RootCmp);
 
-          angulartics2.eventTrack.next({action: 'trackEcommerceCartUpdate', properties: {grandTotal: 15.5}});
+          angulartics2.eventTrack.next({ action: 'trackEcommerceCartUpdate', properties: { grandTotal: 15.5 } });
           advance(fixture);
 
           expect(_paq).toContain(['trackEcommerceCartUpdate', 15.5]);
@@ -124,8 +126,8 @@ describe('Angulartics2Piwik', () => {
     );
 
     it('should track ecommerce order events',
-      fakeAsync(inject([Angulartics2, Angulartics2Piwik],
-        (angulartics2: Angulartics2, angulartics2Piwik: Angulartics2Piwik) => {
+      fakeAsync(inject([Angulartics2, Angulartics2Matomo],
+        (angulartics2: Angulartics2, angulartics2Matomo: Angulartics2Matomo) => {
           fixture = createRoot(RootCmp);
 
           const ecommerceOrder = {
@@ -137,7 +139,7 @@ describe('Angulartics2Piwik', () => {
             discount: false,
           };
 
-          angulartics2.eventTrack.next({action: 'trackEcommerceOrder', properties: ecommerceOrder});
+          angulartics2.eventTrack.next({ action: 'trackEcommerceOrder', properties: ecommerceOrder });
           advance(fixture);
 
           expect(_paq).toContain(['trackEcommerceOrder',
@@ -153,8 +155,8 @@ describe('Angulartics2Piwik', () => {
     );
 
     it('should track search',
-      fakeAsync(inject([Angulartics2, Angulartics2Piwik],
-        (angulartics2: Angulartics2, angulartics2Piwik: Angulartics2Piwik) => {
+      fakeAsync(inject([Angulartics2, Angulartics2Matomo],
+        (angulartics2: Angulartics2, angulartics2Matomo: Angulartics2Matomo) => {
           fixture = createRoot(RootCmp);
 
           const search = {
@@ -163,7 +165,7 @@ describe('Angulartics2Piwik', () => {
             searchCount: 42,
           };
 
-          angulartics2.eventTrack.next({action: 'trackSiteSearch', properties: search});
+          angulartics2.eventTrack.next({ action: 'trackSiteSearch', properties: search });
           advance(fixture);
 
           expect(_paq).toContain(['trackSiteSearch',
@@ -175,19 +177,19 @@ describe('Angulartics2Piwik', () => {
       )),
     );
 
-    it('should track events', fakeAsync(inject([Angulartics2, Angulartics2Piwik],
-      (angulartics2: Angulartics2, angulartics2Piwik: Angulartics2Piwik) => {
+    it('should track events', fakeAsync(inject([Angulartics2, Angulartics2Matomo],
+      (angulartics2: Angulartics2, angulartics2Matomo: Angulartics2Matomo) => {
         fixture = createRoot(RootCmp);
-        angulartics2.eventTrack.next({action: 'do', properties: {category: 'cat'}});
+        angulartics2.eventTrack.next({ action: 'do', properties: { category: 'cat' } });
         advance(fixture);
         expect(_paq).toContain(['trackEvent', 'cat', 'do', undefined, undefined]);
       }
     )));
 
   });
 
-  it('should set username', fakeAsync(inject([Angulartics2, Angulartics2Piwik],
-    (angulartics2: Angulartics2, angulartics2Piwik: Angulartics2Piwik) => {
+  it('should set username', fakeAsync(inject([Angulartics2, Angulartics2Matomo],
+    (angulartics2: Angulartics2, angulartics2Matomo: Angulartics2Matomo) => {
       fixture = createRoot(RootCmp);
       angulartics2.setUsername.next('testUser');
       advance(fixture);
@@ -196,19 +198,19 @@ describe('Angulartics2Piwik', () => {
   )));
 
   it('should set user properties as custom variable',
-    fakeAsync(inject([Angulartics2, Angulartics2Piwik],
-      (angulartics2: Angulartics2, angulartics2Piwik: Angulartics2Piwik) => {
+    fakeAsync(inject([Angulartics2, Angulartics2Matomo],
+      (angulartics2: Angulartics2, angulartics2Matomo: Angulartics2Matomo) => {
         fixture = createRoot(RootCmp);
-        angulartics2.setUserProperties.next({index: 1, name: 'John', value: 123, scope: 'visit'});
+        angulartics2.setUserProperties.next({ index: 1, name: 'John', value: 123, scope: 'visit' });
         advance(fixture);
         expect(_paq).toContain(['setCustomVariable', 1, 'John', 123, 'visit']);
       }
     )),
   );
 
   it('should set user properties as custom dimension',
-    fakeAsync(inject([Angulartics2, Angulartics2Piwik],
-      (angulartics2: Angulartics2, angulartics2Piwik: Angulartics2Piwik) => {
+    fakeAsync(inject([Angulartics2, Angulartics2Matomo],
+      (angulartics2: Angulartics2, angulartics2Matomo: Angulartics2Matomo) => {
         fixture = createRoot(RootCmp);
         angulartics2.setUserProperties.next({
           dimension1: 'v1.2.3',