Merge pull request #1591 from rocket-admin/feat/add-posthog-tracking

add PostHog analytics tracking alongside Amplitude

Author: lyubov-voloshko

frontend/src/app/app.component.html

@@ -153,7 +153,7 @@
                     class="nav-bar__upgrade-button"
                     angulartics2On="click"
                     angularticsAction="Demo navbar: Create account is clicked"
-                    (click)="logoutAndRedirectToRegistration()">
+                    (click)="logoutAndRedirectToRegistration(); posthog.capture('Demo navbar: Create account is clicked')">
                     Create account
                 </button>
 

frontend/src/app/app.component.ts

@@ -15,6 +15,7 @@ import { User } from '@sentry/angular';
 import amplitude from 'amplitude-js';
 import { Angulartics2, Angulartics2Amplitude, Angulartics2OnModule } from 'angulartics2';
 import { differenceInMilliseconds } from 'date-fns';
+import posthog from 'posthog-js';
 import { Subject } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { environment } from '../environments/environment';
@@ -23,6 +24,7 @@ import { Connection } from './models/connection';
 import { AuthService } from './services/auth.service';
 import { CompanyService } from './services/company.service';
 import { ConnectionsService } from './services/connections.service';
+import { PosthogService } from './services/posthog.service';
 import { TablesService } from './services/tables.service';
 import { UiSettingsService } from './services/ui-settings.service';
 import { UserService } from './services/user.service';
@@ -53,6 +55,7 @@ amplitude.getInstance().init('9afd282be91f94da735c11418d5ff4f5');
 	],
 })
 export class AppComponent {
+	protected posthog = posthog;
 	public isSaas = (environment as any).saas;
 	public appVersion = version;
 	userActivity;
@@ -95,6 +98,7 @@ export class AppComponent {
 		private angulartics2: Angulartics2,
 		private domSanitizer: DomSanitizer,
 		private matIconRegistry: MatIconRegistry,
+		_posthog: PosthogService,
 	) {
 		this.matIconRegistry.addSvgIcon(
 			'mysql',
@@ -167,6 +171,7 @@ export class AppComponent {
 					this.angulartics2.eventTrack.next({
 						action: 'Demo account is logged in',
 					});
+					posthog.capture('Demo account is logged in');
 				});
 			}
 		});

frontend/src/app/components/api-keys/api-keys.component.html

@@ -18,6 +18,7 @@ <h1 class="mat-h1">API Keys</h1>
                             data-testid="api-key-input"
                             angulartics2On="change"
                             angularticsAction="API Keys: api key title is edited"
+                            (change)="posthog.capture('API Keys: api key title is edited')"
                             [(ngModel)]="generatingAPIkeyTitle">
                     </mat-form-field>
                     <button type="submit" mat-flat-button color="primary" data-testid="generate-api-key-button"

frontend/src/app/components/api-keys/api-keys.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
@@ -8,97 +9,102 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
-import { Angulartics2, Angulartics2OnModule } from 'angulartics2';
 import { Title } from '@angular/platform-browser';
-
-import { AlertComponent } from '../ui-components/alert/alert.component';
-import { ProfileSidebarComponent } from '../profile/profile-sidebar/profile-sidebar.component';
-import { UserService } from 'src/app/services/user.service';
+import { Angulartics2, Angulartics2OnModule } from 'angulartics2';
+import posthog from 'posthog-js';
+import { ApiKey } from 'src/app/models/user';
 import { CompanyService } from 'src/app/services/company.service';
 import { NotificationsService } from 'src/app/services/notifications.service';
-import { ApiKey } from 'src/app/models/user';
-import { ApiKeyDeleteDialogComponent } from '../user-settings/api-key-delete-dialog/api-key-delete-dialog.component';
+import { UserService } from 'src/app/services/user.service';
+import { ProfileSidebarComponent } from '../profile/profile-sidebar/profile-sidebar.component';
 import { PlaceholderApiKeysListComponent } from '../skeletons/placeholder-api-keys-list/placeholder-api-keys-list.component';
