Tracking posthog sur le site

incubateur-ademe · Oct 10, 2024 · 120fc97 · 120fc97
1 parent 34d9fa4
commit 120fc97
Show file tree

Hide file tree

Showing 19 changed files with 233 additions and 110 deletions.
diff --git a/packages/site/app/Accompagnement.tsx b/packages/site/app/Accompagnement.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@tet/ui';
+import { Button, useEventTracker } from '@tet/ui';
 import { StrapiItem } from '@tet/site/src/strapi/StrapiItem';
 import { StrapiImage } from '@tet/site/components/strapiImage/StrapiImage';
 import Section from '@tet/site/components/sections/Section';
@@ -22,6 +22,8 @@ const Accompagnement = ({
   description,
   contenu,
 }: AccompagnementProps) => {
+  const tracker = useEventTracker('site/accueil');
+
   return (
     <Section
       containerClassName="max-md:!py-6 md:!pt-14"
@@ -56,7 +58,16 @@ const Accompagnement = ({
                 />
               </div>
 
-              <Button href={c.button.href} size="xs">
+              <Button
+                href={c.button.href}
+                onClick={() => {
+                  if (c.button.href === '/programme')
+                    tracker('decouvrir_programme', {});
+                  if (c.button.href === '/outil-numerique')
+                    tracker('decouvrir_plateforme', {});
+                }}
+                size="xs"
+              >
                 {c.button.titre}
               </Button>
             </div>

diff --git a/packages/site/app/DemandeContact.tsx b/packages/site/app/DemandeContact.tsx
@@ -1,14 +1,16 @@
 'use client';
 
 import Section from '@tet/site/components/sections/Section';
-import { Button } from '@tet/ui';
+import { Button, useEventTracker } from '@tet/ui';
 
 type DemandeContactProps = {
   description: string;
   cta: string;
 };
 
 const DemandeContact = ({ description, cta }: DemandeContactProps) => {
+  const tracker = useEventTracker('site/accueil');
+
   return (
     <Section
       className="items-center justify-center !gap-8"
@@ -17,6 +19,7 @@ const DemandeContact = ({ description, cta }: DemandeContactProps) => {
       <h2 className="text-white text-center max-w-5xl mb-0">{description}</h2>
       <Button
         href="/contact"
+        onClick={() => tracker('demande_contact', {})}
         variant="secondary"
         className="!bg-[#FFE8BD] !border-[#FFE8BD] !text-primary-7 hover:!text-primary-8"
       >

diff --git a/packages/site/app/Newsletter.tsx b/packages/site/app/Newsletter.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import Section from '@tet/site/components/sections/Section';
-import { Button } from '@tet/ui';
+import { Button, useEventTracker } from '@tet/ui';
 
 type NewsletterProps = {
   titre: string;
@@ -16,6 +16,8 @@ const Newsletter = ({
   ctaLinkedin,
   ctaNewsletter,
 }: NewsletterProps) => {
+  const tracker = useEventTracker('site/accueil');
+
   return (
     <Section containerClassName="bg-primary-1 max-md:!py-6 md:max-lg:!py-12 lg:!py-20">
       <h2 className="text-center mb-0">{titre}</h2>
@@ -30,7 +32,11 @@ const Newsletter = ({
         >
           {ctaLinkedin}
         </Button>
-        <Button href="https://cloud.contact.ademe.fr/inscription-tete" external>
+        <Button
+          href="https://cloud.contact.ademe.fr/inscription-tete"
+          onClick={() => tracker('inscription_newsletter', {})}
+          external
+        >
           {ctaNewsletter}
         </Button>
       </div>

diff --git a/packages/site/app/TrackPage.tsx b/packages/site/app/TrackPage.tsx
diff --git a/packages/site/app/contact/ContactForm.tsx b/packages/site/app/contact/ContactForm.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import { supabase } from '../initSupabase';
 import { options } from './data';
-import { Button } from '@tet/ui';
+import { Button, useEventTracker } from '@tet/ui';
 import { useRouter, useSearchParams } from 'next/navigation';
 
 type FormData = {
@@ -32,6 +32,7 @@ const ContactForm = () => {
 
   const searchParams = useSearchParams();
   const router = useRouter();
+  const tracker = useEventTracker('site/contact');
 
   const objet = searchParams.get('objet');
 
@@ -118,7 +119,12 @@ const ContactForm = () => {
 
   return (
     <>
-      <form onSubmit={handleSubmit}>
+      <form
+        onSubmit={(event) => {
+          handleSubmit(event);
+          tracker('envoyer_message', {});
+        }}
+      >
         <div className="fr-input-group">
           <label className="fr-label" htmlFor="input-objet">
             Objet de votre message

diff --git a/packages/site/app/contact/page.tsx b/packages/site/app/contact/page.tsx
@@ -8,6 +8,7 @@ import ContactForm from './ContactForm';
 import { Metadata, ResolvingMetadata } from 'next';
 import { getStrapiData } from './utils';
 import { getUpdatedMetadata } from '@tet/site/src/utils/getUpdatedMetadata';
+import { TrackPageView } from '@tet/ui';
 
 export async function generateMetadata(
   params: { params: unknown },
@@ -27,37 +28,43 @@ export async function generateMetadata(
 const Contact = async () => {
   const data = await getStrapiData();
 
-  return data ? (
-    <Section>
-      <h1>{data.titre ?? "Contacter l'équipe"}</h1>
+  return (
+    <>
+      <TrackPageView pageName={'site/contact'} properties={{}} />
 
-      {!!data.description && <p className="text-xl">{data.description}</p>}
+      {data ? (
+        <Section>
+          <h1>{data.titre ?? "Contacter l'équipe"}</h1>
 
-      <div className="p-4 md:p-14 lg:px-28 bg-gray-100 mb-6">
-        <p className="text-sm">Tous les champs sont obligatoires</p>
-        <ContactForm />
-      </div>
-      {!!data.telephone && (
-        <div>
-          <p className="font-bold flex gap-2 mb-0">
-            <PhoneIcon />
-            Tél. : {data.telephone}
-          </p>
-          <p className="text-[#666]">{data.horaires}</p>
-        </div>
-      )}
+          {!!data.description && <p className="text-xl">{data.description}</p>}
+
+          <div className="p-4 md:p-14 lg:px-28 bg-gray-100 mb-6">
+            <p className="text-sm">Tous les champs sont obligatoires</p>
+            <ContactForm />
+          </div>
+          {!!data.telephone && (
+            <div>
+              <p className="font-bold flex gap-2 mb-0">
+                <PhoneIcon />
+                Tél. : {data.telephone}
+              </p>
+              <p className="text-[#666]">{data.horaires}</p>
+            </div>
+          )}
 
-      {!!data.couverture && (
-        <StrapiImage
-          data={data.couverture}
-          className="w-full"
-          containerClassName="w-full my-6"
-          displayCaption={data.legendeVisible}
-        />
+          {!!data.couverture && (
+            <StrapiImage
+              data={data.couverture}
+              className="w-full"
+              containerClassName="w-full my-6"
+              displayCaption={data.legendeVisible}
+            />
+          )}
+        </Section>
+      ) : (
+        <NoResult />
       )}
-    </Section>
-  ) : (
-    <NoResult />
+    </>
   );
 };
 

diff --git a/packages/site/app/layout.tsx b/packages/site/app/layout.tsx
@@ -5,7 +5,6 @@ import { PHProvider } from '@tet/site/providers/posthog';
 import { Metadata, Viewport } from 'next';
 import Script from 'next/script';
 import './global.css';
-import TrackPage from './TrackPage';
 import { getMetaData } from './utils';
 
 export const viewport: Viewport = {
@@ -81,7 +80,6 @@ export default function RootLayout({ children }: { children: JSX.Element }) {
             <div className="grow flex flex-col">{children}</div>
           </div>
           <Footer />
-          <TrackPage />
 
           <noscript>
             <img

diff --git a/packages/site/app/outil-numerique/HeaderPlateforme.tsx b/packages/site/app/outil-numerique/HeaderPlateforme.tsx
@@ -5,7 +5,7 @@ import { StrapiImage } from '@tet/site/components/strapiImage/StrapiImage';
 import { useEvolutionTotalActivation } from '@tet/site/app/stats/EvolutionTotalActivationParType';
 import { StrapiItem } from '@tet/site/src/strapi/StrapiItem';
 import Arrow from './Arrow';
-import { Button } from '@tet/ui';
+import { Button, useEventTracker } from '@tet/ui';
 
 type HeaderPlateformeProps = {
   titre: string;
@@ -28,6 +28,7 @@ const HeaderPlateforme = ({
 }: HeaderPlateformeProps) => {
   const { data } = useEvolutionTotalActivation('', '');
   const collectivitesActivees = data ? data.courant.total : undefined;
+  const tracker = useEventTracker('site/outil-numerique');
 
   return (
     <Section containerClassName="bg-gradient-to-b from-[#F4F5FD] to-[#FFFFFF] !pb-0">
@@ -39,15 +40,25 @@ const HeaderPlateforme = ({
       </p>
       <div className="flex max-md:flex-col gap-y-4 gap-x-8 justify-center items-center">
         <div className="max-md:flex max-md:flex-col max-md:items-center">
-          <Button href={url_inscription}>{cta_inscription}</Button>
+          <Button
+            href={url_inscription}
+            onClick={() => tracker('inscription_plateforme', {})}
+          >
+            {cta_inscription}
+          </Button>
           {!!collectivitesActivees && (
             <p className="md:hidden text-primary-9 text-[13px] font-bold mb-0 pt-2">
               Déjà {collectivitesActivees} collectivités utilisatrices
             </p>
           )}
         </div>
 
-        <Button href={url_demo} variant="outlined" icon="play-circle-line">
+        <Button
+          href={url_demo}
+          onClick={() => tracker('inscription_demo', {})}
+          variant="outlined"
+          icon="play-circle-line"
+        >
           {cta_demo}
         </Button>
       </div>

diff --git a/packages/site/app/outil-numerique/PanierActionsImpact.tsx b/packages/site/app/outil-numerique/PanierActionsImpact.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@tet/ui';
+import { Button, useEventTracker } from '@tet/ui';
 import Section from '@tet/site/components/sections/Section';
 import { StrapiItem } from '@tet/site/src/strapi/StrapiItem';
 import { StrapiImage } from '@tet/site/components/strapiImage/StrapiImage';
@@ -19,6 +19,8 @@ const PanierActionsImpact = ({
   cta,
   image,
 }: PanierActionsImpactProps) => {
+  const tracker = useEventTracker('site/outil-numerique');
+
   return (
     <Section
       className="flex lg:!flex-row justify-between items-center !gap-12"
@@ -39,6 +41,7 @@ const PanierActionsImpact = ({
         />
         <Button
           href={`${process.env.NEXT_PUBLIC_PANIER_URL}/landing`}
+          onClick={() => tracker('decouvrir_pai', {})}
           className="mt-6 max-lg:mx-auto"
         >
           {cta}

diff --git a/packages/site/app/outil-numerique/QuestionsPlateforme.tsx b/packages/site/app/outil-numerique/QuestionsPlateforme.tsx
@@ -2,7 +2,7 @@
 
 import Markdown from '@tet/site/components/markdown/Markdown';
 import Section from '@tet/site/components/sections/Section';
-import { Button } from '@tet/ui';
+import { Button, useEventTracker } from '@tet/ui';
 
 type QuestionsPlateformeProps = {
   titre: string;
@@ -17,6 +17,8 @@ const QuestionsPlateforme = ({
   cta_faq,
   cta_contact,
 }: QuestionsPlateformeProps) => {
+  const tracker = useEventTracker('site/outil-numerique');
+
   return (
     <Section containerClassName="bg-primary-7 max-md:!py-6 md:max-lg:!py-12 lg:!py-20">
       <h2 className="text-center text-white mb-1">{titre}</h2>
@@ -34,6 +36,7 @@ const QuestionsPlateforme = ({
         </Button>
         <Button
           href="/contact"
+          onClick={() => tracker('contact_plateforme', {})}
           variant="outlined"
           className="!bg-[#FFE8BD] hover:!bg-[#FFE4A8]"
         >

diff --git a/packages/site/app/outil-numerique/Trajectoire.tsx b/packages/site/app/outil-numerique/Trajectoire.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@tet/ui';
+import { Button, useEventTracker } from '@tet/ui';
 import Section from '@tet/site/components/sections/Section';
 import { StrapiItem } from '@tet/site/src/strapi/StrapiItem';
 import { StrapiImage } from '@tet/site/components/strapiImage/StrapiImage';
@@ -14,6 +14,8 @@ type TrajectoireProps = {
 };
 
 const Trajectoire = ({ titre, description, cta, image }: TrajectoireProps) => {
+  const tracker = useEventTracker('site/outil-numerique');
+
   return (
     <Section
       className="flex lg:!flex-row justify-between items-center !gap-12"
@@ -25,7 +27,11 @@ const Trajectoire = ({ titre, description, cta, image }: TrajectoireProps) => {
           texte={description}
           className="paragraphe-primary-10 paragraphe-18 markdown_style colored_marker"
         />
-        <Button href="/trajectoire" className="mt-6 max-lg:mx-auto">
+        <Button
+          href="/trajectoire"
+          onClick={() => tracker('decouvrir_trajectoire', {})}
+          className="mt-6 max-lg:mx-auto"
+        >
           {cta}
         </Button>
       </div>