feat: matomo push buttons blog (#126)

* feat

* fix: delete useless abstraction

* fix: last links

* feat: track download buttons

components/Footer.js

@@ -9,6 +9,7 @@ import {
   LINKEDIN_URL,
 } from "../constants"
 import ContactPopup from "./ContactPopup"
+import { push } from "@socialgouv/matomo-next"
 
 export default function Footer() {
   const [showContactPopup, setShowContactPopup] = useState(false)
@@ -102,14 +103,28 @@ export default function Footer() {
               <div className="w-1/4 mt-3 mb-5 border-b border-green-300" />
             </div>
             <div className="grid grid-flow-col gap-6 max-w-md">
-              <a href={ANDROID_URL}>
+              <a
+                href={ANDROID_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() =>
+                  push(["trackEvent", "Download", "Android", "Footer"])
+                }
+              >
                 <img
                   className="object-contain"
                   src={`${baseUrl}/images/other/google-play-fr.png`}
                   alt="Disponible sur Google Play"
                 />
               </a>
-              <a href={IOS_URL}>
+              <a
+                href={IOS_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() =>
+                  push(["trackEvent", "Download", "iOS", "Footer"])
+                }
+              >
                 <img
                   className="object-contain"
                   src={`${baseUrl}/images/other/app-store-fr.png`}

components/Navigation.js

@@ -4,6 +4,7 @@ import { AiOutlineClose } from "react-icons/ai"
 import Fade from "@mui/material/Fade"
 import { HiMenu } from "react-icons/hi"
 import ContactPopup from "./ContactPopup"
+import { push } from "@socialgouv/matomo-next"
 
 import { ANDROID_URL, IOS_URL } from "../constants"
 
@@ -139,14 +140,29 @@ export const DownloadPopup = ({ showPopup, setShowPopup }) => {
           <div className="w-1/5 h-1 bg-oz-pink m-auto my-7" />
           <p className="text-xl mb-7">Elle est 100% gratuite et anonyme.</p>
           <div className="mb-1 grid max-w-[200px] sm:max-w-[400px] sm:grid-flow-col gap-6 auto-cols-fr md:w-5/6 m-auto">
-            <a href={ANDROID_URL} ref={popupFirstFocus} tabIndex={1}>
+            <a
+              href={ANDROID_URL}
+              ref={popupFirstFocus}
+              tabIndex={1}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() =>
+                push(["trackEvent", "Download", "android", "Modale"])
+              }
+            >
               <img
                 className="object-contain w-full"
                 src={`${baseUrl}/images/other/google-play-fr.png`}
                 alt="télécharger dans Google Play"
               />
             </a>
-            <a href={IOS_URL} tabIndex={1}>
+            <a
+              href={IOS_URL}
+              tabIndex={1}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() => push(["trackEvent", "Download", "iOS", "Modale"])}
+            >
               <img
                 className="object-contain w-full"
                 src={`${baseUrl}/images/other/app-store-fr.png`}

content/dry-january-comment-perdre-du-poids-et-se-sentir-mieux-en-un-mois.mdx

@@ -31,7 +31,7 @@ Pour ceux qui souhaitent tirer le meilleur parti du Dry January, voici quelques
 
 - **Engagez-vous publiquement** : Partagez vos intentions avec des amis ou des membres de la famille. L'engagement social peut offrir un soutien supplémentaire et augmenter vos chances de succès.
 - **Trouvez des alternatives** : Explorez d'autres boissons sans alcool comme des eaux pétillantes aromatisées ou des mocktails pour satisfaire l'envie de boire quelque chose de spécial.
-- **Utilisez une application de suivi** : Des applications comme [Oz Ensemble](ozensemble.fabrique.social.gouv.fr) peuvent vous aider à suivre vos progrès et à rester motivé.
+- **Utilisez une application de suivi** : Des applications comme [Oz Ensemble](https://ozensemble.fabrique.social.gouv.fr) peuvent vous aider à suivre vos progrès et à rester motivé.
 - **Soignez votre alimentation et restez actif** : Profitez de la dynamique pour adopter un régime alimentaire sain et augmenter votre niveau d'activité physique.
 
 [En suivant ces conseils](reussir-son-dry-january-avec-oz-ensemble), le Dry January peut être le début d'un mode de vie plus équilibré pour l'année entière.

content/dry-january-votre-guide-complet-pour-un-mois-sans-alcool-avec-laide-de-notre-app.mdx

@@ -44,6 +44,6 @@ Grâce à Oz Ensemble, vous pourrez suivre les jours sans alcool et visualiser v
 #### 2. Des conseils personnalisés :
 
 L'application vous offre des conseils adaptés à votre situation, vous aidant à mieux comprendre vos habitudes et à les changer efficacement.
-Pour plus d’informations sur [Oz Ensemble](ozensemble.fabrique.social.gouv.fr) consulter notre site web, ou [nos autres articles](comment-lapplication-peut-vous-aider-à-tirer-le-meilleur-de-dry-january) sur [l’application Oz Ensemble.](reussir-son-dry-january-avec-oz-ensemble)
+Pour plus d’informations sur [Oz Ensemble](https://ozensemble.fabrique.social.gouv.fr) consulter notre site web, ou [nos autres articles](comment-lapplication-peut-vous-aider-à-tirer-le-meilleur-de-dry-january) sur [l’application Oz Ensemble.](reussir-son-dry-january-avec-oz-ensemble)
 
 En résumé, le Dry January est une excellente occasion de faire une pause et de réfléchir à sa consommation d'alcool. Avec l'aide de l'application Oz Ensemble et des stratégies mentionnées, vous êtes désormais armé.e pour affronter ce défi et potentiellement adopter de meilleures habitudes pour le reste de l'année. Alors, êtes-vous prêt à relever le défi du Dry January ? Téléchargez l'application Oz Ensemble et commencez votre voyage vers un mode de vie plus équilibré dès aujourd'hui!

content/les-bienfaits-de-dry-january-sur-la-santé-mentale-et-physique-un-mois-qui-compte.mdx

@@ -28,9 +28,9 @@ Enfin, l'absence d'alcool dans le système peut également conduire à une meill
 
 ## L'Application Oz Ensemble: Votre Allié pour un Dry January Réussi
 
-Pour ceux qui souhaitent relever le défi du Dry January, l'application [Oz Ensemble](ozensemble.fabrique.social.gouv.fr) peut être un outil précieux. Elle offre un soutien quotidien et des ressources pour vous aider à réduire votre consommation d'alcool. L'application fournit des conseils personnalisés, des suivis de progrès et permet de se fixer des objectifs adaptés à votre rythme.
+Pour ceux qui souhaitent relever le défi du Dry January, l'application [Oz Ensemble](https://ozensemble.fabrique.social.gouv.fr) peut être un outil précieux. Elle offre un soutien quotidien et des ressources pour vous aider à réduire votre consommation d'alcool. L'application fournit des conseils personnalisés, des suivis de progrès et permet de se fixer des objectifs adaptés à votre rythme.
 
-L'utilisation de l'application peut aider à maintenir la motivation tout au long du mois. Elle peut également être utile pour ceux qui s'intéressent à la modération ou à l'abstinence d'alcool au-delà de janvier. Avec [Oz Ensemble](ozensemble.fabrique.social.gouv.fr), Dry January ne se résume pas à une tendance éphémère, mais devient un point de départ pour un changement durable vers une meilleure santé.
+L'utilisation de l'application peut aider à maintenir la motivation tout au long du mois. Elle peut également être utile pour ceux qui s'intéressent à la modération ou à l'abstinence d'alcool au-delà de janvier. Avec [Oz Ensemble](https://ozensemble.fabrique.social.gouv.fr), Dry January ne se résume pas à une tendance éphémère, mais devient un point de départ pour un changement durable vers une meilleure santé.
 
 En conclusion, Dry January est plus qu'une simple mode passagère. C'est une opportunité de redécouvrir le bien-être mental et physique, et de reprendre le contrôle sur sa consommation d'alcool. La participation à ce défi peut avoir des effets positifs durables, et les outils comme l'application Oz Ensemble sont là pour accompagner chaque personne dans ce voyage vers une vie plus équilibrée. Que vous cherchiez à faire une pause temporaire ou à changer votre rapport à l'alcool sur le long terme, Dry January est un pas dans la bonne direction.
 

pages/blog/[blog].js

@@ -12,21 +12,32 @@ import styles from "../../style/bloga.module.css"
 import { ANDROID_URL, IOS_URL } from "../../constants"
 import appStorePic from "../../public/images/other/app-store-fr.png"
 import googlePlayPic from "../../public/images/other/google-play-fr.png"
+import { push } from "@socialgouv/matomo-next"
 
 const Blog = ({ mdxSource, data }) => {
   const [showPopup, setShowPopup] = useState(false)
 
   const components = {
     DownloadButtons: () => (
       <div className="mb-1 grid max-w-[200px] sm:max-w-[400px] sm:grid-flow-col gap-6 auto-cols-fr md:w-5/6 m-auto">
-        <a href={ANDROID_URL}>
+        <a
+          href={ANDROID_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => push(["trackEvent", "Download", "Android", "Blog"])}
+        >
           <img
             className="object-contain w-full"
             src={googlePlayPic.src}
             alt="télécharger dans Google Play"
           />
         </a>
-        <a href={IOS_URL}>
+        <a
+          href={IOS_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => push(["trackEvent", "Download", "iOS", "Blog"])}
+        >
           <img
             className="object-contain w-full"
             src={appStorePic.src}

pages/index.js

@@ -2,6 +2,7 @@ import Footer from "../components/Footer"
 import Navigation, { DownloadPopup } from "../components/Navigation"
 import { ANDROID_URL, IOS_URL } from "../constants"
 import { useState } from "react"
+import { push } from "@socialgouv/matomo-next"
 
 export default function Index() {
   const [showPopup, setShowPopup] = useState(false)
@@ -21,14 +22,28 @@ export default function Index() {
                 L'application mobile pour maitriser sa consommation d'alcool
               </p>
               <div className="grid grid-flow-col gap-3 sm:gap-6 max-w-sm mb-7 mx-auto md:mx-0">
-                <a href={ANDROID_URL}>
+                <a
+                  href={ANDROID_URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() =>
+                    push(["trackEvent", "Download", "android", "MainPage"])
+                  }
+                >
                   <img
                     className="object-contain w-full"
                     src="images/other/google-play-fr.png"
                     alt="disponible sur google play"
                   />
                 </a>
-                <a href={IOS_URL}>
+                <a
+                  href={IOS_URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() =>
+                    push(["trackEvent", "Download", "iOS", "MainPage"])
+                  }
+                >
                   <img
                     className="object-contain w-full"
                     src="images/other/app-store-fr.png"