fix: fix matomo implementation

.changeset/itchy-schools-rule.md

@@ -0,0 +1,5 @@
+---
+"yes-no-maybe-app": patch
+---
+
+fix: use working matomo trackPageView() implementation

landingpage/src/providers/matomo/MatomoProvider.tsx

@@ -12,8 +12,9 @@ import MatomoTracker from "@jonkoops/matomo-tracker";
 
 export const MatomoProvider = component$(() => {
   const matomoState = useStore<MatomoInstanceState>({
-    instance: noSerialize(undefined),
+    matomo: noSerialize(undefined),
   });
+  useContextProvider(MatomoContext, matomoState);
 
   // eslint-disable-next-line qwik/no-use-visible-task
   useVisibleTask$(() => {
@@ -39,9 +40,8 @@ export const MatomoProvider = component$(() => {
         },
       }),
     );
-    matomoState.instance = _instance;
+    matomoState.matomo = noSerialize(_instance);
   });
-  useContextProvider(MatomoContext, matomoState);
   return <Slot />;
 });
 

landingpage/src/providers/matomo/index.ts

@@ -1,4 +1,3 @@
 export { default as MatomoContext } from './MatomoContext'
 export { default as MatomoProvider } from './MatomoProvider'
-export { default as createInstance } from './instance'
-export { default as useMatomo } from './useMatomo'
+export { default as createInstance } from './instance'

landingpage/src/providers/matomo/types.ts

@@ -22,5 +22,5 @@ export type TrackSiteSearchParams = types.TrackSiteSearchParams
 export type TrackLinkParams = types.TrackLinkParams
 
 export interface MatomoInstanceState {
-  instance: NoSerialize<MatomoInstance>;
+  matomo: NoSerialize<MatomoInstance>;
 }

landingpage/src/routes/[...locale]/index.tsx

@@ -1,4 +1,10 @@
-import { $, component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
+import {
+  $,
+  component$,
+  useContext,
+  useSignal,
+  useVisibleTask$,
+} from "@builder.io/qwik";
 import {
   DocumentHead,
   Link,
@@ -17,7 +23,7 @@ import {
   useForm,
   valiForm$,
 } from "@modular-forms/qwik";
-import { useMatomo } from "~/providers/matomo";
+import { MatomoContext, useMatomo } from "~/providers/matomo";
 
 const ContactSchema = object({
   name: string([minLength(1, $localize`Please enter your name.`)]),
@@ -41,8 +47,8 @@ export const useFormLoader = routeLoader$<InitialValues<ContactForm>>(() => ({
 //   // Runs on server
 //   const { Client } = await import("node-mailjet");
 //   const mailjet = Client.apiConnect(
-//     process.env.MJ_APIKEY_PUBLIC ?? "xxx",
-//     process.env.MJ_APIKEY_PRIVATE ?? "xxx",
+//     process.env.MJ_APIKEY_PUBLIC ?? "76f4a9a03bb481c4f0ffbfab16b3c79b",
+//     process.env.MJ_APIKEY_PRIVATE ?? "afaa7a584eb54bf52c5452639d67524f",
 //   );
 //   const request = mailjet.post("send", { version: "v3.1" }).request({
 //     Messages: [
@@ -87,7 +93,14 @@ export const sendEmail = $((values: ContactForm) => {
 });
 
 export default component$(() => {
-  const { trackPageView, trackEvent } = useMatomo();
+  const { matomo } = useContext(MatomoContext);
+  // eslint-disable-next-line qwik/no-use-visible-task
+  useVisibleTask$(
+    () => {
+      matomo?.trackPageView();
+    },
+    { strategy: "document-idle" },
+  );
 
   const [, { Form, Field }] = useForm<ContactForm>({
     loader: useFormLoader(),
@@ -97,15 +110,18 @@ export default component$(() => {
 
   const handleSubmit = $<SubmitHandler<ContactForm>>((values) => {
     // console.log(values);
-    trackEvent({ action: "submit", name: "contact-form", category: "form" });
+    matomo?.trackEvent({
+      action: "submit",
+      name: "contact-form",
+      category: "form",
+    });
     sendEmail(values);
   });
 
   const showContent = useSignal<boolean>(false);
   // eslint-disable-next-line qwik/no-use-visible-task
   useVisibleTask$(() => {
     showContent.value = true;
-    trackPageView();
   });
 
   return (