[Website] Track blueprint resource type if the resource doesn't have a theme/plugin slug

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

@@ -0,0 +1,77 @@
+// @vitest-environment jsdom
+
+import type { BlueprintV1 } from '@wp-playground/blueprints';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { logBlueprintEvents } from './tracking';
+
+describe('logBlueprintEvents', () => {
+	afterEach(() => {
+		window.gtag = undefined;
+	});
+
+	it('logs plugin and theme slugs when available', async () => {
+		const gtag = vi.fn();
+		window.gtag = gtag;
+
+		await logBlueprintEvents({
+			steps: [
+				{
+					step: 'installPlugin',
+					pluginData: {
+						resource: 'wordpress.org/plugins',
+						slug: 'gutenberg',
+					},
+				},
+				{
+					step: 'installTheme',
+					themeData: {
+						resource: 'wordpress.org/themes',
+						slug: 'twentytwentyfive',
+					},
+				},
+			],
+		} as BlueprintV1);
+
+		expect(gtag).toHaveBeenCalledWith('event', 'installPlugin', {
+			resource: 'wordpress.org/plugins',
+			plugin: 'gutenberg',
+		});
+		expect(gtag).toHaveBeenCalledWith('event', 'installTheme', {
+			resource: 'wordpress.org/themes',
+			theme: 'twentytwentyfive',
+		});
+	});
+
+	it('logs the prefixed resource type when there is no slug', async () => {
+		const gtag = vi.fn();
+		window.gtag = gtag;
+
+		await logBlueprintEvents({
+			steps: [
+				{
+					step: 'installPlugin',
+					pluginData: {
+						resource: 'url',
+						url: 'https://example.com/plugin.zip',
+					},
+				},
+				{
+					step: 'installTheme',
+					themeData: {
+						resource: 'git:directory',
+						url: 'https://github.com/example/theme',
+					},
+				},
+			],
+		} as BlueprintV1);
+
+		expect(gtag).toHaveBeenCalledWith('event', 'installPlugin', {
+			resource: 'url',
+			plugin: 'resource:url',
+		});
+		expect(gtag).toHaveBeenCalledWith('event', 'installTheme', {
+			resource: 'git:directory',
+			theme: 'resource:git:directory',
+		});
+	});
+});

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

@@ -54,6 +54,7 @@ export const logBlueprintEvents = async (blueprint: BlueprintV1) => {
 	 * code, password, URLs are never sent anywhere.
 	 *
 	 * For installPlugin and installTheme, the plugin/theme slug is logged.
+	 * When there is no slug, the prefixed resource type is logged instead.
 	 */
 	const blueprintDeclaration = await getBlueprintDeclaration(blueprint);
 	if (blueprintDeclaration.steps) {
@@ -63,22 +64,27 @@ export const logBlueprintEvents = async (blueprint: BlueprintV1) => {
 			}
 			logTrackingEvent('step', { step: step.step });
 			if (step.step === 'installPlugin') {
+				const { pluginData } = step;
 				const data = {
-					resource: (step as any).pluginData.resource,
+					resource: pluginData.resource,
+					plugin: getResourceIdentifier(pluginData),
 				};
-				if ((step as any).pluginData.slug) {
-					(data as any).plugin = (step as any).pluginData.slug;
-				}
 				logTrackingEvent('installPlugin', data);
 			} else if (step.step === 'installTheme') {
+				const { themeData } = step;
 				const data = {
-					resource: (step as any).themeData.resource,
+					resource: themeData.resource,
+					theme: getResourceIdentifier(themeData),
 				};
-				if ((step as any).themeData.slug) {
-					(data as any).theme = (step as any).themeData.slug;
-				}
 				logTrackingEvent('installTheme', data);
 			}
 		}
 	}
 };
+
+function getResourceIdentifier(resource: { resource: string; slug?: string }) {
+	if (resource.slug) {
+		return resource.slug;
+	}
+	return `resource:${resource.resource}`;
+}