Add events

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,18 @@ 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 menu',
+            `TB change property of ${this.getSettingsName()}`,
+            key,
+            e.value
+        )
         if(this.isValueCanBePixels() && this.isPositiveNumber(e.value)) {
             e.value = e.value + 'px';
         }
@@ -40,6 +56,12 @@ export class EditorComponent {
     }
 
     valueChanged(e: any, key: string): void {
+        this.analyticsEventsService.trackEvent(
+            'TB: settings menu',
+            `TB change property of ${this.getSettingsName()}`,
+            key,
+            e.value
+        )
         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

@@ -9,6 +9,7 @@ import { NamesService } from '../../names.service';
 import { LeftMenuItem } from '../../types/left-menu-item';
 import { MetaItem } from '../../types/meta-item';
 import { LeftMenuAlias } from '../left-menu.aliases';
+import { AnalyticsEventsService } from '../../analytics-events.service';
 import { SafeHtml } from '@angular/platform-browser';
 
 const BASE_THEMING_NAME = 'Basic Settings';
@@ -39,14 +40,22 @@ 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);
         });
     }
 
     openMenu(): void {
+        this.analyticsEventsService.trackEvent(
+            'TB: settings menu',
+            `TB open settings menu`,
+        );
         this.menuClosed = false;
     }
 
@@ -64,6 +73,15 @@ export class LeftMenuComponent implements OnDestroy, OnInit {
         e.stopPropagation();
     }
 
+    selectComponent(componentName: string): void {
+        this.analyticsEventsService.trackEvent(
+            'TB: settings menu',
+            `TB select subgroup`,
+            componentName
+        );
+        this.menuClosed = true;
+    }
+
     menuSearch(): void {
         const keyword = this.names.getRealName(this.searchKeyword.toLowerCase());