+import { AlertComponent } from '../ui-components/alert/alert.component';
+import { ApiKeyDeleteDialogComponent } from '../user-settings/api-key-delete-dialog/api-key-delete-dialog.component';
 
 @Component({
-  selector: 'app-api-keys',
-  templateUrl: './api-keys.component.html',
-  styleUrls: ['./api-keys.component.css'],
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatButtonModule,
-    MatFormFieldModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatTooltipModule,
-    CdkCopyToClipboard,
-    Angulartics2OnModule,
-    AlertComponent,
-    ProfileSidebarComponent,
-    PlaceholderApiKeysListComponent,
-  ]
+	selector: 'app-api-keys',
+	templateUrl: './api-keys.component.html',
+	styleUrls: ['./api-keys.component.css'],
+	imports: [
+		CommonModule,
+		FormsModule,
+		MatButtonModule,
+		MatFormFieldModule,
+		MatIconModule,
+		MatInputModule,
+		MatListModule,
+		MatTooltipModule,
+		CdkCopyToClipboard,
+		Angulartics2OnModule,
+		AlertComponent,
+		ProfileSidebarComponent,
+		PlaceholderApiKeysListComponent,
+	],
 })
 export class ApiKeysComponent implements OnInit {
-  public apiKeys: ApiKey[] = null;
-  public generatingAPIkeyTitle: string = '';
-  public generatedAPIkeyHash: string = '';
-  public submitting: boolean = false;
+	protected posthog = posthog;
+	public apiKeys: ApiKey[] = null;
+	public generatingAPIkeyTitle: string = '';
+	public generatedAPIkeyHash: string = '';
+	public submitting: boolean = false;
 
-  constructor(
-    private _userService: UserService,
-    private _company: CompanyService,
-    private _notifications: NotificationsService,
-    private dialog: MatDialog,
-    private title: Title,
-    private angulartics2: Angulartics2,
-  ) {}
+	constructor(
+		private _userService: UserService,
+		private _company: CompanyService,
+		private _notifications: NotificationsService,
+		private dialog: MatDialog,
+		private title: Title,
+		private angulartics2: Angulartics2,
+	) {}
 
-  ngOnInit(): void {
-    this._company.getCurrentTabTitle().subscribe(tabTitle => {
-      this.title.setTitle(`API Keys | ${tabTitle || 'Rocketadmin'}`);
-    });
-    this.getAPIkeys();
-  }
+	ngOnInit(): void {
+		this._company.getCurrentTabTitle().subscribe((tabTitle) => {
+			this.title.setTitle(`API Keys | ${tabTitle || 'Rocketadmin'}`);
+		});
+		this.getAPIkeys();
+	}
 
-  getAPIkeys() {
-    this._userService.getAPIkeys().subscribe(res => this.apiKeys = res);
-  }
+	getAPIkeys() {
+		this._userService.getAPIkeys().subscribe((res) => (this.apiKeys = res));
+	}
 
-  generateAPIkey() {
-    this.submitting = true;
-    this._userService.generateAPIkey(this.generatingAPIkeyTitle).subscribe(res => {
-      this.generatedAPIkeyHash = res.hash;
-      this.generatingAPIkeyTitle = '';
-      this.getAPIkeys();
-      this.submitting = false;
-      this.angulartics2.eventTrack.next({
-        action: 'API Keys: key generated successfully',
-      });
-    }, () => {
-      this.submitting = false;
-    });
-  }
+	generateAPIkey() {
+		this.submitting = true;
+		this._userService.generateAPIkey(this.generatingAPIkeyTitle).subscribe(
+			(res) => {
+				this.generatedAPIkeyHash = res.hash;
+				this.generatingAPIkeyTitle = '';
+				this.getAPIkeys();
+				this.submitting = false;
+				this.angulartics2.eventTrack.next({
+					action: 'API Keys: key generated successfully',
+				});
+				posthog.capture('API Keys: key generated successfully');
+			},
+			() => {
+				this.submitting = false;
+			},
+		);
+	}
 
-  deleteAPIkey(apiKey: ApiKey) {
-    const deleteConfirmation = this.dialog.open(ApiKeyDeleteDialogComponent, {
-      width: '25em',
-      data: apiKey
-    });
+	deleteAPIkey(apiKey: ApiKey) {
+		const deleteConfirmation = this.dialog.open(ApiKeyDeleteDialogComponent, {
+			width: '25em',
+			data: apiKey,
+		});
 
-    deleteConfirmation.afterClosed().subscribe(action => {
-      if (action === 'delete') {
-        this.getAPIkeys();
-        this.angulartics2.eventTrack.next({
-          action: 'API Keys: key deleted successfully',
-        });
-      }
-    });
-  }
+		deleteConfirmation.afterClosed().subscribe((action) => {
+			if (action === 'delete') {
+				this.getAPIkeys();
+				this.angulartics2.eventTrack.next({
+					action: 'API Keys: key deleted successfully',
+				});
+				posthog.capture('API Keys: key deleted successfully');
+			}
+		});
+	}
 
-  showCopyNotification(message: string) {
-    this._notifications.showSuccessSnackbar(message);
-  }
+	showCopyNotification(message: string) {
+		this._notifications.showSuccessSnackbar(message);
+	}
 }

