diff --git a/src/components/HomePage/NewsletterSection/index.tsx b/src/components/HomePage/NewsletterSection/index.tsx index 7516d8d..71147cb 100644 --- a/src/components/HomePage/NewsletterSection/index.tsx +++ b/src/components/HomePage/NewsletterSection/index.tsx @@ -1,6 +1,7 @@ import styled from "@emotion/styled"; import { useTranslations } from "next-intl"; import { borderWidths, colors, spacings } from "../../../common/styleVariables"; +import { trackEvent } from "../../../services/analytics"; import ButtonWithIcon from "../../ButtonWithIcon"; import Spacer from "../../Spacer"; import Text from "../../Text"; @@ -21,8 +22,15 @@ const TextContainer = styled.div({ flex: "1 1 auto", }); -export default function NewsletterSection() { +type Props = { + trackingPosition: string; +}; + +export default function NewsletterSection({ trackingPosition }: Props) { const t = useTranslations("Home.newsletter-section"); + const trackButtonClick = () => { + trackEvent("Homepage", "Click 'Contact us' button", trackingPosition); + }; return ( @@ -34,7 +42,7 @@ export default function NewsletterSection() { {t("title")} - + {t("button")} diff --git a/src/components/HomePage/RequestCreatorAndList/RequestCreator/index.tsx b/src/components/HomePage/RequestCreatorAndList/RequestCreator/index.tsx index 4f4319b..3b5ca35 100644 --- a/src/components/HomePage/RequestCreatorAndList/RequestCreator/index.tsx +++ b/src/components/HomePage/RequestCreatorAndList/RequestCreator/index.tsx @@ -1,5 +1,6 @@ import { useTranslations } from "next-intl"; import { useCallback, useState } from "react"; +import { trackEvent } from "../../../../services/analytics"; import { getRandomIndexWithout } from "../../../../services/arrays"; import ButtonWithIcon from "../../../ButtonWithIcon"; import Spacer from "../../../Spacer"; @@ -30,6 +31,7 @@ export default function RequestCreator({ onStartRequestCreation, onRequestCreate const handleCreateRequest = useCallback(() => { onStartRequestCreation(); randomizeRequest(); + trackEvent("Homepage", "Create random request"); }, [onStartRequestCreation, randomizeRequest]); const handleAnimationFinished = useCallback(() => { if (request) { diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx index cd8446e..c0a2836 100644 --- a/src/components/HomePage/index.tsx +++ b/src/components/HomePage/index.tsx @@ -67,19 +67,19 @@ export default function HomePage() { - +
- +
- +
- + ); } diff --git a/src/services/analytics.ts b/src/services/analytics.ts new file mode 100644 index 0000000..44201c6 --- /dev/null +++ b/src/services/analytics.ts @@ -0,0 +1,14 @@ +import { push } from "@socialgouv/matomo-next"; + +type EventCategory = "Homepage"; + +/** + * Track a custom analytics event via Matomo. + * Docs: https://matomo.org/faq/reports/implement-event-tracking-with-matomo/ + */ +export function trackEvent(eventCategory: EventCategory, eventAction: string, eventName?: string, eventValue?: number) { + const filledParameters = ["trackEvent", eventCategory, eventAction, eventName, eventValue].filter( + (parameter) => parameter !== undefined + ); + push(filledParameters); +}