Add custom events for button clicks on homepage

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 (
 		<Container>
 			<ImageContainer>
@@ -34,7 +42,7 @@ export default function NewsletterSection() {
 					{t("title")}
 				</Text>
 				<Spacer size={16} />
-				<ButtonWithIcon as="a" icon="mail" href="mailto:[email protected]">
+				<ButtonWithIcon as="a" icon="mail" href="mailto:[email protected]" onClick={trackButtonClick}>
 					{t("button")}
 				</ButtonWithIcon>
 			</TextContainer>

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) {

src/components/HomePage/index.tsx

@@ -67,19 +67,19 @@ export default function HomePage() {
 				<IntroSection />
 				<RequestCreatorAndList />
 			</Section>
-			<NewsletterSection />
+			<NewsletterSection trackingPosition="first" />
 			<Section ref={artistSectionRef} id={AnchorLinks.ARTISTSECTION}>
 				<ArtistSection />
 			</Section>
-			<NewsletterSection />
+			<NewsletterSection trackingPosition="second" />
 			<Section ref={interestedSectionRef} id={AnchorLinks.INTERESTEDSECTION}>
 				<CultureInterestedSection />
 			</Section>
-			<NewsletterSection />
+			<NewsletterSection trackingPosition="third" />
 			<Section ref={dataSectionRef} id={AnchorLinks.DATASECTION}>
 				<DataUsersSection />
 			</Section>
-			<NewsletterSection />
+			<NewsletterSection trackingPosition="fourth" />
 		</Page>
 	);
 }

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);
+}