Matomo events

src/app/analytics-events.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { environment } from '../environments/environment';
+
+@Injectable({
+    providedIn: 'root'
+})
+
+export class AnalyticsEventsService {
+    trackEvent(...items): void {
+        if(!environment.production) return;
+
+        const _paq = (window as any)._paq || [];
+
+        if(_paq.push) {
+            const eventArgs = ['trackEvent', ...items];
+            _paq.push(eventArgs);
+        }
+    }
+}

src/app/layouts/bootstrap-uploader/bootstrap-uploader.component.ts

@@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { alert } from 'devextreme/ui/dialog';
 import { NotificationsService } from 'src/app/notification.service';
 import { mutePromise } from 'src/app/promise-helper';
-import { GoogleAnalyticsEventsService } from '../../google-analytics-events.service';
 import { ImportService } from '../../import.service';
 
 @Component({
@@ -21,7 +20,6 @@ export class BootstrapUploaderComponent {
 
     constructor(
         private importService: ImportService,
-        private googleAnalyticsEventsService: GoogleAnalyticsEventsService,
         private notifications: NotificationsService
     ) {}
 
@@ -60,10 +58,6 @@ export class BootstrapUploaderComponent {
                     });
                 }
 
-                this.googleAnalyticsEventsService.emitEvent(
-                    'import',
-                    this.version ? 'bootstrap variables (file)' : 'metadata (file)');
-
                 this.imported.emit();
                 e.component.reset();
             };

src/app/layouts/header/export-popup/export-popup.component.ts

@@ -4,10 +4,10 @@
 import { saveAs } from 'file-saver';
 import * as JSZip from 'jszip';
 import * as JSZipUtils from 'jszip-utils';
-import { GoogleAnalyticsEventsService } from '../../../google-analytics-events.service';
 import { ImportService } from '../../../import.service';
 import { PopupComponent } from '../popup/popup.component';
 import { DxTreeViewComponent, DxScrollViewComponent } from 'devextreme-angular';
+import { AnalyticsEventsService } from '../../../analytics-events.service';
 
 class WidgetData {
     widget: string;
@@ -36,7 +36,7 @@
     viewIndex = 0;
 
     mainWidgets: string[] = ['Scheduler', 'Diagram', 'Gantt', 'DataGrid', 'PivotGrid', 'TreeList'];
     widgetGroups: any[] = [{
         group: 'Navigation and Layout',
         widgets: ['Tabs', 'Toolbar', 'Menu', 'TreeView', 'TileView', 'Accordion', 'ContextMenu', 'TabPanel', 'MultiView', 'Drawer', 'Box', 'ResponsiveBox', 'Splitter']
     }, {
@@ -71,8 +71,8 @@
 
     constructor(
         private importService: ImportService,
-        private googleAnalyticsEventsService: GoogleAnalyticsEventsService
-    ) {}
+        private analyticsEventsService: AnalyticsEventsService
+    ) { }
 
     changeStep(index: number): void {
         const START_PAGE_INDEX = 0;
@@ -84,14 +84,14 @@
         this.viewIndex = index;
     }
 
     selectGroup(e: any, groupItems: WidgetData[]): void {
         if(e.event === undefined) return;
         groupItems.forEach((item) => {
             item.selected = e.value;
         });
     }
 
     selectAll(e: any): void {
         if(e.event === undefined) return;
 
         const select = (item: WidgetData, value: boolean): boolean => item.selected = value;
@@ -151,6 +151,12 @@
             treeItem.visible = hasChildItems;
             treeItem.expanded = hasChildItems && this.searchValue.length > 0;
         });
+
+        this.analyticsEventsService.trackEvent(
+            'TB: Export',
+            'Tb export search',
+            this.searchValue
+        );
     }
 
     getFileNameWithoutExt(): string {
@@ -159,7 +165,7 @@
                `dx.${this.importService.getThemeName()}.${this.schemeName}`;
     }
 
     validate(): any {
         return validationEngine.validateGroup();
     }
 
