Merge pull request #59 from Avantage-Numerique/dev-matomo

Ajout d'un outil de statistiques dans la navigation avec Matomo.

.env.exemple

@@ -37,4 +37,7 @@ PING_INTERVAL=10000
 ## PUBLIC
 NEXT_PUBLIC_APP_URL='http://localhost:3000'
 NEXT_PUBLIC_APP_API_URL='http://localhost:3000'
-NEXT_PUBLIC_API_URL='http://localhost:8000'
+NEXT_PUBLIC_API_URL='http://localhost:8000'
+
+NEXT_PUBLIC_MATOMO_URL=''
+NEXT_PUBLIC_MATOMO_SITE_ID=''

package.json

@@ -29,6 +29,7 @@
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "@popperjs/core": "^2.11.6",
     "@shopify/draggable": "^1.0.0-beta.8",
+    "@socialgouv/matomo-next": "^1.9",
     "blotter": "^1.0.0",
     "bootstrap": "^5.3.0",
     "chroma-js": "^2.4.2",

pages/_app.js

@@ -1,22 +1,30 @@
+import React, {useEffect} from "react";
 import {getIronSession} from "iron-session";
 import App from "next/app";
 import {appDefaultSessionOptions} from "@/src/authentification/session/Session";
 import {AuthProvider} from '@/src/authentification/context/auth-context';
 import Layout from '@/src/layouts/Layout';
 import {getVisitorDataFromContext} from "@/src/authentification/context/visitor-context";
 import {verifyToken} from "@/auth/callbacks/verify-token.callback";
-
+import CookieBanner from "@/common/widgets/CookieBanner/CookieBanner";
 /**
  * Import global SCSS files
  */
 import '@/styles/main.scss';
+import useWebStats from "@/src/monitoring/hooks/useWebStats";
+
 
 // Extends basic Javascript for the project.
