Skip to content

Commit b660bf0

Browse files
connorwinstonconnorwinston
authored
Add Events to Marketplace Interactions (#202)
* Add Tracking * Fix Linting
1 parent 62cc059 commit b660bf0

File tree

5 files changed

+156
-34
lines changed

5 files changed

+156
-34
lines changed

‎components/Block/SearchDirectory.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,13 @@ const hitsPerPage = computed(() => block.value?.hits_per_page || config.value.se
102102
:extension="item"
103103
:to="`/extensions/${item.name}`"
104104
:current-sort="currentSort"
105+
v-capture="{
106+
name: 'marketing.website.marketplace.extension.card.click',
107+
properties: {
108+
extension_id: item.objectID || item.id,
109+
extension_name: item.name,
110+
},
111+
}"
105112
/>
106113
</BaseCardGroup>
107114

@@ -116,6 +123,14 @@ const hitsPerPage = computed(() => block.value?.hits_per_page || config.value.se
116123
:to="`/integrations/${item.slug}`"
117124
:badge="item.category ?? undefined"
118125
media-style="image-fill-16-9"
126+
v-capture="{
127+
name: 'marketing.website.marketplace.integration.card.click',
128+
properties: {
129+
integration_id: item.objectID || item.id,
130+
integration_name: item.name,
131+
integration_slug: item.slug,
132+
},
133+
}"
119134
/>
120135
</div>
121136

@@ -130,6 +145,14 @@ const hitsPerPage = computed(() => block.value?.hits_per_page || config.value.se
130145
:to="`/templates/${item.slug}`"
131146
:badge="item.framework || item.use_cases?.[0] || 'Template'"
132147
media-style="image-fill-16-9"
148+
v-capture="{
149+
name: 'marketing.website.marketplace.template.card.click',
150+
properties: {
151+
template_id: item.id,
152+
template_name: item.name,
153+
template_slug: item.slug,
154+
},
155+
}"
133156
/>
134157
</div>
135158
</template>

‎layers/marketplace/components/Marketplace/MarketplaceExtensionActions.vue‎

Lines changed: 98 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import { hash } from 'ohash';
23
import type { MarketplaceExtension } from '~/types/marketplace';
34
import { formatFilesize } from '~/utils/formatFilesize';
45
@@ -10,9 +11,15 @@ const directusInstanceUrl = useCookie('directus-instance-url', {
1011
default: () => '',
1112
});
1213
14+
const { $posthog } = useNuxtApp();
15+
1316
const showInstallModal = ref(false);
1417
const inputUrl = ref(directusInstanceUrl.value || '');
1518
19+
function hashedUrl(url: string) {
20+
return hash(new URL(url).origin);
21+
}
22+
1623
const installExtension = () => {
1724
if (!inputUrl.value) {
1825
return;
@@ -22,6 +29,24 @@ const installExtension = () => {
2229
2330
const installUrl = `${inputUrl.value}/admin/settings/marketplace/extension/${props.extension.id}`;
2431
32+
const hashed_instance_url = hashedUrl(inputUrl.value);
33+
34+
$posthog?.capture('marketing.website.marketplace.extension.instance_url.saved', {
35+
marketplace_extension_id: props.extension.id,
36+
marketplace_extension_name: props.extension.name,
37+
marketplace_extension_version: props.extension.versions?.[0]?.version || null,
38+
marketplace_instance_url: hashed_instance_url,
39+
$set: {
40+
latest_marketplace_instance_url: hashed_instance_url,
41+
},
42+
});
43+
44+
$posthog?.capture('marketing.website.marketplace.extension.install.launch', {
45+
marketplace_extension_id: props.extension.id,
46+
marketplace_extension_name: props.extension.name,
47+
marketplace_extension_version: props.extension.versions?.[0]?.version || null,
48+
});
49+
2550
navigateTo(installUrl, {
2651
external: true,
2752
open: {
@@ -37,10 +62,28 @@ const handleInstallClick = () => {
3762
// Show modal if no URL is set
3863
showInstallModal.value = true;
3964
inputUrl.value = '';
65+
66+
$posthog?.capture('marketing.website.marketplace.extension.instance_url.opened', {
67+
extension_id: props.extension.id,
68+
marketplace_extension_name: props.extension.name,
69+
marketplace_extension_version: props.extension.versions?.[0]?.version || null,
70+
});
4071
} else {
4172
// Go directly to marketplace if URL is already set
4273
const installUrl = `${directusInstanceUrl.value}/admin/settings/marketplace/extension/${props.extension.id}`;
4374
75+
const hashed_instance_url = hashedUrl(directusInstanceUrl.value);
76+
77+
$posthog?.capture('marketing.website.marketplace.extension.install.launch', {
78+
marketplace_extension_id: props.extension.id,
79+
marketplace_extension_name: props.extension.name,
80+
marketplace_extension_version: props.extension.versions?.[0]?.version || null,
81+
marketplace_instance_url: hashed_instance_url,
82+
$set: {
83+
latest_marketplace_instance_url: hashed_instance_url,
84+
},
85+
});
86+
4487
navigateTo(installUrl, {
4588
external: true,
4689
open: {
@@ -53,6 +96,18 @@ const handleInstallClick = () => {
5396
const handleEditUrl = () => {
5497
showInstallModal.value = true;
5598
inputUrl.value = directusInstanceUrl.value;
99+
100+
const hashed_instance_url = hashedUrl(inputUrl.value);
101+
102+
$posthog?.capture('marketing.website.marketplace.extension.instance_url.edit', {
103+
marketplace_extension_id: props.extension.id,
104+
marketplace_extension_name: props.extension.name,
105+
marketplace_extension_version: props.extension.versions?.[0]?.version || null,
106+
marketplace_instance_url: hashed_instance_url,
107+
$set: {
108+
latest_marketplace_instance_url: hashed_instance_url,
109+
},
110+
});
56111
};
57112
58113
const isSandboxed = computed(() => {
@@ -218,7 +273,19 @@ function formatSingleVersion(version: string): string {
218273
<div v-if="extension?.name" class="row">
219274
<span class="meta-item">
220275
<BaseIcon name="fa6-brands:npm" size="small" />
221-
<NuxtLink :href="`https://www.npmjs.com/package/${extension.name}`" target="_blank" class="link">
276+
<NuxtLink
277+
:href="`https://www.npmjs.com/package/${extension.name}`"
278+
target="_blank"
279+
class="link"
280+
v-capture="{
281+
event: 'marketing.website.marketplace.extension.npm.open',
282+
props: {
283+
extension_id: extension.id,
284+
extension_name: extension.name,
285+
extension_version: latestVersion?.version || null,
286+
},
287+
}"
288+
>
222289
npm
223290
</NuxtLink>
224291
</span>
@@ -227,14 +294,42 @@ function formatSingleVersion(version: string): string {
227294
<div v-if="latestVersion?.url_repository" class="row">
228295
<span class="meta-item">
229296
<BaseIcon name="fa6-brands:github" size="small" />
230-
<a :href="latestVersion.url_repository" target="_blank" class="link">Repository</a>
297+
<a
298+
:href="latestVersion.url_repository"
299+
target="_blank"
300+
class="link"
301+
v-capture="{
302+
event: 'marketing.website.marketplace.extension.github.open',
303+
props: {
304+
extension_id: extension.id,
305+
extension_name: extension.name,
306+
extension_version: latestVersion?.version || null,
307+
},
308+
}"
309+
>
310+
Repository
311+
</a>
231312
</span>
232313
</div>
233314

234315
<div v-if="latestVersion?.url_bugs" class="row">
235316
<span class="meta-item">
236317
<BaseIcon name="bug_report" size="small" />
237-
<a :href="latestVersion.url_bugs" target="_blank" class="link">Report Issue</a>
318+
<a
319+
:href="latestVersion.url_bugs"
320+
target="_blank"
321+
class="link"
322+
v-capture="{
323+
event: 'marketing.website.marketplace.extension.bugs.open',
324+
props: {
325+
extension_id: extension.id,
326+
extension_name: extension.name,
327+
extension_version: latestVersion?.version || null,
328+
},
329+
}"
330+
>
331+
Report Issue
332+
</a>
238333
</span>
239334
</div>
240335

‎layers/marketplace/components/Templates/TemplatesActions.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,15 @@ defineProps<{
2323
size="large"
2424
block
2525
@click="button.click"
26+
v-capture="{
27+
name: 'marketing.website.marketplace.template.button.click',
28+
properties: {
29+
button,
30+
button_label: button.label,
31+
template_id: template.id,
32+
template_name: template.name,
33+
},
34+
}"
2635
/>
2736
</BaseButtonGroup>
2837

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"embla-carousel-class-names": "^8.5.2",
7070
"embla-carousel-vue": "^8.5.2",
7171
"isomorphic-dompurify": "^2.26.0",
72+
"ohash": "^2.0.11",
7273
"typesense": "^2.0.3",
7374
"vue3-marquee": "^4.2.2",
7475
"zod": "^4.0.13"

0 commit comments

Comments
 (0)