@@ -203,9 +209,13 @@
     }
 
     exportCss(save: boolean): Promise<void> {
-        this.googleAnalyticsEventsService.emitEvent(
-            'export',
-            'save css (' + this.importService.getThemeName() + ')');
+        if(save) {
+            this.analyticsEventsService.trackEvent(
+                'TB: Export',
+                'Tb download css',
+                this.importService.getThemeName()
+            );
+        }
 
         this.contentReady = false;
         return this.importService.exportCss(this.schemeName, this.makeSwatch, this.getSelectedWidgets(), this.removeExternalResources)
@@ -221,9 +231,13 @@
     }
 
     exportMeta(save: boolean): void {
-        this.googleAnalyticsEventsService.emitEvent(
-            'export',
-            'save metadata (' + this.importService.getThemeName() + ')');
+        if(save) {
+            this.analyticsEventsService.trackEvent(
+                'TB: Export',
+                'Tb download metadata',
+                this.importService.getThemeName()
+            );
+        }
 
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.importService.exportMetadata(this.schemeName, this.makeSwatch, this.getSelectedWidgets(), this.removeExternalResources).then((metaString) => {
@@ -233,6 +247,12 @@
     }
 
     exportZip(): void {
+        this.analyticsEventsService.trackEvent(
+            'TB: Export',
+            'Tb download zip',
+            this.importService.getThemeName()
+        );
+
         const zip = new JSZip();
         const fontExtension = ['ttf', 'woff', 'woff2'];
         const theme = {
@@ -265,9 +285,19 @@
 
     copy(): void {
         if(this.needMeta) {
+            this.analyticsEventsService.trackEvent(
+                'TB: Export',
+                'Tb copy metadata',
+                this.importService.getThemeName()
+            );
             this.exportMeta(false);
             this.copyAreaActive = true;
         } else {
+            this.analyticsEventsService.trackEvent(
+                'TB: Export',
+                'Tb copy css',
+                this.importService.getThemeName()
+            );
             this.exportCss(false)
                 .then(() => this.copyAreaActive = true)
                 .catch((e) => {
@@ -277,9 +307,11 @@
     }
 
     copyFileContent(): void {
-        this.googleAnalyticsEventsService.emitEvent(
-            'export',
-            'copy ' + (this.needMeta ? 'metadata' : 'css') + ' (' + this.importService.getThemeName() + ')');
+        this.analyticsEventsService.trackEvent(
+            'TB: Export',
+            'Tb copy ' + (this.needMeta ? 'metadata' : 'css'),
+            this.importService.getThemeName()
+        );
     }
 
     ngOnInit(): void {

src/app/layouts/header/import-popup/import-popup.component.ts

@@ -1,5 +1,4 @@
 import { Component, ViewChild } from '@angular/core';
-import { GoogleAnalyticsEventsService } from '../../../google-analytics-events.service';
 import { ImportService } from '../../../import.service';
 import { PopupComponent } from '../popup/popup.component';
 
@@ -12,8 +11,7 @@
     @ViewChild('popup') popup: PopupComponent;
 
     constructor(
-        private importService: ImportService,
-        private googleAnalyticsEventsService: GoogleAnalyticsEventsService
+        private importService: ImportService
     ) { }
 
     radioGroupData = [{
@@ -40,9 +38,7 @@
     importValue = '';
 
     applyClick(t): void {
-        this.googleAnalyticsEventsService.emitEvent('import', 'metadata');
-
         this.importService.importMetadata(t.value, 'advanced').then(() => {
             this.popup.hide();
             t.value = '';
         });

src/app/left-menu/editor/editor.component.ts

@@ -1,10 +1,12 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import { Component, Input } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
+import { Router } from '@angular/router';
 
 import { MetadataRepositoryService } from '../../meta-repository.service';
 import { NamesService } from '../../names.service';
 import { MetaItem } from '../../types/meta-item';
+import { AnalyticsEventsService } from '../../analytics-events.service';
 
 @Component({
     selector: 'app-editor',
@@ -17,7 +19,10 @@ export class EditorComponent {
     @Input() searchText = '';
 
     constructor(private names: NamesService,
-        private metaRepository: MetadataRepositoryService) { }
+        private metaRepository: MetadataRepositoryService,
+        private analyticsEventsService: AnalyticsEventsService,
+        private router: Router
+    ) { }
 
     private isValueCanBePixels() {
         return this.item.Key.endsWith('border-radius');
@@ -31,7 +36,16 @@ export class EditorComponent {
         return this.names.getHighlightedForLeftMenuName(text, this.searchText);
     }
 
-    valueTextChanged(e: { value: string }, key: string): void {
+    getSettingsName(): string {
+        const routeParts = this.router.url.split('/').filter((part) => part !== '');
+        return routeParts[routeParts.length - 1];
+    }
+
+    valueTextChanged(e: { value: string, component: any }, key: string): void {
+        this.analyticsEventsService.trackEvent(
+            'TB: Settings',
+            `Tb ${this.getSettingsName()} - ${key}`
+        );
         if(this.isValueCanBePixels() && this.isPositiveNumber(e.value)) {
             e.value = e.value + 'px';
         }
@@ -40,6 +54,10 @@ export class EditorComponent {
     }
 
     valueChanged(e: any, key: string): void {
+        this.analyticsEventsService.trackEvent(
+            'TB: Settings',
+            `Tb ${this.getSettingsName()} - ${key}`
+        );
         this.metaRepository.updateSingleVariable(e, key);
     }
 }

src/app/left-menu/main/left-menu.component.html

@@ -56,7 +56,7 @@
                     class="menu-item"
                     [routerLink]="['/advanced', theme, colorScheme, menuItem.route]"
                     routerLinkActive="active-link"
-                    (click)="menuClosed = true;"
+                    (click)="selectComponent(menuItem.route)"
                 >
                     {{ menuItem.name }}
                 </div>

src/app/left-menu/main/left-menu.component.ts

@@ -10,6 +10,7 @@ import { LeftMenuItem } from '../../types/left-menu-item';
 import { MetaItem } from '../../types/meta-item';
 import { LeftMenuAlias } from '../left-menu.aliases';
 import { SafeHtml } from '@angular/platform-browser';
+import { AnalyticsEventsService } from '../../analytics-events.service';
 
 const BASE_THEMING_NAME = 'Basic Settings';
 
@@ -39,7 +40,11 @@ export class LeftMenuComponent implements OnDestroy, OnInit {
         formControl: new UntypedFormControl('')
     });
 
-    constructor(private route: ActivatedRoute, private metaRepository: MetadataRepositoryService, private names: NamesService) {
+    constructor(private route: ActivatedRoute,
+        private metaRepository: MetadataRepositoryService,
+        private names: NamesService,
+        private analyticsEventsService: AnalyticsEventsService
+    ) {
         this.route.params.subscribe((params) => {
             this.widget = params['group'];
             this.changeWidget(this.widget);
@@ -64,6 +69,15 @@ export class LeftMenuComponent implements OnDestroy, OnInit {
         e.stopPropagation();
     }
 
+    selectComponent(componentName: string): void {
+        this.analyticsEventsService.trackEvent(
+            'TB: Settings',
+            'Tb select subgroup',
+            componentName
+        );
+        this.menuClosed = true;
+    }
+
     menuSearch(): void {
         const keyword = this.names.getRealName(this.searchKeyword.toLowerCase());
 

src/app/preview/button-detailed/button-detailed.component.ts

@@ -1,23 +1,35 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { AnalyticsEventsService } from '../../../app/analytics-events.service';
 
 @Component({
     selector: 'app-button-detailed',
     templateUrl: './button-detailed.component.html',
     styleUrls: ['./button-detailed.component.css']
 })
+
 export class ButtonDetailedComponent {
     @Input() widget: string;
     @Input() currentWidget: string;
 
     @Output() clicked = new EventEmitter();
 
+    constructor(
+        private analyticsEventsService: AnalyticsEventsService
+    ) { }
+
     onClick(): void {
         const isClosed = this.widget !== this.currentWidget;
         window.parent.postMessage(
             { widget: isClosed ? this.widget : 'base.common' },
             window.parent.location.href
         );
 
+        this.analyticsEventsService.trackEvent(
+            'TB: Settings',
+            'Tb ' + (isClosed ? 'open' : 'close') + ' settings',
+            this.widget
+        );
+
         this.clicked.emit({ isClosed });
     }
 }

src/index.html

@@ -46,15 +46,6 @@
         changeMetaContent();
     </script>
 
-    <!-- Matomo Tag Manager -->
-    <script>
-        var _mtm = window._mtm = window._mtm || [];
-        _mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
-        var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
-        g.async = true; g.src = 'https://matomo.devexpress.com/js/container_foTT0fJ8.js'; g.setAttributeNode(d.createAttribute('data-ot-ignore')); s.parentNode.insertBefore(g, s);
-    </script>
-    <!-- End Matomo Tag Manager -->
-
     <style>
         body {
             margin: 0;
@@ -100,5 +91,15 @@
             <img src="images/loading.svg" alt="loading..." />
         </div>
     </app-root>
+
+    <!-- Matomo Tag Manager -->
+    <script>
+        var _mtm = window._mtm = window._mtm || [];
+        _mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
+        var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+        g.async = true; g.src = 'https://matomo.devexpress.com/js/container_foTT0fJ8.js'; g.setAttributeNode(d.createAttribute('data-ot-ignore')); s.parentNode.insertBefore(g, s);
+    </script>
+    <!-- End Matomo Tag Manager -->
+
 </body>
 </html>