Set up Matomo for analytics/tracking (#44)

.env.example

@@ -1 +1,4 @@
 NEXT_PUBLIC_API_BASE_URL=http://localhost:3000/api
+
+NEXT_PUBLIC_MATOMO_URL=https://piwik.technologiestiftung-berlin.de
+NEXT_PUBLIC_MATOMO_SITE_ID=1234

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
+    "@socialgouv/matomo-next": "1.6.1",
     "lucide-react": "^0.263.1",
     "next": "13.4.7",
     "next-intl": "^2.17.5",

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/hooks/useAnalytics.ts

@@ -0,0 +1,17 @@
+import { init } from "@socialgouv/matomo-next";
+import { useEffect, useRef } from "react";
+
+const MATOMO_URL = process.env.NEXT_PUBLIC_MATOMO_URL as string;
+const MATOMO_SITE_ID = process.env.NEXT_PUBLIC_MATOMO_SITE_ID as string;
+
+export function useAnalytics() {
+	const matomoInitialized = useRef(false);
+	useEffect(() => {
+		if (MATOMO_URL && MATOMO_SITE_ID && matomoInitialized.current === false) {
+			init({ url: MATOMO_URL, siteId: MATOMO_SITE_ID });
+		}
+		return () => {
+			matomoInitialized.current = true;
+		};
+	}, []);
+}

src/pages/_app.tsx

@@ -2,12 +2,14 @@ import { NextIntlClientProvider } from "next-intl";
 import type { AppProps } from "next/app";
 import "react-tooltip/dist/react-tooltip.css";
 import GlobalStyles from "../components/GlobalStyles";
+import { useAnalytics } from "../hooks/useAnalytics";
 
 type CustomPageProps = {
 	messages: IntlMessages;
 };
 
 export default function App({ Component, pageProps }: AppProps<CustomPageProps>) {
+	useAnalytics();
 	return (
 		<NextIntlClientProvider messages={pageProps.messages}>
 			<GlobalStyles />

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