Analytics: Add user id tracking to google analytics (grafana#42763)

Author: erin-noe-payne

package.json

@@ -107,6 +107,7 @@
     "@types/enzyme": "3.10.5",
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/file-saver": "2.0.1",
+    "@types/google.analytics": "^0.0.42",
     "@types/grafana__slate-react": "npm:@types/[email protected]",
     "@types/history": "^4.7.8",
     "@types/hoist-non-react-statics": "3.3.1",

public/app/core/services/echo/backends/analytics/GABackend.ts

@@ -8,6 +8,7 @@ export interface GAEchoBackendOptions {
 
 export class GAEchoBackend implements EchoBackend<PageviewEchoEvent, GAEchoBackendOptions> {
   supportedEvents = [EchoEventType.Pageview];
+  trackedUserId: number | null = null;
 
   constructor(public options: GAEchoBackendOptions) {
     const url = `https://www.google-analytics.com/analytics${options.debug ? '_debug' : ''}.js`;
@@ -18,8 +19,8 @@ export class GAEchoBackend implements EchoBackend<PageviewEchoEvent, GAEchoBacke
       cache: true,
     });
 
-    const ga = ((window as any).ga =
-      (window as any).ga ||
+    const ga = (window.ga =
+      window.ga ||
       // this had the equivalent of `eslint-disable-next-line prefer-arrow/prefer-arrow-functions`
       function () {
         (ga.q = ga.q || []).push(arguments);
@@ -30,12 +31,18 @@ export class GAEchoBackend implements EchoBackend<PageviewEchoEvent, GAEchoBacke
   }
 
   addEvent = (e: PageviewEchoEvent) => {
-    if (!(window as any).ga) {
+    if (!window.ga) {
       return;
     }
 
-    (window as any).ga('set', { page: e.payload.page });
-    (window as any).ga('send', 'pageview');
+    window.ga('set', { page: e.payload.page });
+    window.ga('send', 'pageview');
+
+    const { userSignedIn, userId } = e.meta;
+    if (userSignedIn && userId !== this.trackedUserId) {
+      this.trackedUserId = userId;
+      window.ga('set', 'userId', userId);
+    }
   };
 
   // Not using Echo buffering, addEvent above sends events to GA as soon as they appear

yarn.lock

@@ -9015,6 +9015,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/google.analytics@npm:^0.0.42":
+  version: 0.0.42
+  resolution: "@types/google.analytics@npm:0.0.42"
+  checksum: c64b3f7991c4bcb1dfe8db902a2e2ebe821ce53a1ca36e6628b4d08d0c24213aa0d4f49492b3144dd6bfa661f53fb1ecf16e83cca522cddd6d9f8419a4b73fe8
+  languageName: node
+  linkType: hard
+
 "@types/graceful-fs@npm:^4.1.2":
   version: 4.1.5
   resolution: "@types/graceful-fs@npm:4.1.5"
@@ -19263,6 +19270,7 @@ __metadata:
     "@types/enzyme": 3.10.5
     "@types/enzyme-adapter-react-16": 1.0.6
     "@types/file-saver": 2.0.1
+    "@types/google.analytics": ^0.0.42
     "@types/grafana__slate-react": "npm:@types/[email protected]"
     "@types/history": ^4.7.8
     "@types/hoist-non-react-statics": 3.3.1