Add Events to Marketplace Interactions

components/Block/SearchDirectory.vue

@@ -102,6 +102,13 @@ const hitsPerPage = computed(() => block.value?.hits_per_page || config.value.se
 					:extension="item"
 					:to="`/extensions/${item.name}`"
 					:current-sort="currentSort"
+					v-capture="{
+						name: 'marketing.website.marketplace.extension.card.click',
+						properties: {
+							extension_id: item.objectID || item.id,
+							extension_name: item.name,
+						},
+					}"
 				/>
 			</BaseCardGroup>
 
@@ -116,6 +123,14 @@ const hitsPerPage = computed(() => block.value?.hits_per_page || config.value.se
 					:to="`/integrations/${item.slug}`"
 					:badge="item.category ?? undefined"
 					media-style="image-fill-16-9"
+					v-capture="{
+						name: 'marketing.website.marketplace.integration.card.click',
+						properties: {
+							integration_id: item.objectID || item.id,
+							integration_name: item.name,
+							integration_slug: item.slug,
+						},
+					}"
 				/>
 			</div>
 
@@ -130,6 +145,14 @@ const hitsPerPage = computed(() => block.value?.hits_per_page || config.value.se
 					:to="`/templates/${item.slug}`"
 					:badge="item.framework || item.use_cases?.[0] || 'Template'"
 					media-style="image-fill-16-9"
+					v-capture="{
+						name: 'marketing.website.marketplace.template.card.click',
+						properties: {
+							template_id: item.id,
+							template_name: item.name,
+							template_slug: item.slug,
+						},
+					}"
 				/>
 			</div>
 		</template>

layers/marketplace/components/Marketplace/MarketplaceExtensionActions.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { hash } from 'ohash';
 import type { MarketplaceExtension } from '~/types/marketplace';
 import { formatFilesize } from '~/utils/formatFilesize';
 
@@ -10,9 +11,15 @@ const directusInstanceUrl = useCookie('directus-instance-url', {
 	default: () => '',
 });
 
+const { $posthog } = useNuxtApp();
+
 const showInstallModal = ref(false);
 const inputUrl = ref(directusInstanceUrl.value || '');
 
