Analytics event: REPORT_MEDIA

frontend/src/components/VContentReport/VContentReportForm.vue

@@ -65,6 +65,7 @@
             v-if="media.foreign_landing_url && selectedReason === DMCA"
             :provider="providerName"
             :foreign-landing-url="media.foreign_landing_url"
+            @click="handleDmcaSubmit"
           />
           <VReportDescForm
             v-if="selectedReason !== DMCA"
@@ -90,6 +91,7 @@
             as="VLink"
             variant="secondary-filled"
             :href="DMCA_FORM_URL"
+            @click="handleDmcaSubmit"
           >
             {{ $t("media-details.content-report.form.dmca.open") }}
             <VIcon :size="4" class="ms-1" :icon-path="icons.externalLink" />
@@ -128,6 +130,7 @@ import {
 } from "~/constants/content-report"
 
 import type { AudioDetail, ImageDetail } from "~/types/media"
+import { useAnalytics } from "~/composables/use-analytics"
 
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -183,17 +186,38 @@ export default defineComponent({
     const isSubmitDisabled = computed(
       () => selectedReason.value === OTHER && description.value.length < 20
     )
+
+    const { sendCustomEvent } = useAnalytics()
+
+    const handleDmcaSubmit = () => {
+      sendCustomEvent("REPORT_MEDIA", {
+        id: props.media.id,
+        mediaType: props.media.frontendMediaType,
+        provider: props.media.provider,
+        reason: selectedReason.value,
+      })
+      status.value = SENT
+    }
     const handleSubmit = async (event: Event) => {
       event.preventDefault()
-      if (selectedReason.value === DMCA) return
       // Submit report
       try {
+        const mediaType = props.media.frontendMediaType
+        const reason = selectedReason.value
+
         await ReportService.sendReport({
-          mediaType: props.media.frontendMediaType,
+          mediaType,
+          reason,
           identifier: props.media.id,
-          reason: selectedReason.value,
           description: description.value,
         })
+
+        sendCustomEvent("REPORT_MEDIA", {
+          mediaType,
+          reason,
+          id: props.media.id,
+          provider: props.media.provider,
+        })
         status.value = SENT
       } catch (error) {
         status.value = FAILED
@@ -219,6 +243,7 @@ export default defineComponent({
 
       isSubmitDisabled,
       handleSubmit,
+      handleDmcaSubmit,
     }
   },
 })

frontend/src/components/VContentReport/VDmcaNotice.vue

@@ -9,6 +9,7 @@
         :aria-label="$t('media-details.content-report.form.dmca.form')"
         :href="DMCA_FORM_URL"
         class="text-pink hover:underline"
+        @click="$emit('click')"
         >{{ $t("media-details.content-report.form.dmca.form") }}</VLink
       >
     </template>
@@ -24,6 +25,7 @@
 import { defineComponent } from "vue"
 
 import { DMCA_FORM_URL } from "~/constants/content-report"
+import { defineEvent } from "~/types/emits"
 
 import VLink from "~/components/VLink.vue"
 
@@ -46,6 +48,9 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: {
+    click: defineEvent(),
+  },
   setup() {
     return {
       DMCA_FORM_URL,

frontend/src/types/analytics.ts

@@ -1,4 +1,5 @@
 import type { MediaType } from "~/constants/media"
+import type { ReportReason } from "~/constants/content-report"
 
 /**
  * Compound type of all custom events sent from the site; Index with `EventName`
@@ -52,6 +53,27 @@ export type Events = {
     /** The media type being searched */
     mediaType: MediaType
   }
+  /**
+   * Description: The user reports a piece of media through our form
+   * Questions:
+   *   - How often do we get reports?
+   *   - Which types of reports are more common?
+   *   - Do we see an uptick in reports when a certain provider
+   *     is added/updated/refreshed?
+   * Note: Because the DMCA report is sent via a Google form, we send
+   * this event when the form is opened, and not when the report form
+   * is actually sent.
+   */
+  REPORT_MEDIA: {
+    /** the unique ID of the media */
+    id: string
+    /** the slug (not the prettified name) of the provider */
+    provider: string
+    /** the media type being searched */
+    mediaType: MediaType
+    /** the reason for the report */
+    reason: ReportReason
+  }
 }
 
 /**

frontend/test/unit/specs/components/v-content-report-form.spec.js

@@ -1,17 +1,20 @@
-import { fireEvent, render, screen } from "@testing-library/vue"
 import VueI18n from "vue-i18n"
 
+import { fireEvent, render, screen } from "@testing-library/vue"
+import { createLocalVue } from "@vue/test-utils"
+
+import { createPinia } from "~~/test/unit/test-utils/pinia"
+import i18n from "~~/test/unit/test-utils/i18n"
+
 import ReportService from "~/data/report-service"
 
 import VContentReportForm from "~/components/VContentReport/VContentReportForm.vue"
 
-const messages = require("~/locales/en.json")
-
-const i18n = new VueI18n({
-  locale: "en",
-  fallbackLocale: "en",
-  messages: { en: messages },
-})
+jest.mock("~/composables/use-analytics", () => ({
+  useAnalytics: jest.fn(() => ({
+    sendCustomEvent: jest.fn(),
+  })),
+}))
 
 const getDmcaInput = () =>
   screen.getByRole("radio", {
@@ -54,6 +57,8 @@ jest.mock("~/data/report-service", () => ({
 describe("VContentReportForm", () => {
   let props = null
   let options = {}
+  let pinia = null
+  let localVue = null
 
   beforeEach(() => {
     props = {
@@ -66,11 +71,17 @@ describe("VContentReportForm", () => {
       providerName: "Provider",
       closeFn: jest.fn(),
     }
+    pinia = createPinia()
+    localVue = createLocalVue()
+    localVue.use(pinia)
+    localVue.use(VueI18n)
 
     options = {
       propsData: props,
-      i18n,
       stubs: ["VIcon"],
+      localVue,
+      pinia,
+      i18n,
     }
   })