Refactor properties in Mixpanel click tracking (#643)

* move expired flag as a top level property

* Update trackLinkClick to not be dependant on appInsights

Author: fashaikh

AzureFunctions.Client/app/components/trial-expired.component.ts

@@ -21,12 +21,12 @@ export class TrialExpiredComponent implements OnInit {
 
     ngOnInit() { }
 
-    trackClick(buttonName: string) {
+    trackLinkClick(buttonName: string) {
         if (buttonName) {
             try {
-                this._aiService.trackEvent(buttonName, { expired: "true" });
+                this._aiService.trackLinkClick(buttonName, "true");
             } catch (error) {
-                this._aiService.trackException(error, 'trackClick');
+                this._aiService.trackException(error, 'trackLinkClick');
             }
         }
     }

AzureFunctions.Client/app/components/try-now.component.ts

@@ -77,12 +77,12 @@ export class TryNowComponent implements OnInit {
         return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
     }
 
-    trackClick(buttonName: string) {
+    trackLinkClick(buttonName: string) {
         if (buttonName) {
             try {
-                this._aiService.trackEvent(buttonName, {expired:this.trialExpired.toString()});
+                this._aiService.trackLinkClick(buttonName, this.trialExpired.toString());
             } catch (error) {
-                this._aiService.trackException(error, 'trackClick');
+                this._aiService.trackException(error, 'trackLinkClick');
             }
         }
     }

AzureFunctions.Client/app/services/ai.service.ts

@@ -134,6 +134,16 @@ export class AiService implements IAppInsights {
         return appInsights.trackEvent(name, properties, measurements);
     }
 
+    /**
+    * Log a user action or other occurrence.
+    * @param   name    A string to identify this event in the portal.
+    * @param   expired  string - determines if the link was clicked before or after the trial had expired .
+    */
+    trackLinkClick(name: string, expired: string, properties?: { [name: string]: string; }, measurements?: { [name: string]: number; }) {
+        if (typeof (mixpanel) !== 'undefined')
+            mixpanel.track(name, { expired: expired, properties: this.addMixPanelProperties(null), measurements: measurements });
+    }
+
     /**
      * Log a dependency call
      * @param id    unique id, this is used by the backend o correlate server requests. Use Util.newId() to generate a unique Id.

AzureFunctions.Client/templates/trial-expired.component.html

@@ -14,7 +14,7 @@ <h1>{{ 'trialExpired_enjoyedHostingFunctions' | translate }}</h1>
         <h3>{{ 'trialExpired_signupForAzure' | translate }}</h3>
         <div style="height:50px;"></div>
         <div>
-            <a [attr.href]="freeTrialUri" (click)="trackClick('expiredFreeTrialClick')" target="_blank" class="trial-expired-signup-button">
+            <a [attr.href]="freeTrialUri" (click)="trackLinkClick('expiredFreeTrialClick')" target="_blank" class="trial-expired-signup-button">
                 {{ 'tryNow_createFreeAzureAccount' | translate }}
             </a>
         </div>

AzureFunctions.Client/templates/try-now.component.html

@@ -5,7 +5,7 @@
         </div>
         <div>{{ 'tryNow_trialTimeRemaining' | translate }} <span id="timer-text">{{timerText}}</span></div>
         <div class="free-trial-wrapper">
-            <a [attr.href]="freeTrialUri" (click)="trackClick('freeTrialTopClick')" target="_blank" class="signup-button ">
+            <a [attr.href]="freeTrialUri" (click)="trackLinkClick('freeTrialTopClick')" target="_blank" class="signup-button ">
                 {{ 'tryNow_createFreeAzureAccount' | translate }}
             </a>
             <i [tooltip]="freeAccountTooltip" class="fa fa-question-circle"></i>
@@ -16,7 +16,7 @@
             </tooltip-content>
         </div>
         <span class="discover-more-wrapper">
-            <a [attr.href]="discoverMoreUri" (click)="trackClick('discoverMoreClick')" target="_blank" class="discover-more-button">
+            <a [attr.href]="discoverMoreUri" (click)="trackLinkClick('discoverMoreClick')" target="_blank" class="discover-more-button">
                 {{ 'tryNow_discoverMore' | translate }}
             </a>
         </span>