frontend/src/app/components/audit/audit.component.html

@@ -7,6 +7,7 @@ <h1>Audit</h1>
                 <mat-select
                     angulartics2On="click"
                     angularticsAction="Audit: table is selected"
+                    (click)="posthog.capture('Audit: table is selected')"
                     [(ngModel)]="tableName"
                     (ngModelChange)="loadLogsPage()">
                     <mat-option value="showAll">Show all</mat-option>
@@ -23,6 +24,7 @@ <h1>Audit</h1>
                 <mat-select
                     angulartics2On="click"
                     angularticsAction="Audit: user is selected"
+                    (click)="posthog.capture('Audit: user is selected')"
                     [(ngModel)]="userEmail" (ngModelChange)="loadLogsPage()">
                     <mat-option value="showAll">Show all</mat-option>
                     <mat-option *ngFor="let user of usersList" [value]="user.email">{{user.email}}</mat-option>
@@ -103,7 +105,7 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
                     <button mat-button color="accent"
                         angulartics2On="click"
                         angularticsAction="Audit: view changes is clicked"
-                        (click)="openInfoLogDialog(element)">
+                        (click)="openInfoLogDialog(element); posthog.capture('Audit: view changes is clicked')">
                         Details
                     </button>
                 </td>

frontend/src/app/components/audit/audit.component.ts

@@ -2,16 +2,17 @@ import { AsyncPipe, NgClass, NgForOf, NgIf } from '@angular/common';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
 import { Title } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { User } from '@sentry/angular';
 import { Angulartics2OnModule } from 'angulartics2';
+import posthog from 'posthog-js';
 import { merge } from 'rxjs';
 import { take, tap } from 'rxjs/operators';
 import { normalizeTableName } from 'src/app/lib/normalize';
@@ -52,6 +53,7 @@ import { InfoDialogComponent } from './info-dialog/info-dialog.component';
 	styleUrls: ['./audit.component.css'],
 })
 export class AuditComponent implements OnInit {
+	protected posthog = posthog;
 	public isSaas = (environment as any).saas;
 	public connectionID: string;
 	public accesLevel: string;

frontend/src/app/components/branding/branding.component.html

@@ -25,6 +25,7 @@ <h1 class="mat-h1 branding-page-header">Branding</h1>
                                 data-testid="custom-domain-input"
                                 angulartics2On="change"
                                 angularticsAction="Company: custom domain is edited"
+                                (change)="posthog.capture('Company: custom domain is edited')"
                                 placeholder="e.g. {{companyCustomDomainPlaceholder}}"
                                 [readonly]="currentUser.role === 'DB_ADMIN' || isCustomDomain"
                                 [(ngModel)]="companyCustomDomainHostname">
@@ -95,6 +96,7 @@ <h1 class="mat-h1 branding-page-header">Branding</h1>
                                 data-testid="custom-tab-title-input"
                                 angulartics2On="change"
                                 angularticsAction="Company: tab title domain is edited"
+                                (change)="posthog.capture('Company: tab title domain is edited')"
                                 placeholder="e.g. {{company.name}}"
                                 [readonly]="currentUser.role === 'DB_ADMIN'"
                                 [(ngModel)]="companyTabTitle">