feat: track new landing_v2 features

src/app/core/services/integration/tracking.service.ts

@@ -88,6 +88,10 @@ export class TrackingService {
     this.eventTrack('Opened Landing Page');
   }
 
+  onLandingV2Open(): void {
+    this.eventTrack('Opened Landing V2');
+  }
+
   onClickEvent(trackingApp: TrackingApp, eventName: ClickEvent): void {
     this.eventTrack(`Click event: ${eventName}`, trackingApp, {});
   }
@@ -124,4 +128,12 @@ export class TrackingService {
   onErrorResolve(trackingApp: TrackingApp, properties: ResolveMappingErrorProperty): void {
     this.eventTrack('Resolve Mapping Error', trackingApp, properties);
   }
+
+  onDropDownOpen(trackingApp: TrackingApp): void {
+    this.eventTrack('Dropdown Open', trackingApp);
+  }
+
+  onDropDownItemClick(trackingApp: TrackingApp, options: { option: string }): void {
+    this.eventTrack('Dropdown option clicked', trackingApp, options);
+  }
 }

src/app/integrations/landing-v2/landing-v2.component.ts

@@ -16,6 +16,7 @@ import { XeroAuthService } from 'src/app/core/services/xero/xero-core/xero-auth.
 import { exposeAppConfig } from 'src/app/branding/expose-app-config';
 import { NetsuiteAuthService } from 'src/app/core/services/netsuite/netsuite-core/netsuite-auth.service';
 import { IntegrationsService } from 'src/app/core/services/common/integrations.service';