+function hashedUrl(url: string) {
+	return hash(new URL(url).origin);
+}
+
 const installExtension = () => {
 	if (!inputUrl.value) {
 		return;
@@ -22,6 +29,24 @@ const installExtension = () => {
 
 	const installUrl = `${inputUrl.value}/admin/settings/marketplace/extension/${props.extension.id}`;
 
+	const hashed_instance_url = hashedUrl(inputUrl.value);
+
+	$posthog?.capture('marketing.website.marketplace.extension.instance_url.saved', {
+		marketplace_extension_id: props.extension.id,
+		marketplace_extension_name: props.extension.name,
+		marketplace_extension_version: props.extension.versions?.[0]?.version || null,
+		marketplace_instance_url: hashed_instance_url,
+		$set: {
+			latest_marketplace_instance_url: hashed_instance_url,
+		},
+	});
+
+	$posthog?.capture('marketing.website.marketplace.extension.install.launch', {
+		marketplace_extension_id: props.extension.id,
+		marketplace_extension_name: props.extension.name,
+		marketplace_extension_version: props.extension.versions?.[0]?.version || null,
+	});
+
 	navigateTo(installUrl, {
 		external: true,
 		open: {
@@ -37,10 +62,28 @@ const handleInstallClick = () => {
 		// Show modal if no URL is set
 		showInstallModal.value = true;
 		inputUrl.value = '';
+
+		$posthog?.capture('marketing.website.marketplace.extension.instance_url.opened', {
+			extension_id: props.extension.id,
+			marketplace_extension_name: props.extension.name,
+			marketplace_extension_version: props.extension.versions?.[0]?.version || null,
+		});
 	} else {
 		// Go directly to marketplace if URL is already set
 		const installUrl = `${directusInstanceUrl.value}/admin/settings/marketplace/extension/${props.extension.id}`;
 
+		const hashed_instance_url = hashedUrl(directusInstanceUrl.value);
+
+		$posthog?.capture('marketing.website.marketplace.extension.install.launch', {
+			marketplace_extension_id: props.extension.id,
+			marketplace_extension_name: props.extension.name,
+			marketplace_extension_version: props.extension.versions?.[0]?.version || null,
+			marketplace_instance_url: hashed_instance_url,
+			$set: {
+				latest_marketplace_instance_url: hashed_instance_url,
+			},
+		});
+
 		navigateTo(installUrl, {
 			external: true,
 			open: {
@@ -53,6 +96,18 @@ const handleInstallClick = () => {
 const handleEditUrl = () => {
 	showInstallModal.value = true;
 	inputUrl.value = directusInstanceUrl.value;
+
+	const hashed_instance_url = hashedUrl(inputUrl.value);
+
+	$posthog?.capture('marketing.website.marketplace.extension.instance_url.edit', {
+		marketplace_extension_id: props.extension.id,
+		marketplace_extension_name: props.extension.name,
+		marketplace_extension_version: props.extension.versions?.[0]?.version || null,
+		marketplace_instance_url: hashed_instance_url,
+		$set: {
+			latest_marketplace_instance_url: hashed_instance_url,
+		},
+	});
 };
 
 const isSandboxed = computed(() => {
@@ -218,7 +273,19 @@ function formatSingleVersion(version: string): string {
 			<div v-if="extension?.name" class="row">
 				<span class="meta-item">
 					<BaseIcon name="fa6-brands:npm" size="small" />
-					<NuxtLink :href="`https://www.npmjs.com/package/${extension.name}`" target="_blank" class="link">
+					<NuxtLink
+						:href="`https://www.npmjs.com/package/${extension.name}`"
+						target="_blank"
+						class="link"
+						v-capture="{
+							event: 'marketing.website.marketplace.extension.npm.open',
+							props: {
+								extension_id: extension.id,
+								extension_name: extension.name,
+								extension_version: latestVersion?.version || null,
+							},
+						}"
+					>
 						npm
 					</NuxtLink>
 				</span>
@@ -227,14 +294,42 @@ function formatSingleVersion(version: string): string {
 			<div v-if="latestVersion?.url_repository" class="row">
 				<span class="meta-item">
 					<BaseIcon name="fa6-brands:github" size="small" />
-					<a :href="latestVersion.url_repository" target="_blank" class="link">Repository</a>
+					<a
+						:href="latestVersion.url_repository"
+						target="_blank"
+						class="link"
+						v-capture="{
+							event: 'marketing.website.marketplace.extension.github.open',
+							props: {
+								extension_id: extension.id,
+								extension_name: extension.name,
+								extension_version: latestVersion?.version || null,
+							},
+						}"
+					>
+						Repository
+					</a>
 				</span>
 			</div>
 
 			<div v-if="latestVersion?.url_bugs" class="row">
 				<span class="meta-item">
 					<BaseIcon name="bug_report" size="small" />
-					<a :href="latestVersion.url_bugs" target="_blank" class="link">Report Issue</a>
+					<a
+						:href="latestVersion.url_bugs"
+						target="_blank"
+						class="link"
+						v-capture="{
+							event: 'marketing.website.marketplace.extension.bugs.open',
+							props: {
+								extension_id: extension.id,
+								extension_name: extension.name,
+								extension_version: latestVersion?.version || null,
+							},
+						}"
+					>
+						Report Issue
+					</a>
 				</span>
 			</div>
 

layers/marketplace/components/Templates/TemplatesActions.vue

@@ -23,6 +23,15 @@ defineProps<{
 				size="large"
 				block
 				@click="button.click"
+				v-capture="{
+					name: 'marketing.website.marketplace.template.button.click',
+					properties: {
+						button,
+						button_label: button.label,
+						template_id: template.id,
+						template_name: template.name,
+					},
+				}"
 			/>
 		</BaseButtonGroup>
 

package.json

@@ -69,6 +69,7 @@
 		"embla-carousel-class-names": "^8.5.2",
 		"embla-carousel-vue": "^8.5.2",
 		"isomorphic-dompurify": "^2.26.0",
+		"ohash": "^2.0.11",
 		"typesense": "^2.0.3",
 		"vue3-marquee": "^4.2.2",
 		"zod": "^4.0.13"