Tracks welcome page carousel views and other events

Adds telemetry to track the number of carousel pages
viewed on the welcome page. This data will help us understand
user engagement with the welcome page features.

(#4769, #4773, PLG-138)

Author: sergeibbb

docs/telemetry-events.md

@@ -4130,10 +4130,9 @@ or
 
 ```typescript
 {
-  'command': string,
-  'detail': string,
-  'name': 'plus/sign-up',
-  'type': 'command'
+  'name': 'plus/sign-up' | 'dismiss' | 'shown',
+  'proButtonClicked': boolean,
+  'viewedCarouselPages': number
 }
 ```
 

src/constants.telemetry.ts

@@ -1368,9 +1368,13 @@ interface WalkthroughCompletionEvent {
 	'context.key': WalkthroughContextKeys;
 }
 
-type WelcomeActionNames = 'plus/sign-up';
+type WelcomeActionNames = 'plus/sign-up' | 'dismiss' | 'shown';
 
-type WelcomeActionEvent = { type: 'command'; name: WelcomeActionNames; command: string; detail?: string };
+type WelcomeActionEvent = {
+	name: WelcomeActionNames;
+	viewedCarouselPages?: number;
+	proButtonClicked?: boolean;
+};
 
 type WebviewContextEventData = {
 	'context.webview.id': string;

src/webviews/apps/home/components/welcome-overlay.ts

@@ -1,13 +1,16 @@
 import { consume } from '@lit/context';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { isSubscriptionTrialOrPaidFromState } from '../../../../plus/gk/utils/subscription.utils.js';
 import type { State } from '../../../home/protocol.js';
 import { CollapseSectionCommand } from '../../../home/protocol.js';
 import { ipcContext } from '../../shared/contexts/ipc.js';
+import type { TelemetryContext } from '../../shared/contexts/telemetry.js';
+import { telemetryContext } from '../../shared/contexts/telemetry.js';
 import type { HostIpc } from '../../shared/ipc.js';
 import '../../shared/components/button.js';
 import { stateContext } from '../context.js';
+import type { GlWelcomePage } from './welcome-page.js';
 import './welcome-page.js';
 
 declare global {
@@ -74,6 +77,12 @@ export class GlWelcomeOverlay extends LitElement {
 	@state()
 	private _ipc!: HostIpc;
 
+	@consume({ context: telemetryContext as { __context__: TelemetryContext } })
+	_telemetry!: TelemetryContext;
+
+	@query('gl-welcome-page')
+	private welcomePage?: GlWelcomePage;
+
 	@state()
 	private closed = false;
 
@@ -108,6 +117,16 @@ export class GlWelcomeOverlay extends LitElement {
 
 	private onClose() {
 		this.closed = true;
+		const telemetryData = this.welcomePage?.getTelemetryData();
+		this._telemetry.sendEvent({
+			name: 'welcome/action',
+			data: {
+				name: 'dismiss',
+				viewedCarouselPages: telemetryData?.viewedCarouselPages,
+				proButtonClicked: telemetryData?.proButtonClicked,
+			},
+			source: { source: 'welcome', detail: 'close-on-overlay' },
+		});
 
 		this._ipc.sendCommand(CollapseSectionCommand, {
 			section: 'welcomeOverlay',

src/webviews/apps/home/components/welcome-page.ts

@@ -26,10 +26,19 @@ const helpBlameUrl =
 const helpRevisionNavigationUrl =
 	'https://help.gitkraken.com/gitlens/gitlens-features/?utm_source=gitlens-extension&utm_medium=in-app-links#revision-navigation';
 
+type TelemetryData = {
+	viewedCarouselPages: number;
+	proButtonClicked: boolean;
+};
+
 @customElement('gl-welcome-page')
 export class GlWelcomePage extends LitElement {
 	static override styles = [scrollableBase, welcomeStyles];
-	//static override styles = welcomeStyles;
+
+	private telemetryData: TelemetryData = {
+		viewedCarouselPages: 0,
+		proButtonClicked: false,
+	};
 
 	@property({ type: Boolean })
 	closeable = false;
@@ -50,24 +59,52 @@ export class GlWelcomePage extends LitElement {
 	@consume({ context: telemetryContext as { __context__: TelemetryContext } })
 	_telemetry!: TelemetryContext;
 
+	override connectedCallback(): void {
+		super.connectedCallback?.();
+		this._telemetry.sendEvent({
+			name: 'welcome/action',
+			data: {
+				name: 'shown',
+			},
+			source: { source: 'welcome' },
+		});
+	}
+
 	private onStartTrial() {
+		this.telemetryData.proButtonClicked = true;
 		const command: GlCommands = 'gitlens.plus.signUp';
 		this._telemetry.sendEvent({
 			name: 'welcome/action',
 			data: {
-				type: 'command',
 				name: 'plus/sign-up',
-				command: command,
+				viewedCarouselPages: this.telemetryData.viewedCarouselPages,
 			},
 			source: { source: 'welcome' },
 		});
 		this._ipc.sendCommand(ExecuteCommand, { command: command, args: [{ source: 'welcome' }] });
 	}
 
 	private onClose() {
+		this._telemetry.sendEvent({
+			name: 'welcome/action',
+			data: {
+				name: 'dismiss',
+				viewedCarouselPages: this.telemetryData.viewedCarouselPages,
+				proButtonClicked: this.telemetryData.proButtonClicked,
+			},
+			source: { source: 'welcome', detail: 'dismiss-in-body' },
+		});
 		this.dispatchEvent(new CustomEvent('close'));
 	}
 
+	private onFeatureAppeared() {
+		this.telemetryData.viewedCarouselPages++;
+	}
+
+	getTelemetryData(): TelemetryData {
+		return { ...this.telemetryData };
+	}
+
 	override render(): unknown {
 		const themeSuffix = this.isLightTheme ? 'light' : 'dark';
 		return html`
@@ -85,7 +122,7 @@ export class GlWelcomePage extends LitElement {
 				</div>
 
 				<div class="section">
-					<gl-feature-carousel>
+					<gl-feature-carousel @gl-feature-appeared=${this.onFeatureAppeared}>
 						<gl-feature-card class="card">
 							<img
 								slot="image"

src/webviews/apps/home/components/welcome-parts.ts

@@ -1,5 +1,5 @@
 import { css, html, LitElement } from 'lit';
-import { customElement, queryAssignedElements, state } from 'lit/decorators.js';
+import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js';
 import '../../shared/components/button.js';
 import '../../shared/components/code-icon.js';
 
@@ -250,6 +250,42 @@ export class GlFeatureCard extends LitElement {
 		`,
 	];
 
+	private hasBeenVisible: boolean = false;
+
+	override updated(changedProperties: Map<PropertyKey, unknown>): void {
+		super.updated(changedProperties);
+
+		const isVisible = isElementVisible(this);
+		if (!isVisible || this.hasBeenVisible) return;
+
+		const isInViewport = isElementInViewport(this);
+		const isPartiallyInViewport = isElementPartiallyInViewport(this);
+		const visible = isVisible && (isInViewport || isPartiallyInViewport);
+		if (visible && !this.hasBeenVisible) {
+			this.hasBeenVisible = true;
+
+			// Dispatch a custom event when any property changes
+			this.dispatchEvent(
+				new CustomEvent('gl-feature-appeared', {
+					detail: {
+						changedProperties: Array.from(changedProperties.keys()),
+						visibility: {
+							isVisible: isVisible,
+							isInViewport: isInViewport,
+							isPartiallyInViewport: isPartiallyInViewport,
+						},
+					},
+					bubbles: true,
+					composed: true,
+				}),
+			);
+		}
+	}
+
+	/** is used to make the component reactive to 'data-active' attribute changes */
+	@property({ type: Boolean, reflect: true, attribute: 'data-active' })
+	private _dataActive: boolean = false;
+
 	override render(): unknown {
 		return html`
 			<div class="image">
@@ -358,3 +394,37 @@ export class GlScrollableFeatures extends LitElement {
 		return html`<div class="content"><slot></slot></div>`;
 	}
 }
+
+function isElementVisible(element: HTMLElement): boolean {
+	// Check if element is hidden by display: none or visibility: hidden
+	const style = window.getComputedStyle(element);
+	if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
+		return false;
+	}
+
+	// Check if element has zero dimensions
+	const rect = element.getBoundingClientRect();
+	if (rect.width === 0 || rect.height === 0) {
+		return false;
+	}
+
+	return true;
+}
+
+function isElementInViewport(element: HTMLElement): boolean {
+	const rect = element.getBoundingClientRect();
+	return (
+		rect.top >= 0 &&
+		rect.left >= 0 &&
+		rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+		rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+	);
+}
+
+function isElementPartiallyInViewport(element: HTMLElement): boolean {
+	const rect = element.getBoundingClientRect();
+	const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+	const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+
+	return rect.bottom > 0 && rect.right > 0 && rect.top < windowHeight && rect.left < windowWidth;
+}