Merge pull request #6935 from ever-co/feature/#6924-jitsu-backend-int…

…ergration

[feat] #6924 jitsu backend api integration

.env.compose

@@ -309,6 +309,12 @@ HUBSTAFF_CLIENT_ID=
 HUBSTAFF_CLIENT_SECRET=
 HUBSTAFF_PERSONAL_ACCESS_TOKEN=
 
-# Jitsu Configuration
-JITSU_BROWSER_HOST=
+# Jitsu Browser Configuration
+JITSU_BROWSER_URL=
 JITSU_BROWSER_WRITE_KEY=
+
+# Jitsu Server Configuration
+JITSU_SERVER_URL=
+JITSU_SERVER_WRITE_KEY=
+JITSU_SERVER_DEBUG=
+JITSU_SERVER_ECHO_EVENTS=

.env.docker

@@ -282,6 +282,12 @@ HUBSTAFF_CLIENT_ID=
 HUBSTAFF_CLIENT_SECRET=
 HUBSTAFF_PERSONAL_ACCESS_TOKEN=
 
-# Jitsu Configuration
-JITSU_BROWSER_HOST=
+# Jitsu Browser Configuration
+JITSU_BROWSER_URL=
 JITSU_BROWSER_WRITE_KEY=
+
+# Jitsu Server Configuration
+JITSU_SERVER_URL=
+JITSU_SERVER_WRITE_KEY=
+JITSU_SERVER_DEBUG=
+JITSU_SERVER_ECHO_EVENTS=

.env.local

@@ -269,6 +269,12 @@ HUBSTAFF_CLIENT_ID=
 HUBSTAFF_CLIENT_SECRET=
 HUBSTAFF_PERSONAL_ACCESS_TOKEN=
 
-# Jitsu Configuration
-JITSU_BROWSER_HOST=
+# Jitsu Browser Configuration
+JITSU_BROWSER_URL=
 JITSU_BROWSER_WRITE_KEY=
+
+# Jitsu Server Configuration
+JITSU_SERVER_URL=
+JITSU_SERVER_WRITE_KEY=
+JITSU_SERVER_DEBUG=
+JITSU_SERVER_ECHO_EVENTS=

.env.sample

@@ -302,6 +302,12 @@ HUBSTAFF_CLIENT_ID=
 HUBSTAFF_CLIENT_SECRET=
 HUBSTAFF_PERSONAL_ACCESS_TOKEN=
 
-# Jitsu Configuration
-JITSU_BROWSER_HOST=
+# Jitsu Browser Configuration
+JITSU_BROWSER_URL=
 JITSU_BROWSER_WRITE_KEY=
+
+# Jitsu Server Configuration
+JITSU_SERVER_URL=
+JITSU_SERVER_WRITE_KEY=
+JITSU_SERVER_DEBUG=
+JITSU_SERVER_ECHO_EVENTS=

.scripts/configure.ts