+import { TrackingService } from 'src/app/core/services/integration/tracking.service';
 
 @Component({
   selector: 'app-landing-v2',
@@ -76,7 +77,8 @@ export class LandingV2Component implements OnInit {
     private siAuthService: SiAuthService,
     private storageService: StorageService,
     private orgService: OrgService,
-    private integrationService: IntegrationsService
+    private integrationService: IntegrationsService,
+    private trackingService: TrackingService
   ) { }
 
 
@@ -163,5 +165,6 @@ export class LandingV2Component implements OnInit {
 
   ngOnInit(): void {
     this.storeConnectedApps();
+    this.trackingService.onLandingV2Open();
   }
 }

src/app/shared/components/menu/main-menu/main-menu.component.html

@@ -28,6 +28,7 @@
             *ngIf="showMoreDropdown"
             [(ngModel)]="dropdownValue"
             (onChange)="handleDropdownChange($event)"
+            (onClick)="handleDropdownClick()"
             appendTo="body"
             class="tw-mr-26-px tw-w-fit"
             [options]="dropdownOptions"

src/app/shared/components/menu/main-menu/main-menu.component.ts

@@ -3,11 +3,13 @@ import { Router } from '@angular/router';
 import { MenuItem } from 'primeng/api';
 import { Dropdown } from 'primeng/dropdown';
 import { brandingConfig, brandingFeatureConfig } from 'src/app/branding/branding-config';
-import { IframeOrigin, InAppIntegration } from 'src/app/core/models/enum/enum.model';
+import { AppName, IframeOrigin, InAppIntegration } from 'src/app/core/models/enum/enum.model';
 import { Integration } from 'src/app/core/models/integrations/integrations.model';
 import { MainMenuDropdownGroup } from 'src/app/core/models/misc/main-menu-dropdown-options';
+import { trackingAppMap } from 'src/app/core/models/misc/tracking.model';
 import { EventsService } from 'src/app/core/services/common/events.service';
 import { IntegrationsService } from 'src/app/core/services/common/integrations.service';
+import { TrackingService } from 'src/app/core/services/integration/tracking.service';
 import { IframeOriginStorageService } from 'src/app/core/services/misc/iframe-origin-storage.service';
 
 @Component({
@@ -23,7 +25,7 @@ export class MainMenuComponent implements OnInit {
 
   @Input() dropdownValue = null;
 
-  @Input() appName: string = '';
+  @Input() appName: AppName;
 
   @Input() isDropdrownRequired: boolean;
 
@@ -33,7 +35,7 @@ export class MainMenuComponent implements OnInit {
 
   @Input() isConnectionInProgress: boolean;
 
-  @Input() toolTipText: string = 'The integration will import all the newly updated ' + this.appName + ' dimensions and ' + brandingConfig.brandName + ' expenses in the configured state of export';
+  @Input() toolTipText: string;
 
   @Output() refreshDimensionClick = new EventEmitter<boolean>();
 
@@ -55,7 +57,8 @@ export class MainMenuComponent implements OnInit {
     private router: Router,
     private integrationsService: IntegrationsService,
     private eventsService: EventsService,
-    private iframeOriginStorageService: IframeOriginStorageService
+    private iframeOriginStorageService: IframeOriginStorageService,
+    private trackingService: TrackingService
   ) {
     this.showMoreDropdown =
       this.brandingFeatureConfig.showMoreDropdownInMainMenu &&
@@ -69,6 +72,15 @@ export class MainMenuComponent implements OnInit {
 
     event.value.handler();
     this.pDropdown()?.clear();
+
+    this.trackingService.onDropDownItemClick(
+      trackingAppMap[this.appName],
+      { option: event.value.label }
+    );
+  }
+
+  handleDropdownClick() {
+    this.trackingService.onDropDownOpen(trackingAppMap[this.appName]);
   }
 
   disconnect() {
@@ -146,5 +158,9 @@ export class MainMenuComponent implements OnInit {
         this.addDropdownOptions(integrations);
       });
     }
+
+    if (!this.toolTipText) {
+      this.toolTipText = 'The integration will import all the newly updated ' + this.appName + ' dimensions and ' + brandingConfig.brandName + ' expenses in the configured state of export';
+    }
   }
 }

src/index.html

@@ -11,9 +11,9 @@
     if (window.location.hostname !== "localhost") {
       try {
         const MIXPANEL_PROJECT_TOKEN = '{{MIXPANEL_PROJECT_TOKEN}}';
-  
+
         (function (f, b) { if (!b.__SV) { var e, g, i, h; window.mixpanel = b; b._i = []; b.init = function (e, f, c) { function g(a, d) { var b = d.split("."); 2 == b.length && ((a = a[b[0]]), (d = b[1])); a[d] = function () { a.push([d].concat(Array.prototype.slice.call(arguments, 0))); }; } var a = b; "undefined" !== typeof c ? (a = b[c] = []) : (c = "mixpanel"); a.people = a.people || []; a.toString = function (a) { var d = "mixpanel"; "mixpanel" !== c && (d += "." + c); a || (d += " (stub)"); return d; }; a.people.toString = function () { return a.toString(1) + ".people (stub)"; }; i = "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split( " "); for (h = 0; h < i.length; h++) g(a, i[h]); var j = "set set_once union unset remove delete".split(" "); a.get_group = function () { function b(c) { d[c] = function () { call2_args = arguments; call2 = [c].concat(Array.prototype.slice.call(call2_args, 0)); a.push([e, call2]); }; } for ( var d = {}, e = ["get_group"].concat( Array.prototype.slice.call(arguments, 0)), c = 0; c < j.length; c++) b(j[c]); return d; }; b._i.push([e, f, c]); }; b.__SV = 1.2; e = f.createElement("script"); e.type = "text/javascript"; e.async = !0; e.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ? MIXPANEL_CUSTOM_LIB_URL : "file:" === f.location.protocol && "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//) ? "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"; g = f.getElementsByTagName("script")[0]; g.parentNode.insertBefore(e, g); } })(document, window.mixpanel || []);
-  
+
         mixpanel.init(MIXPANEL_PROJECT_TOKEN, {
           debug: false,
           track_pageview: false,