-import "@/src/helpers/ExtendedString";
-import CookieBanner from "@/common/widgets/CookieBanner/CookieBanner";
-import React from "react";
+// import "@/src/helpers/ExtendedString";
 
 function MyApp({Component, pageProps, user, serverCookiesChoices}) {
+
+    const webStats = useWebStats();
+    const cookieCHoices = serverCookiesChoices
+    console.log("APP", serverCookiesChoices);
+    useEffect(() => {
+        webStats.init(cookieCHoices);
+    }, []);
     /**
      * Main app render.
      */

pages/searchResults/index.js

@@ -8,6 +8,7 @@ import Button from "@/src/common/FormElements/Button/Button";
 import Icon from "@/src/common/widgets/Icon/Icon";
 import {lang} from "@/src/common/Data/GlobalConstants";
 import {getBadgesInfo} from "@/src/DataTypes/Badges/BadgesSection";
+import useWebStats from "@/src/monitoring/hooks/useWebStats";
 
 const SearchResults = (props) => {
 
@@ -17,7 +18,7 @@ const SearchResults = (props) => {
     const [filter, setFilter] = useState([])
     const [nearTaxonomyObject, setNearestTaxonomyObject] = useState(undefined)
 
-
+    const webStats = useWebStats();
     const updateFilterState = (filterType) => {
         if(filterType === "all")
             setFilter([]);
@@ -37,11 +38,15 @@ const SearchResults = (props) => {
         async function searchRequest() {
 
             let response = [];
-            if(router.query.searchIndex){
-                response = await getResultsRouteResponse(router.query.searchIndex);
-                const nearTaxonomy = await getNearestTaxonomyToSearchIndex(router.query.searchIndex)
-                setNearestTaxonomyObject(nearTaxonomy.data)
-                setSearchMessage("par texte")
+            const searchIndex = router.query.searchIndex;
+            if(searchIndex){
+                response = await getResultsRouteResponse(searchIndex);
+                const nearTaxonomy = await getNearestTaxonomyToSearchIndex(searchIndex);
+                setNearestTaxonomyObject(nearTaxonomy.data);
+                setSearchMessage("par texte");
+
+                const totalSearchRequestResults = response.data?.length ?? 0;
+                webStats.push(['trackSiteSearch', searchIndex, (nearTaxonomy?.nearestTaxonomy?.name ?? undefined), totalSearchRequestResults]);
             }
 
             if(router.query.linkId){
@@ -53,11 +58,12 @@ const SearchResults = (props) => {
                 response = await getEntityTypeResponse(router.query.entityType);
                 setSearchMessage("par type d'entité");
             }
+
             setSearchList(response.data);
         }
         searchRequest();
     }, [router.asPath])
-    
+
     const getResultsRouteResponse = (searchIndex) => {
         return clientSideExternalApiRequest("/search/?searchIndex="+searchIndex, { method: 'GET'});
     }
@@ -93,12 +99,14 @@ const SearchResults = (props) => {
             }
             filteredList = filteredList.filter( (el) => { return el.type === entityType })
         }
+        const searchCount = filteredList?.length;
+
 
         return (
             <div className="py-4">
                 <h3>{resultMessage}</h3>
                 {
-                    filteredList?.length > 0 ?
+                    searchCount > 0 ?
                     <EntitiesGrid className={"row"} feed={filteredList.filter(el => el.type !== "Taxonomy")} badgesInfo={props.badgesInfo}></EntitiesGrid>
                     :
                     <div>Aucune entité trouvée, réessayer avec d'autre critère de recherche</div>
@@ -237,7 +245,7 @@ const SearchResults = (props) => {
                                 <ul>
                                     { nearTaxonomyObject.otherNearbyTaxonomy.slice(0,8).map( (nearTaxo, index) => {
                                         return (
-                                            <li key={"nearTaxoList-"+nearTaxo._id}>
+                                            <li key={index+"nearTaxoList-"+nearTaxo._id}>
                                                 <a href={`/categories/${nearTaxo?.category}/${nearTaxo?.slug}`}>{nearTaxo.name}</a>
                                             </li>)
                                     })}

src/authentification/hooks/useSessionHook.js

@@ -86,7 +86,7 @@ export const useSessionHook = () => {
                         text: response.text,
                         positive: response.positive
                     });
-                } 
+                }
 
                 if(response.positive) {
                     //If user not verified, redirect to aconfirmer

src/common/Components/ExternalLink.js

@@ -7,7 +7,7 @@ const ExternalLink = (props) => {
     if (props.href !== '') {
         const link = props.href.includes("mailto:") ? props.href : forceHttps(props.href);
         return (
-            <div class={"display-inline-block"}>
+            <div className={"display-inline-block"}>
                 <a className={`external-link ${props.className ?? ''}`} href={link} target={"_blank"} title={`${props.title ?? ""}`}>
                     {props.children && props.children}
                 </a>

src/helpers/ExtendedString.js

@@ -6,4 +6,12 @@ if (typeof String.prototype.capitalize !== 'function') {
         },
         enumerable: false
     });
+}
+if (typeof String.prototype.startWidth !== 'function') {
+    Object.defineProperty(String.prototype, 'startWidth', {
+        value: function (needle) {
+            return this.substring(0, needle.length) === needle;
+        },
+        enumerable: false
+    });
 }

src/layouts/scripts.js

@@ -1,26 +1,8 @@
 
 
 const footerStaticScripts = () => {
-    //Matomo
-    /*
 
-        <script>
-            var _paq = window._paq = window._paq || [];
-            //tracker methods like "setCustomDimension" should be called before "trackPageView"
-    _paq.push(['trackPageView']);
-    _paq.push(['enableLinkTracking']);
-    (function() {
-        var u="//stats.avnu.ca/";
-        _paq.push(['setTrackerUrl', u+'matomo.php']);
-        _paq.push(['setSiteId', '1']);
-        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-    })();
-</script>
-     */
     return (
-        <script>
-            //footer scripts.
-        </script>
+        <script></script>
     )
 }

src/monitoring/Matomo.js

@@ -0,0 +1,70 @@
+import {init, push} from "@socialgouv/matomo-next";
+
+/**
+ *  Layer to manage the Matomo API and the Lib @socialgouv/matomo-next
+ *  It use the singleton patern and it's available throught the useWebStats hooks.
+ */
+class Matomo {
+    static _instance;
+    url;//string
+    id;//string
+    _cookieChoices;
+    currentSearchCount= 0;
+    parameters = [];
+    baseUrl;
+    siteId;
+
+    constructor() {
+        this.parameters = [];
+        this.url = process.env.NEXT_PUBLIC_MATOMO_URL;
+        this.id = process.env.NEXT_PUBLIC_MATOMO_SITE_ID;
+    }
+
+    static instance() {
+        if (Matomo._instance === undefined) {
+            Matomo._instance = new Matomo();
+        }
+        return Matomo._instance;
+    }
+
+    init(applicationCookiesParams) {
+        this.cookieChoices = applicationCookiesParams;
+        if (this.url && this.id) {
+            init(
+                {
+                    url: this.url,
+                    siteId: this.id,
+                    //onRouteChangeComplete: this.onRouteChangeComplete,
+                    //excludeUrlsPatterns: [/^\/login.php/, /\?token=.+/],
+                    disableCookies: this.cookieChoices?.stats === true,
+                }
+            );
+            return;
+        }
+        let message = this.url === undefined ? "L'url pour les statistiques sur matomo n'est pas défini" : "";
+        message += this.id === undefined ? "L'identifiant pour les statistique sur matomo n'est pas défini" : "";
+        console.erreur(message);
+    }
+
+    set cookieChoices(cookiesChoices) {
+        this._cookieChoices = cookiesChoices;
+    }
+    get cookieChoices() {
+        return this._cookieChoices
+    }
+
+    push(stats) {
+        push(stats);
+    }
+
+    onRouteChangeComplete(path) {
+        //needed for the searchCount uri query var ?
+        if (path.startWidth("/searchResults")) {
+            this.push(['trackSiteSearch', searchIndex, (nearTaxonomy?.nearestTaxonomy?.name ?? undefined), totalSearchRequestResults]);
+            //push(["trackSiteSearch", q !== null && q !== void 0 ? q : ""]);
+        }
+    };
+
+}
+
+export {Matomo};

src/monitoring/hooks/useWebStats.js

@@ -0,0 +1,7 @@
+import {Matomo} from "@/src/monitoring/Matomo";
+
+const useWebStats = () => {
+    return Matomo.instance();
+}
+
+export default useWebStats;