Tracking image campaign clicks in umami.

assets/components/campaigns/campaign.vue

@@ -1,6 +1,7 @@
 <template>
 	<iframe
 		v-if="campaign?.banner?.type === 'html'"
+		ref="iframe"
 		:width="campaign.banner.width"
 		:height="campaign.banner.height"
 		:src="getSource(campaign)"
@@ -15,6 +16,8 @@
 		:href="campaign.url || campaign.affiliate?.url"
 		target="_blank"
 		class="campaign"
+		data-umami-event="campaign-click"
+		:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
 	>
 		<img
 			:src="getSource(campaign)"
@@ -217,4 +220,17 @@ export default {
 	max-height: 100%;
 	max-width: 100%;
 }
+
+.frame-container {
+	position: relative;
+	font-size: 0;
+}
+
+.frame-target {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
 </style>

assets/js/ui/actions.js

@@ -259,7 +259,6 @@ function initUiActions(store, _router) {
 	}
 
 	async function fetchCampaign(context, campaignId) {
-		console.log(campaignId);
 		const { campaign } = await graphql(`
 			query Campaign(
 				$campaignId: Int!