[Analytics] Track install and error events

packages/playground/website/src/components/layout/index.tsx

@@ -32,6 +32,7 @@ import {
 	setActiveModal,
 	setSiteManagerOpen,
 } from '../../lib/state/redux/slice-ui';
+import { logErrorEvent } from '../../lib/tracking';
 import { ImportFormModal } from '../import-form-modal';
 import { PreviewPRModal } from '../../github/preview-pr';
 import { MissingSiteModal } from '../missing-site-modal';
@@ -164,6 +165,8 @@ function Modals(blueprint: Blueprint) {
 	useEffect(() => {
 		addCrashListener(logger, (e) => {
 			const error = e as CustomEvent;
+			logErrorEvent(error.detail.source ?? 'unknown');
+
 			if (error.detail?.source === 'php-wasm') {
 				dispatch(setActiveModal(modalSlugs.ERROR_REPORT));
 			}

packages/playground/website/src/lib/state/redux/boot-site-client.ts

@@ -10,8 +10,12 @@ import {
 	removeClientInfo,
 	updateClientInfo,
 } from './slice-clients';
-import { logTrackingEvent } from '../../tracking';
-import { Blueprint, StepDefinition } from '@wp-playground/blueprints';
+import {
+	logBlueprintStepEvent,
+	logErrorEvent,
+	logTrackingEvent,
+} from '../../tracking';
+import { Blueprint } from '@wp-playground/blueprints';
 import { logger } from '@php-wasm/logger';
 import { setupPostMessageRelay } from '@php-wasm/web';
 import { startPlaygroundWeb } from '@wp-playground/client';
@@ -100,17 +104,6 @@ export function bootSiteClient(
 			blueprint = site.metadata.runtimeConfiguration;
 		} else {
 			blueprint = site.metadata.originalBlueprint;
-			// Log the names of provided Blueprint's steps.
-			// Only the names (e.g. "runPhp" or "login") are logged. Step options like
-			// code, password, URLs are never sent anywhere.
-			const steps = (blueprint?.steps || [])
-				?.filter(
-					(step: any) => !!(typeof step === 'object' && step?.step)
-				)
-				.map((step) => (step as StepDefinition).step);
-			for (const step of steps) {
-				logTrackingEvent('step', { step });
-			}
 		}
 
 		let playground: PlaygroundClient;
@@ -125,6 +118,9 @@ export function bootSiteClient(
 				onClientConnected: (playground) => {
 					(window as any)['playground'] = playground;
 				},
+				onBlueprintStepCompleted: (result, step) => {
+					logBlueprintStepEvent(step);
+				},
 				mounts: mountDescriptor
 					? [
 							{
@@ -177,6 +173,7 @@ export function bootSiteClient(
 			}
 		} catch (e) {
 			logger.error(e);
+			logErrorEvent('bootSiteClient');
 			dispatch(setActiveSiteError('site-boot-failed'));
 			dispatch(setActiveModal(modalSlugs.ERROR_REPORT));
 			return;

packages/playground/website/src/lib/tracking.ts

@@ -1,23 +1,69 @@
+import { StepDefinition } from '@wp-playground/blueprints';
+import { logger } from '@php-wasm/logger';
+
 /**
  * Declare the global window.gtag function
  */
 declare global {
-    interface Window { gtag: any; }
+	interface Window {
+		gtag: any;
+	}
 }
 
 /**
  * Google Analytics event names
  */
-type GAEvent = 'load' | 'step';
+type GAEvent = 'load' | 'step' | 'installPlugin' | 'installTheme' | 'error';
 
 /**
  * Log a tracking event to Google Analytics
  * @param GAEvent The event name
  * @param Object Event data
  */
-export const logTrackingEvent = (event: GAEvent, data?: {[key: string]: string}) => {
-    if (typeof window === 'undefined' || !window.gtag) {
-        return;
-    }
-    window.gtag('event', event, data);
-}
+export const logTrackingEvent = (
+	event: GAEvent,
+	data?: { [key: string]: string }
+) => {
+	try {
+		if (typeof window === 'undefined' || !window.gtag) {
+			return;
+		}
+		window.gtag('event', event, data);
+	} catch (error) {
+		logger.warn('Failed to log tracking event', event, data, error);
+	}
+};
+
+/**
+ * Log Blueprint step events
+ * @param step The Blueprint step
+ */
+export const logBlueprintStepEvent = (step: StepDefinition) => {
+	/**
+	 * Log the names of provided Blueprint's steps.
+	 * Only the names (e.g. "runPhp" or "login") are logged. Step options like
+	 * code, password, URLs are never sent anywhere.
+	 */
+	logTrackingEvent('step', { step: step.step });
+
+	if (step.step === 'installPlugin' && (step as any).pluginData.slug) {
+		logTrackingEvent('installPlugin', {
+			slug: (step as any).pluginData.slug,
+		});
+	} else if (step.step === 'installTheme' && (step as any).themeData.slug) {
+		logTrackingEvent('installTheme', {
+			slug: (step as any).themeData.slug,
+		});
+	}
+};
+
+/**
+ * Log error events
+ *
+ * @param error The error
+ */
+export const logErrorEvent = (source: string) => {
+	logTrackingEvent('error', {
+		source,
+	});
+};