feat: add google analytics

.env.example

@@ -47,7 +47,7 @@ NS_ECOTEKA_FRONTEND_IMAGE={{ ns_ecoteka_frontend_image | default('registry.gitla
 NS_ECOTEKA_FRONTEND_TOKEN_STORAGE={{ ns_ecoteka_frontend_token_storage | default('ecoteka_access_token') }}
 NS_ECOTEKA_FRONTEND_REFRESH_TOKEN_STORAGE={{ ns_ecoteka_frontend_refresh_token_storage | default('ecoteka_refresh_token') }}
 NS_ECOTEKA_FRONTEND_MAPILLARY_API_CLIENT={{ ns_ecoteka_frontend_mapillary_api_client | default('dDloQllJZFNKNkQ1b1FMZ0ZFNjE3WjozYzk0OTRjM2ZhZjk5ZmUx') }}
-
+NS_ECOTEKA_FRONTEND_GOOGLE_ANALYTICS={{ ns_ecoteka_frontend_google_analytics | default('G-Z0FYXJ7LPW') }}
 
 # BACKEND
 NS_ECOTEKA_BACKEND_BASE_PATH={{ ns_ecoteka_backend_base_path | default('/api/v1') }}

docker-compose.yml

@@ -140,6 +140,7 @@ services:
       - MEILI_API_URL=${NS_ECOTEKA_MEILISEARCH_API_URL}
       - MEILI_MASTER_KEY=${NS_ECOTEKA_MEILISEARCH_MASTER_KEY}
       - MAPILLARY_API_CLIENT=${NS_ECOTEKA_FRONTEND_MAPILLARY_API_CLIENT}
+      - GOOGLE_ANALYTICS=${NS_ECOTEKA_FRONTEND_GOOGLE_ANALYTICS}
 
   landing_page:
     image: ${NS_ECOTEKA_LANDING_PAGE_IMAGE}

frontend/components/Map/SearchCity.tsx

@@ -1,36 +1,31 @@
-import useApi from "@/lib/useApi";
+import { useState, useEffect, CSSProperties, FC } from "react";
+import { useTranslation } from "react-i18next";
 import {
   TextField,
   CircularProgress,
   makeStyles,
   InputAdornment,
 } from "@material-ui/core";
 import { Autocomplete } from "@material-ui/lab";
-import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
 import { FlyToInterpolator } from "@deck.gl/core";
 import { useMapContext } from "@/components/Map/Provider";
 import SearchIcon from "@material-ui/icons/Search";
+import useApi from "@/lib/useApi";
+import * as ga from "@/lib/ga";
 
 export interface MapSearchCityProps {
   className?: string;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   onChange?(item: {}): void;
 }
 
-const defaultProps: MapSearchCityProps = {
-  style: {},
-  className: "",
-  onChange: () => {},
-};
-
 const useStyles = makeStyles((theme) => ({
   root: {
     backgroundColor: theme.palette.background.default,
   },
 }));
 
-const MapSearchCity: React.FC<MapSearchCityProps> = (props) => {
+const MapSearchCity: FC<MapSearchCityProps> = (props) => {
   const { t } = useTranslation("components");
   const [value, setValue] = useState(null);
   const [inputValue, setInputValue] = useState("");
@@ -43,11 +38,21 @@ const MapSearchCity: React.FC<MapSearchCityProps> = (props) => {
   useEffect(() => {
     let active = true;
 
-    if (inputValue === "" || inputValue.length < 2) {
+    if (
+      typeof inputValue === "string" &&
+      (inputValue === "" || inputValue.length < 2)
+    ) {
       setOptions([]);
-      return undefined;
+      return;
     }
 
+    ga.event({
+      action: "etk_map_search_city",
+      params: {
+        search_term: inputValue,
+      },
+    });
+
     (async () => {
       try {
         setLoading(true);
@@ -102,7 +107,13 @@ const MapSearchCity: React.FC<MapSearchCityProps> = (props) => {
       freeSolo
       className={props.className}
       options={options}
-      getOptionLabel={(option) => `${option.name}, ${option.country}`}
+      getOptionLabel={(option) => {
+        if (typeof option === "string") {
+          return option;
+        }
+
+        return `${option.name}, ${option.country}`;
+      }}
       filterOptions={(x) => x}
       loading={loading}
       value={value}
@@ -115,7 +126,7 @@ const MapSearchCity: React.FC<MapSearchCityProps> = (props) => {
       renderInput={(params) => (
         <TextField
           {...params}
-          placeholder="Explorer les arbres d’une ville ..."
+          placeholder={t("components.SearchCity.placeholder")}
           variant="outlined"
           InputProps={{
             ...params.InputProps,
@@ -140,6 +151,4 @@ const MapSearchCity: React.FC<MapSearchCityProps> = (props) => {
   );
 };
 
-MapSearchCity.defaultProps = defaultProps;
-
 export default MapSearchCity;

frontend/lib/ga.ts

@@ -0,0 +1,11 @@
+// log the pageview with their URL
+export const pageview = (url) => {
+  window.gtag("config", process.env.GOOGLE_ANALYTICS, {
+    page_path: url,
+  });
+};
+
+// log specific events happening.
+export const event = ({ action, params }) => {
+  window.gtag("event", action, params);
+};

frontend/next.config.js

@@ -5,6 +5,7 @@ const envVars = {
   MEILI_API_URL: "%meili_api_url%",
   MEILI_MASTER_KEY: "%meili_master_key%",
   MAPILLARY_API_CLIENT: "%mapillary_api_client%",
+  GOOGLE_ANALYTICS: "%google_analytics%",
 };
 
 const excludeEnvVars = ["ASSET_PREFIX"];

frontend/pages/_app.tsx

@@ -13,6 +13,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
 import "@fontsource/inter";
 import "@fontsource/merriweather";
+import * as ga from "@/lib/ga";
 
 import { Provider as AppContextProvider } from "@/providers/AppContext";
 
@@ -33,6 +34,22 @@ function MyApp({ Component, pageProps }) {
     i18n.changeLanguage(router.locale);
   }, [router.locale]);
 
+  useEffect(() => {
+    const handleRouteChange = (url) => {
+      console.log(url);
+      ga.pageview(url);
+    };
+    //When the component is mounted, subscribe to router changes
+    //and log those page views
+    router.events.on("routeChangeComplete", handleRouteChange);
+
+    // If the component is unmounted, unsubscribe
+    // from the event with the `off` method
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, [router.events]);
+
   return (
     <>
       <Head>

frontend/pages/_document.tsx

@@ -42,6 +42,22 @@ export default class MyDocument extends Document {
           <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
           <meta name="msapplication-TileColor" content="#00a300" />
           <meta name="theme-color" content="#ffffff" />
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS}`}
+          />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${process.env.GOOGLE_ANALYTICS}', {
+              page_path: window.location.pathname,
+            });
+          `,
+            }}
+          />
         </Head>
         <body>
           <Main />

frontend/public/locales/en/components.json

@@ -870,5 +870,8 @@
   },
   "r": {
     "caption": "cccc"
+  },
+  "SearchCity": {
+    "placeholder": "Explore the trees of a city..."
   }
 }

frontend/public/locales/es/components.json

@@ -861,5 +861,11 @@
   },
   "r": {
     "caption": ""
+<<<<<<< HEAD
+=======
+  },
+  "SearchCity": {
+    "placeholder": "Busca los árboles de una ciudad..."
+>>>>>>> dev
   }
 }

frontend/public/locales/fr/components.json

@@ -860,5 +860,11 @@
   },
   "r": {
     "caption": ""
+<<<<<<< HEAD
+=======
+  },
+  "SearchCity": {
+    "placeholder": "Explorez les arbres d'une ville..."
+>>>>>>> dev
   }
 }