diff --git a/frontend/src/components/VHeader/VHeaderInternal.vue b/frontend/src/components/VHeader/VHeaderInternal.vue index 0b9481e1e8e..fd4e3a79169 100644 --- a/frontend/src/components/VHeader/VHeaderInternal.vue +++ b/frontend/src/components/VHeader/VHeaderInternal.vue @@ -87,6 +87,7 @@ import { computed, defineComponent, ref, watch } from "vue" import { useRoute } from "@nuxtjs/composition-api" import { useDialogControl } from "~/composables/use-dialog-control" +import { useAnalytics } from "~/composables/use-analytics" import usePages from "~/composables/use-pages" import { useUiStore } from "~/stores/ui" @@ -119,6 +120,8 @@ export default defineComponent({ const route = useRoute() + const { sendCustomEvent } = useAnalytics() + const { all: allPages, current: currentPage } = usePages() const isModalVisible = ref(false) @@ -148,6 +151,13 @@ export default defineComponent({ deactivateFocusTrap, }) + const eventedOnTriggerClick = () => { + if (!isModalVisible.value) { + sendCustomEvent("OPEN_PAGES_MENU", {}) + } + return onTriggerClick() + } + // When clicking on an internal link in the modal, close the modal watch(route, () => { if (isModalVisible.value) { @@ -167,7 +177,7 @@ export default defineComponent({ closePageMenu, openPageMenu, isSm, - onTriggerClick, + onTriggerClick: eventedOnTriggerClick, triggerA11yProps, triggerElement, } diff --git a/frontend/src/types/analytics.ts b/frontend/src/types/analytics.ts index 2b2d9a1700e..5f91e889eba 100644 --- a/frontend/src/types/analytics.ts +++ b/frontend/src/types/analytics.ts @@ -45,6 +45,13 @@ export type Events = { /** The unique ID of the media */ id: string } + /** + * Description: The user opens the menu which lists pages. + * Questions: + * - How often is this menu used? + * - Is this menu visible enough? + */ + OPEN_PAGES_MENU: Record /** * Description: The user right clicks a single image result, most likely to download it. * Questions: diff --git a/frontend/test/unit/specs/components/VHeader/v-header-internal.spec.js b/frontend/test/unit/specs/components/VHeader/v-header-internal.spec.js new file mode 100644 index 00000000000..bfe6ef3e21a --- /dev/null +++ b/frontend/test/unit/specs/components/VHeader/v-header-internal.spec.js @@ -0,0 +1,52 @@ +import { fireEvent } from "@testing-library/vue" + +import { render } from "~~/test/unit/test-utils/render" + +import { useAnalytics } from "~/composables/use-analytics" + +import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue" + +jest.mock("~/composables/use-analytics", () => ({ + useAnalytics: jest.fn(), +})) + +jest.mock("@nuxtjs/composition-api", () => { + const { ref } = require("vue") + return { + useContext: () => ({ + app: { + localePath: jest.fn().mockReturnValue("/en"), + }, + }), + useRoute: jest.fn().mockReturnValue( + ref({ + name: "route_name__extra", + }) + ), + } +}) + +describe("VHeaderInternal", () => { + let options = null + const sendCustomEventMock = jest.fn() + + beforeEach(() => { + useAnalytics.mockImplementation(() => ({ + sendCustomEvent: sendCustomEventMock, + })) + options = { + stubs: ["ClientOnly"], + } + }) + + it("sends OPEN_PAGES_MENU analytics event when pages menu triggered", async () => { + const screen = render(VHeaderInternal, options) + const pagesMenuTrigger = screen.getByLabelText("menu") + + await fireEvent.click(pagesMenuTrigger) + + expect(sendCustomEventMock).toHaveBeenCalledWith("OPEN_PAGES_MENU", {}) + + await fireEvent.click(pagesMenuTrigger) + }) +})