feat: track download buttons

SocialGouv · Jan 9, 2024 · f2ab048 · f2ab048
1 parent 431a23a
commit f2ab048
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 10 deletions.
diff --git a/components/Footer.js b/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`}

diff --git a/components/Navigation.js b/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`}

diff --git a/pages/blog/[blog].js b/pages/blog/[blog].js
@@ -22,9 +22,9 @@ const Blog = ({ mdxSource, data }) => {
       <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}
-          onClick={() => {
-            push(["trackEvent", "Download", "Android", "Clicked"])
-          }}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => push(["trackEvent", "Download", "Android", "Blog"])}
         >
           <img
             className="object-contain w-full"
@@ -34,7 +34,9 @@ const Blog = ({ mdxSource, data }) => {
         </a>
         <a
           href={IOS_URL}
-          onClick={() => push(["trackEvent", "Download", "iOS", "Clicked"])}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => push(["trackEvent", "Download", "iOS", "Blog"])}
         >
           <img
             className="object-contain w-full"

diff --git a/pages/index.js b/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"