feat: adding ootb providers (#1128)

* feat: adding user telemetry config and service

* feat: adding error handler and a track directive

* feat: adding ootb providers

* refactor: using abstract service approach

* refactor: updating api for htTrack directive

* revert: package-lock.json

* revert: revert package.json

* revert: revert package.json peer deps

* refactor: adding tests and addressing commments

* refactor: fix lint errors

* refactor: adding packages and modifying code

Author: anandtiwary

package-lock.json

@@ -65,7 +65,9 @@
     "rxjs": "~6.6.7",
     "tslib": "^2.3.1",
     "uuid": "^8.3.2",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.11.4",
+    "@fullstory/browser": "^1.4.9",
+    "mixpanel-browser": "^2.41.0"
   },
   "devDependencies": {
     "@angular-builders/jest": "^11.2.0",

package.json

@@ -20,7 +20,9 @@
     "zone.js": "~0.11.4",
     "lodash-es": "^4.17.21",
     "d3-interpolate": "^2.0.1",
-    "d3-color": "^1.4.0"
+    "d3-color": "^1.4.0",
+    "@fullstory/browser": "^1.4.9",
+    "mixpanel-browser": "^2.41.0"
   },
   "devDependencies": {
     "@hypertrace/test-utils": "^0.0.0"

projects/common/package.json

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { TelemetryProviderConfig, UserTelemetryProvider, UserTraits } from '../../telemetry';
+import { Dictionary } from './../../../utilities/types/types';
+import { FreshPaint, loadFreshPaint } from './load-snippet';
+
+@Injectable({ providedIn: 'root' })
+export class FreshPaintTelemetry<InitConfig extends TelemetryProviderConfig>
+  implements UserTelemetryProvider<InitConfig> {
+  private freshPaint?: FreshPaint;
+
+  public initialize(config: InitConfig): void {
+    this.freshPaint = loadFreshPaint();
+    this.freshPaint.init(config.orgId);
+  }
+
+  public identify(userTraits: UserTraits): void {
+    this.freshPaint?.identify(userTraits.email, userTraits);
+    this.freshPaint?.addEventProperties(userTraits);
+  }
+
+  public trackEvent(name: string, properties: Dictionary<unknown>): void {
+    this.freshPaint?.track(name, properties);
+  }
+
+  public trackPage(name: string, eventData: Dictionary<unknown>): void {
+    this.freshPaint?.page(name, name, eventData);
+  }
+
+  public trackError(name: string, eventData: Dictionary<unknown>): void {
+    this.freshPaint?.track(name, eventData);
+  }
+}

projects/common/src/telemetry/providers/freshpaint/freshpaint-provider.ts

@@ -0,0 +1,16 @@
+export function loadFreshPaint(): FreshPaint;
+
+export interface FreshPaint {
+  init(orgId: string): void;
+  identify(uid?: string, userVars?: UserVars): void;
+  identify(userVars?: UserVars): void;
+  track(eventName: string, properties?: {}): void;
+  addEventProperties(userVars?: UserVars): void;
+  page(category?: string, name?: string, userVars?: UserVars): void;
+}
+
+interface UserVars {
+  displayName?: string;
+  email?: string;
+  [key: string]: any;
+}

projects/common/src/telemetry/providers/freshpaint/load-snippet/index.d.ts

@@ -0,0 +1,81 @@
+// tslint:disable
+
+export const loadFreshPaint = () => {
+  if (window.freshpaint) {
+    return window.freshpaint;
+  }
+  (function (c, a) {
+    if (!a.__SV) {
+      var b = window;
+      try {
+        var d,
+          m,
+          j,
+          k = b.location,
+          f = k.hash;
+        d = function (a, b) {
+          return (m = a.match(RegExp(b + '=([^&]*)'))) ? m[1] : null;
+        };
+        f &&
+          d(f, 'fpState') &&
+          ((j = JSON.parse(decodeURIComponent(d(f, 'fpState')))),
+          'fpeditor' === j.action &&
+            (b.sessionStorage.setItem('_fpcehash', f),
+            history.replaceState(j.desiredHash || '', c.title, k.pathname + k.search)));
+      } catch (n) {}
+      var l, h;
+      window.freshpaint = a;
+      a._i = [];
+      a.init = function (b, d, g) {
+        function c(b, i) {
+          var a = i.split('.');
+          2 == a.length && ((b = b[a[0]]), (i = a[1]));
+          b[i] = function () {
+            b.push([i].concat(Array.prototype.slice.call(arguments, 0)));
+          };
+        }
+        var e = a;
+        'undefined' !== typeof g ? (e = a[g] = []) : (g = 'freshpaint');
+        e.people = e.people || [];
+        e.toString = function (b) {
+          var a = 'freshpaint';
+          'freshpaint' !== g && (a += '.' + g);
+          b || (a += ' (stub)');
+          return a;
+        };
+        e.people.toString = function () {
+          return e.toString(1) + '.people (stub)';
+        };
+        l = '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 people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove people group page alias ready addEventProperties addInitialEventProperties removeEventProperty addPageviewProperties'.split(
+          ' '
+        );
+        for (h = 0; h < l.length; h++) c(e, l[h]);
+        var f = 'set set_once union unset remove delete'.split(' ');
+        e.get_group = function () {
+          function a(c) {
+            b[c] = function () {
+              call2_args = arguments;
+              call2 = [c].concat(Array.prototype.slice.call(call2_args, 0));
+              e.push([d, call2]);
+            };
+          }
+          for (var b = {}, d = ['get_group'].concat(Array.prototype.slice.call(arguments, 0)), c = 0; c < f.length; c++)
+            a(f[c]);
+          return b;
+        };
+        a._i.push([b, d, g]);
+      };
+      a.__SV = 1.4;
+      b = c.createElement('script');
+      b.type = 'text/javascript';
+      b.async = !0;
+      b.src =
+        'undefined' !== typeof FRESHPAINT_CUSTOM_LIB_URL
+          ? FRESHPAINT_CUSTOM_LIB_URL
+          : '//perfalytics.com/static/js/freshpaint.js';
+      (d = c.getElementsByTagName('script')[0]) ? d.parentNode.insertBefore(b, d) : c.head.appendChild(b);
+    }
+  })(document, window.freshpaint || []);
+
+  return freshpaint;
+};

projects/common/src/telemetry/providers/freshpaint/load-snippet/index.js

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import * as FullStory from '@fullstory/browser';
+import { Dictionary } from '../../../utilities/types/types';
+import { TelemetryProviderConfig, UserTelemetryProvider, UserTraits } from './../../telemetry';
+
+@Injectable({ providedIn: 'root' })
+export class FullStoryTelemetry<InitConfig extends TelemetryProviderConfig>
+  implements UserTelemetryProvider<InitConfig> {
+  public initialize(config: InitConfig): void {
+    FullStory.init({
+      orgId: config.orgId,
+      devMode: false
+    });
+  }
+
+  public identify(userTraits: UserTraits): void {
+    FullStory.setUserVars({
+      displayName: userTraits.name ?? `${userTraits.givenName as string} ${userTraits.familyName as string}`,
+      email: userTraits.email,
+      companyName: userTraits.companyName,
+      licenseTier: userTraits.licenseTier,
+      licenseExpiration: userTraits.licenseExpiration,
+      isPlayground: userTraits.isPlayground,
+      accountEmail: userTraits.accountEmail
+    });
+  }
+
+  public trackEvent(name: string, eventData: Dictionary<unknown>): void {
+    FullStory.event(name, eventData);
+  }
+
+  public trackPage(name: string, eventData: Dictionary<unknown>): void {
+    FullStory.event(name, eventData);
+  }
+
+  public trackError(name: string, eventData: Dictionary<unknown>): void {
+    FullStory.event(name, eventData);
+  }
+
+  public shutdown(): void {
+    FullStory.shutdown();
+  }
+}

projects/common/src/telemetry/providers/fullstory/full-story-provider.ts

@@ -0,0 +1,42 @@
+import { Dictionary } from './../../../utilities/types/types';
+import { TelemetryProviderConfig, UserTelemetryProvider, UserTraits } from '../../telemetry';
+import { loadGA } from './load-snippet';
+
+export class GoogleAnalyticsTelemetry<InitConfig extends TelemetryProviderConfig>
+  implements UserTelemetryProvider<InitConfig> {
+  public initialize(config: InitConfig): void {
+    const ga = loadGA();
+    ga('create', config.orgId, 'auto');
+    ga('send', 'pageview');
+  }
+
+  public identify(userTraits: UserTraits): void {
+    ga('set', 'userId', userTraits.email);
+  }
+
+  public trackEvent(name: string, eventData: Dictionary<unknown>): void {
+    ga('send', {
+      hitType: 'event',
+      eventCategory: 'user-actions',
+      eventAction: name,
+      ...eventData
+    });
+  }
+
+  public trackPage(name: string, eventData: Dictionary<unknown>): void {
+    ga('send', {
+      hitType: 'pageview',
+      page: name,
+      ...eventData
+    });
+  }
+
+  public trackError(name: string, eventData: Dictionary<unknown>): void {
+    ga('send', {
+      hitType: 'event',
+      eventCategory: 'error',
+      eventAction: name,
+      ...eventData
+    });
+  }
+}

projects/common/src/telemetry/providers/google-analytics/google-analytics-provider.ts

@@ -0,0 +1,3 @@
+import 'google.analytics';
+
+export function loadGA(): UniversalAnalytics.ga;

projects/common/src/telemetry/providers/google-analytics/load-snippet/index.d.ts

@@ -0,0 +1,51 @@
+// tslint:disable
+
+export const loadGA = () => {
+  /**
+   * Creates a temporary global ga object and loads analytics.js.
+   * Parameters o, a, and m are all used internally. They could have been
+   * declared using 'var', instead they are declared as parameters to save
+   * 4 bytes ('var ').
+   *
+   * @param {Window}        i The global context object.
+   * @param {HTMLDocument}  s The DOM document object.
+   * @param {string}        o Must be 'script'.
+   * @param {string}        g Protocol relative URL of the analytics.js script.
+   * @param {string}        r Global name of analytics object. Defaults to 'ga'.
+   * @param {HTMLElement}   a Async script tag.
+   * @param {HTMLElement}   m First script tag in document.
+   */
+
+  if (window.ga) {
+    return window.ga;
+  }
+
+  /**
+   * Do not modify. Below snippet is from Google
+   */
+
+  (function (i, s, o, g, r, a, m) {
+    i['GoogleAnalyticsObject'] = r; // Acts as a pointer to support renaming.
+
+    // Creates an initial ga() function.
+    // The queued commands will be executed once analytics.js loads.
+    (i[r] =
+      i[r] ||
+      function () {
+        (i[r].q = i[r].q || []).push(arguments);
+      }),
+      // Sets the time (as an integer) this tag was executed.
+      // Used for timing hits.
+      (i[r].l = 1 * new Date());
+
+    // Insert the script tag asynchronously.
+    // Inserts above current tag to prevent blocking in addition to using the
+    // async attribute.
+    (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+    a.async = 1;
+    a.src = g;
+    m.parentNode.insertBefore(a, m);
+  })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+
+  return ga;
+};