feat(tracking): add matomo trackers

SocialGouv · Aug 28, 2020 · d5d2438 · d5d2438
1 parent f0570c4
commit d5d2438
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 57 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -14,7 +14,6 @@ module.exports = {
     `gatsby-plugin-sharp`,
     {
       options: {
-        dev: true,
         matomoUrl: process.env.MATOMO_URL,
         siteId: process.env.MATOMO_APPLICATION_ID,
         siteUrl: process.env.SITE_URL,

diff --git a/src/components/download-link.tsx b/src/components/download-link.tsx
@@ -1,17 +1,26 @@
 import { Button } from "@material-ui/core";
 import GetAppIcon from "@material-ui/icons/GetApp";
-import React, { FC } from "react";
+import React, { FC, useCallback } from "react";
+
+import { trackAppDownload } from "../tracker";
 
 type DownloadLinkProps = {
   url: string;
   label: string;
+  version: string;
 };
 
-const DownloadLink: FC<DownloadLinkProps> = ({ url, label }) => (
-  <Button target="_blank" href={url} color="inherit">
-    <GetAppIcon />
-    {label}
-  </Button>
-);
+const DownloadLink: FC<DownloadLinkProps> = ({ url, label, version }) => {
+  const onClick = useCallback(() => {
+    trackAppDownload(version, label);
+  }, [label]);
+
+  return (
+    <Button target="_blank" href={url} color="inherit" onClick={onClick}>
+      <GetAppIcon />
+      {label}
+    </Button>
+  );
+};
 
 export default DownloadLink;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -2,6 +2,7 @@ import { Button, Grid, Theme } from "@material-ui/core";
 import Box from "@material-ui/core/Box";
 import Typography from "@material-ui/core/Typography";
 import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
+import GetAppIcon from "@material-ui/icons/GetApp";
 import { makeStyles } from "@material-ui/styles";
 import { Link as GatsbyLink } from "gatsby";
 import React, { FC } from "react";
@@ -13,8 +14,12 @@ import ProductFeatures from "../components/product-features";
 import SEO from "../components/seo";
 import versions from "../display-data/versions";
 import Layout from "../layout";
-import { defaultOperatingSystem, getOperatingSystem } from "../utils/os-util";
-import GetAppIcon from "@material-ui/icons/GetApp";
+import { trackAppDownload } from "../tracker";
+import {
+  defaultOperatingSystem,
+  getOperatingSystem,
+  OS,
+} from "../utils/os-util";
 
 const useStyles = makeStyles((theme: Theme) => ({
   downloadLink: {
@@ -40,6 +45,10 @@ const getDownloadLink = (): string => {
 
 const IndexPage: FC = () => {
   const classes = useStyles();
+  const onDownloadClick = () => {
+    const userOperatingSystem = OS[getOperatingSystem()];
+    trackAppDownload(versions[0].number, userOperatingSystem);
+  };
   return (
     <Layout>
       <SEO title="Accueil" />
@@ -53,6 +62,7 @@ const IndexPage: FC = () => {
                 variant="contained"
                 size="large"
                 color="primary"
+                onClick={onDownloadClick}
                 startIcon={<GetAppIcon />}
               >
                 Télécharger

diff --git a/src/pages/telechargements.tsx b/src/pages/telechargements.tsx
@@ -9,53 +9,57 @@ import versions from "../display-data/versions";
 import Layout from "../layout";
 import { getPlatformName, Platform } from "../utils/os-util";
 
-const Telechargements: FC = () => {
-  return (
-    <Layout>
-      <SEO title="Téléchargements" />
-      <Box p={1}>
-        <h1>Téléchargements</h1>
-        <h3>Script</h3>
-        <Box>
-          <DownloadLink
-            url="https://raw.githubusercontent.com/SocialGouv/archifiltre/master/scripts/load-from-filesystem.ps1"
-            label="Windows"
-          />
-        </Box>
-        <Box>
-          <DownloadLink
-            url="https://raw.githubusercontent.com/SocialGouv/archifiltre/master/scripts/load-filesystem.sh"
-            label="Linux/MacOS"
-          />
-        </Box>
-        {versions.map((version) => (
-          <div key={`${version.name}-${version.number}`}>
-            <h3>
-              {`${version.name} ${version.number} - ${version.date} - `}
-              <Button
-                color="inherit"
-                component={GatsbyLink}
-                to="/changelog"
-                size="small"
-              >
-                Nouveautés de cette version
-              </Button>
-            </h3>
-            <Box>
-              {version.platforms.map((platform: Platform) => {
-                const platformName = getPlatformName(platform);
-                return (
-                  <Box key={`${platformName}-${version.number}`}>
-                    <DownloadLink url={platform.url} label={platformName} />
-                  </Box>
-                );
-              })}
-            </Box>
-          </div>
-        ))}
+const Telechargements: FC = () => (
+  <Layout>
+    <SEO title="Téléchargements" />
+    <Box p={1}>
+      <h1>Téléchargements</h1>
+      <h3>Script d&rsquo;import (serveur)</h3>
+      <Box>
+        <DownloadLink
+          url="https://raw.githubusercontent.com/SocialGouv/archifiltre/master/scripts/load-from-filesystem.ps1"
+          label="Windows"
+          version="Script"
+        />
       </Box>
-    </Layout>
-  );
-};
+      <Box>
+        <DownloadLink
+          url="https://raw.githubusercontent.com/SocialGouv/archifiltre/master/scripts/load-filesystem.sh"
+          label="Linux/MacOS"
+          version="Script"
+        />
+      </Box>
+      {versions.map((version) => (
+        <div key={`${version.name}-${version.number}`}>
+          <h3>
+            {`${version.name} ${version.number} - ${version.date} - `}
+            <Button
+              color="inherit"
+              component={GatsbyLink}
+              to="/changelog"
+              size="small"
+            >
+              Nouveautés de cette version
+            </Button>
+          </h3>
+          <Box>
+            {version.platforms.map((platform: Platform) => {
+              const platformName = getPlatformName(platform);
+              return (
+                <Box key={`${platformName}-${version.number}`}>
+                  <DownloadLink
+                    url={platform.url}
+                    label={platformName}
+                    version={version.number}
+                  />
+                </Box>
+              );
+            })}
+          </Box>
+        </div>
+      ))}
+    </Box>
+  </Layout>
+);
 
 export default Telechargements;
diff --git a/src/tracker.ts b/src/tracker.ts
@@ -0,0 +1,35 @@
+declare global {
+  interface Window {
+    _paq: any[];
+  }
+}
+
+type TrackerAction = {
+  type: string;
+  title?: string;
+  value?: any;
+};
+
+const sanitizeTrackerData = (trackerAction: TrackerAction) =>
+  Object.values(trackerAction).filter(
+    (actionProperty) => actionProperty !== undefined && actionProperty !== null
+  );
+
+const addTracker = (trackerAction: TrackerAction): void => {
+  if (window._paq) {
+    const sanitizedData = sanitizeTrackerData(trackerAction);
+    window._paq.push(sanitizedData);
+  }
+};
+
+export const trackAppDownload = (
+  versionNumber: string,
+  platform: string
+): void => {
+  addTracker({
+    type: "trackEvent",
+    // eslint-disable-next-line sort-keys-fix/sort-keys-fix
+    title: "download",
+    value: `v${versionNumber} ${platform}`,
+  });
+};