@@ -23,27 +23,19 @@ import { CloudinaryConfiguration } from '@cloudinary/angular-5.x';
 
 if (!env.IS_DOCKER) {
 	if (!env.GOOGLE_MAPS_API_KEY) {
-		console.warn(
-			'WARNING: No Google Maps API Key defined in the .env file. Google Maps may not be working!'
-		);
+		console.warn('WARNING: No Google Maps API Key defined in the .env file. Google Maps may not be working!');
 	}
 
 	if (!env.SENTRY_DSN) {
-		console.warn(
-			'WARNING: No Sentry DSN defined in the .env file. Sentry logging may not be working!'
-		);
+		console.warn('WARNING: No Sentry DSN defined in the .env file. Sentry logging may not be working!');
 	}
 
 	if (!env.CLOUDINARY_CLOUD_NAME || !env.CLOUDINARY_API_KEY) {
-		console.warn(
-			'WARNING: No Cloudinary API keys defined in the .env file.'
-		);
+		console.warn('WARNING: No Cloudinary API keys defined in the .env file.');
 	}
 
-	if (!env.JITSU_BROWSER_HOST || !env.JITSU_BROWSER_WRITE_KEY) {
-		console.warn(
-			'WARNING: No Jitsu keys defined in the .env file. Jitsu analytics may not be working!'
-		);
+	if (!env.JITSU_BROWSER_URL || !env.JITSU_BROWSER_WRITE_KEY) {
+		console.warn('WARNING: No Jitsu keys defined for browser in the .env file. Jitsu analytics may not be working!');
 	}
 
 	envFileContent += `
@@ -149,7 +141,7 @@ if (!env.IS_DOCKER) {
 
 		FILE_PROVIDER: '${env.FILE_PROVIDER}',
 
-		JITSU_BROWSER_HOST: '${env.JITSU_BROWSER_HOST}',
+		JITSU_BROWSER_URL: '${env.JITSU_BROWSER_URL}',
 		JITSU_BROWSER_WRITE_KEY: '${env.JITSU_BROWSER_WRITE_KEY}',
 
 		GAUZY_GITHUB_APP_NAME: '${env.GAUZY_GITHUB_APP_NAME}',
@@ -256,7 +248,7 @@ if (!env.IS_DOCKER) {
 
 		FILE_PROVIDER: '${env.FILE_PROVIDER}',
 
-		JITSU_BROWSER_HOST: '${env.JITSU_BROWSER_HOST}',
+		JITSU_BROWSER_URL: '${env.JITSU_BROWSER_URL}',
 		JITSU_BROWSER_WRITE_KEY: '${env.JITSU_BROWSER_WRITE_KEY}',
 
 		GAUZY_GITHUB_APP_NAME: '${env.GAUZY_GITHUB_APP_NAME}',

.scripts/env.ts

@@ -66,8 +66,8 @@ export type Env = Readonly<{
 
 	FILE_PROVIDER: string;
 
-	// Jitsu Analytics
-	JITSU_BROWSER_HOST: string;
+	// Jitsu Browser Configurations
+	JITSU_BROWSER_URL: string;
 	JITSU_BROWSER_WRITE_KEY: string;
 
 	GAUZY_GITHUB_APP_NAME: string;
@@ -141,7 +141,7 @@ export const env: Env = cleanEnv(
 
 		FILE_PROVIDER: str({ default: 'LOCAL' }),
 
-		JITSU_BROWSER_HOST: str({ default: '' }),
+		JITSU_BROWSER_URL: str({ default: '' }),
 		JITSU_BROWSER_WRITE_KEY: str({ default: '' }),
 
 		GAUZY_GITHUB_APP_NAME: str({ default: '' }),

apps/gauzy/src/app/@core/services/analytics/event.type.ts

@@ -1,11 +1,11 @@
 interface IUserCreatedEvent {
-	eventType: 'UserCreated';
+	eventType: JitsuAnalyticsEventsEnum.USER_CREATED;
 	userId: string;
 	email: string;
 }
 
 interface IButtonClickedEvent {
-	eventType: 'ButtonClicked';
+	eventType: JitsuAnalyticsEventsEnum.BUTTON_CLICKED;
 	url: string;
 	userId: string;
 	userEmail: string;
@@ -16,28 +16,28 @@ interface IMenuItemClickedEvent extends IButtonClickedEvent {
 }
 
 interface IPageViewEvent {
-	eventType: 'PageView';
+	eventType: JitsuAnalyticsEventsEnum.PAGE_VIEW;
 	url: string;
 	periodicity: string;
 }
 
 interface IPageCreatedEvent {
-	eventType: 'PageCreated';
+	eventType: JitsuAnalyticsEventsEnum.PAGE_CREATED;
 	slug: string;
 }
 
 interface IUserUpgradedEvent {
-	eventType: 'UserUpgraded';
+	eventType: JitsuAnalyticsEventsEnum.USER_UPGRADED;
 	email: string;
 }
 
 interface IUserClickDownloadAppEvent {
-	eventType: 'UserClickDownloadApp';
+	eventType: JitsuAnalyticsEventsEnum.USER_CLICK_DOWNLOAD_APP;
 	email: string;
 }
 
 interface IUserSignedInEvent {
-	eventType: 'UserSignedIn';
+	eventType: JitsuAnalyticsEventsEnum.USER_SIGNED_IN;
 	email: string;
 }
 
@@ -54,8 +54,11 @@ type JitsuAnalyticsEvents =
 export default JitsuAnalyticsEvents;
 
 export enum JitsuAnalyticsEventsEnum {
-	USER_CREATED = 'User Created',
-	BUTTON_CLICKED = 'Button_Clicked',
-	PAGE_VIEW = 'Page_View',
-	PAGE_CREATED = 'Page Created',
+	USER_CREATED = 'UserCreated',
+	USER_SIGNED_IN = 'UserSignedIn',
+	USER_CLICK_DOWNLOAD_APP = 'UserClickDownloadApp',
+	USER_UPGRADED = 'UserUpgraded',
+	BUTTON_CLICKED = 'ButtonClicked',
+	PAGE_VIEW = 'PageView',
+	PAGE_CREATED = 'PageCreated'
 }

apps/gauzy/src/app/@core/services/analytics/jitsu.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
-import { jitsuAnalytics, emptyAnalytics, AnalyticsInterface } from '@jitsu/js';
-import { filter } from 'rxjs/operators';
 import { Location } from '@angular/common';
+import { filter } from 'rxjs/operators';
+import { jitsuAnalytics, emptyAnalytics, AnalyticsInterface } from '@jitsu/js';
 import { environment } from '@env/environment';
 import JitsuAnalyticsEvents, { JitsuAnalyticsEventsEnum } from './event.type';
 
@@ -11,15 +11,17 @@ import JitsuAnalyticsEvents, { JitsuAnalyticsEventsEnum } from './event.type';
 })
 export class JitsuService {
 	private jitsuClient: AnalyticsInterface;
-	constructor(private location: Location, private router: Router) {
-		this.jitsuClient =
-			environment.JITSU_BROWSER_HOST &&
-			environment.JITSU_BROWSER_WRITE_KEY
-				? jitsuAnalytics({
-						host: environment.JITSU_BROWSER_HOST,
-						writeKey: environment.JITSU_BROWSER_WRITE_KEY,
-				  })
-				: emptyAnalytics;
+
+	constructor(
+		private readonly location: Location,
+		private readonly router: Router
+	) {
+		this.jitsuClient = environment.JITSU_BROWSER_URL && environment.JITSU_BROWSER_WRITE_KEY ? jitsuAnalytics({
+			host: environment.JITSU_BROWSER_URL,
+			writeKey: environment.JITSU_BROWSER_WRITE_KEY,
+			debug: false,
+			echoEvents: false
+		}) : emptyAnalytics;
 	}
 
 	async identify(

apps/gauzy/src/app/@shared/sidebar-menu/menu-items/concrete/menu-item/menu-item.component.ts

@@ -9,12 +9,12 @@ import {
 	Output,
 } from '@angular/core';
 import { Router } from '@angular/router';
-import { NbSidebarService } from '@nebular/theme';
-import JitsuAnalyticsEvents from 'apps/gauzy/src/app/@core/services/analytics/event.type';
-import { JitsuService } from 'apps/gauzy/src/app/@core/services/analytics/jitsu.service';
-import { Store } from 'apps/gauzy/src/app/@core/services/store.service';
-import { IUser } from 'packages/contracts/dist';
 import { tap } from 'rxjs/operators';
+import { NbSidebarService } from '@nebular/theme';
+import { IUser } from '@gauzy/contracts';
+import JitsuAnalyticsEvents, { JitsuAnalyticsEventsEnum } from './../../../../../@core/services/analytics/event.type';
+import { JitsuService } from './../../../../../@core/services/analytics/jitsu.service';
+import { Store } from './../../../../../@core/services/store.service';
 import { IMenuItem } from '../../interface/menu-item.interface';
 
 @Component({
@@ -30,19 +30,17 @@ export class MenuItemComponent implements OnInit, AfterViewChecked {
 	private _selected: boolean;
 	private _user: IUser;
 
-	@Output()
-	public collapsedChange: EventEmitter<any> = new EventEmitter();
-	@Output()
-	public selectedChange: EventEmitter<any> = new EventEmitter();
+	@Output() public collapsedChange: EventEmitter<any> = new EventEmitter();
+	@Output() public selectedChange: EventEmitter<any> = new EventEmitter();
 
 	constructor(
-		private router: Router,
-		private sidebarService: NbSidebarService,
-		private cdr: ChangeDetectorRef,
-		private location: Location,
-		private jitsuService: JitsuService,
+		private readonly router: Router,
+		private readonly sidebarService: NbSidebarService,
+		private readonly cdr: ChangeDetectorRef,
+		private readonly location: Location,
+		private readonly jitsuService: JitsuService,
 		private readonly store: Store
-	) {}
+	) { }
 
 	ngOnInit(): void {
 		this._user = this.store.user;
@@ -60,20 +58,31 @@ export class MenuItemComponent implements OnInit, AfterViewChecked {
 		this.cdr.detectChanges();
 	}
 
+	/**
+	 * Track a click event.
+	 * @param item The item that was clicked.
+	 * @param user The user who clicked the item.
+	 */
 	public jitsuTrackClick() {
 		const clickEvent: JitsuAnalyticsEvents = {
-			eventType: 'ButtonClicked',
+			eventType: JitsuAnalyticsEventsEnum.BUTTON_CLICKED,
 			url: this.item.url ?? this.item.link,
 			userId: this._user.id,
 			userEmail: this._user.email,
 			menuItemName: this.item.title,
 		};
+
+		// Track the click event
 		this.jitsuService.trackEvents(clickEvent.eventType, clickEvent);
+
+		// Identify the user
 		this.jitsuService.identify(this._user.id, {
 			email: this._user.email,
 			fullName: this._user.name,
 			timeZone: this._user.timeZone,
 		});
+
+		// Group the user
 		this.jitsuService.group(this._user.id, {
 			email: this._user.email,
 			fullName: this._user.name,

apps/gauzy/src/environments/model.ts

@@ -70,7 +70,7 @@ export interface Environment {
 
 	FILE_PROVIDER: string;
 
-	JITSU_BROWSER_HOST?: string;
+	JITSU_BROWSER_URL?: string;
 	JITSU_BROWSER_WRITE_KEY?: string;
 
 	/** Github Integration */

packages/common/src/interfaces/IJitsuConfig.ts

@@ -0,0 +1,24 @@
+/**
+ * Represents a configuration object for Jitsu server settings.
+ */
+export interface IJitsuConfig {
+    /**
+     * API Host. Default value: same host as script origin
+     */
+    readonly serverHost: string;
+
+    /**
+     * The write key for authenticating with the Jitsu server.
+     */
+    readonly serverWriteKey: string;
+
+    /**
+     * Whether to enable debug mode.
+     */
+    readonly debug: boolean;
+
+    /**
+     * Whether to echo events.
+     */
+    readonly echoEvents: boolean;
+}

packages/common/src/interfaces/index.ts

@@ -22,3 +22,4 @@ export * from './IUnleashConfig';
 export * from './IUpworkConfig';
 export * from './IWasabiConfig';
 export * from './IHubstaffConfig';
+export * from './IJitsuConfig';

packages/config/src/environments/environment.prod.ts

@@ -54,6 +54,16 @@ export const environment: IEnvironment = {
 	THROTTLE_TTL: parseInt(process.env.THROTTLE_TTL) || 60,
 	THROTTLE_LIMIT: parseInt(process.env.THROTTLE_LIMIT) || 300,
 
+	/**
+	 * Jitsu Server Configuration
+	 */
+	jitsu: {
+		serverHost: process.env.JITSU_SERVER_URL,
+		serverWriteKey: process.env.JITSU_SERVER_WRITE_KEY,
+		debug: process.env.JITSU_SERVER_DEBUG === 'true' ? true : false,
+		echoEvents: process.env.JITSU_SERVER_ECHO_EVENTS === 'true' ? true : false,
+	},
+
 	fileSystem: {
 		name:
 			(process.env.FILE_PROVIDER as FileStorageProviderEnum) ||