Merge pull request #56 from kartverket/posthog

Add posthog analytics

Author: yrjanaff

.nvmrc

@@ -1 +1 @@
-24
+v24

default.env

@@ -19,3 +19,5 @@ VITE_GEOID_JWKS_URI=
 VITE_GEOID_KID=
 VITE_GEOID_N=
 VITE_GEOID_BAATAUTHZ_APIURL=
+VITE_POSTHOG_KEY=
+VITE_POSTHOG_HOST=https://eu.i.posthog.com

jsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["*"]
+    }
   },
   "include": ["src"]
 }

package.json

@@ -15,13 +15,15 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@kartverket/geonorge-web-components": "^4.0.11",
     "@navikt/aksel-icons": "^8.9.0",
+    "@posthog/react": "^1.8.2",
     "@uiw/react-md-editor": "^3.20.5",
     "classnames": "^2.2.6",
     "connected-react-router": "^6.5.2",
     "history": "^5.3.0",
     "js-cookie": "^3.0.1",
     "moment": "^2.24.0",
     "oidc-client-ts": "^3.3.0",
+    "posthog-js": "^1.360.0",
     "r_map": "https://github.com/kartverket/r_map.git",
     "react": "^18.1.0",
     "react-app-polyfill": "^3.0.0",

public/config.template.js

@@ -14,5 +14,7 @@ window.__APP_CONFIG__ = {
   VITE_GEOID_JWKS_URI: "${VITE_GEOID_JWKS_URI}",
   VITE_GEOID_KID: "${VITE_GEOID_KID}",
   VITE_GEOID_N: "${VITE_GEOID_N}",
-  VITE_GEOID_BAATAUTHZ_APIURL: "${VITE_GEOID_BAATAUTHZ_APIURL}"
+  VITE_GEOID_BAATAUTHZ_APIURL: "${VITE_GEOID_BAATAUTHZ_APIURL}",
+  VITE_POSTHOG_KEY: "${REACT_APP_POSTHOG_KEY}",
+  VITE_POSTHOG_HOST: "${REACT_APP_POSTHOG_HOST}"
 };

src/components/partials/Buttons/ApplicationButton.jsx

@@ -3,6 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useDispatch } from "react-redux";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { usePostHog } from "@posthog/react";
 
 // Actions
 import { getResource } from "@/actions/ResourceActions";
@@ -17,6 +18,7 @@ import { Button } from "@digdir/designsystemet-react";
 
 const ApplicationButton = (props) => {
     const dispatch = useDispatch();
+    const posthog = usePostHog();
 
     const handleButtonClick = () => {
         const tagData = {
@@ -31,6 +33,12 @@ const ApplicationButton = (props) => {
                 metadata: tagData
             })
         );
+        posthog?.capture("application_link_clicked", {
+            title: props.metadata.Title,
+            uuid: props.metadata.Uuid,
+            distribution_url: props.metadata.DistributionUrl || props.metadata.DownloadUrl,
+            organization: props.metadata.Organization,
+        });
     };
 
     const isApplication = () => {

src/components/partials/Buttons/DownloadButton.jsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useDispatch, useSelector } from "react-redux";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { usePostHog } from "@posthog/react";
 
 // Utils
 import userManager from "@/utils/userManager";
@@ -26,6 +27,7 @@ import { Button } from "@digdir/designsystemet-react";
 
 const DownloadButton = (props) => {
     const dispatch = useDispatch();
+    const posthog = usePostHog();
 
     // Redux store
     const itemsToDownload = useSelector((state) => state.itemsToDownload);
@@ -160,11 +162,26 @@ const DownloadButton = (props) => {
                 metadata: tagData
             })
         );
+        posthog?.capture("download_link_clicked", {
+            title: props.metadata.Title,
+            uuid: props.metadata.Uuid,
+            distribution_url: props.metadata.DistributionUrl,
+            protocol: props.metadata.Protocol,
+            organization: props.metadata.Organization,
+        });
     };
 
     const addToDownloadListAction = () => {
         const metadata = props.metadata;
         setIsLoading(true);
+        posthog?.capture("download_added_to_basket", {
+            title: metadata.Title,
+            uuid: metadata.Uuid,
+            type_name: metadata.TypeName,
+            organization: metadata.Organization || metadata.ContactMetadata?.Organization,
+            access_is_open_data: metadata.AccessIsOpendata,
+            access_is_restricted: metadata.AccessIsRestricted,
+        });
 
         if (metadata.TypeName === "series_historic" || metadata.TypeName === "series_collection") {
             if (metadata.SerieDatasets) {

src/components/partials/Buttons/MapButton.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useDispatch, useSelector } from "react-redux";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { usePostHog } from "@posthog/react";
 
 // Actions
 import { removeMapItem, addMapItem } from "@/actions/MapItemActions";
@@ -16,6 +17,7 @@ import { Button } from "@digdir/designsystemet-react";
 
 const MapButton = (props) => {
     const dispatch = useDispatch();
+    const posthog = usePostHog();
 
     // Redux store
     const mapItems = useSelector((state) => state.mapItems);
@@ -120,12 +122,24 @@ const MapButton = (props) => {
     const addToMap = (mapItem) => {
         if (mapItem?.length) {
             dispatch(addMapItem(mapItem));
+            posthog?.capture("map_item_added", {
+                title: props.metadata.Title,
+                uuid: props.metadata.Uuid,
+                protocol: props.metadata.DistributionProtocol || props.metadata.Protocol,
+                organization: props.metadata.Organization,
+            });
         }
     };
 
     const removeFromMap = (mapItem) => {
         if (mapItem?.length) {
             dispatch(removeMapItem(mapItem));
+            posthog?.capture("map_item_removed", {
+                title: props.metadata.Title,
+                uuid: props.metadata.Uuid,
+                protocol: props.metadata.DistributionProtocol || props.metadata.Protocol,
+                organization: props.metadata.Organization,
+            });
         }
     };
 

src/components/partials/FacetFilter/Facet.jsx

@@ -5,12 +5,17 @@ import { useDispatch } from "react-redux";
 import classNames from "classnames/bind";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link } from "react-router-dom";
+import { usePostHog } from "@posthog/react";
 
 // Reducers
 import { pushToDataLayer } from "@/reducers/TagManagerReducer";
 
 // Helpers
-import { getQueryStringFromFacets } from "@/helpers/FacetFilterHelpers";
+import {
+    getActiveFiltersFromSelectedFacets,
+    getNextSelectedFacetsFromFacetToggle,
+    getQueryStringFromFacets
+} from "@/helpers/FacetFilterHelpers";
 
 // Components
 import { ErrorBoundary } from "@/components/ErrorBoundary";
@@ -20,6 +25,7 @@ import style from "@/components/partials/FacetFilter/Facet.module.scss";
 
 const Facet = (props) => {
     const dispatch = useDispatch();
+    const posthog = usePostHog();
 
     // State
     const [checked, setChecked] = useState(false);
@@ -123,6 +129,8 @@ const Facet = (props) => {
     };
 
     const handleFacetClick = () => {
+        const action = checked ? "remove" : "add";
+
         dispatch(
             pushToDataLayer({
                 event: "updateSelectedFacets",
@@ -139,6 +147,20 @@ const Facet = (props) => {
                 facet: props.facet
             })
         );
+
+        const selectedFacets = props?.searchData?.selectedFacets || {};
+        const nextSelectedFacets = getNextSelectedFacetsFromFacetToggle(selectedFacets, props.facetField, props.facet, action);
+        const activeFilters = getActiveFiltersFromSelectedFacets(nextSelectedFacets);
+
+        posthog?.capture("facet_filter_applied", {
+            facet_field: props.facetField,
+            facet_field_name: props.facetFieldNameTranslated,
+            facet_name: props.facet.Name,
+            facet_name_translated: props.facet.NameTranslated,
+            facet_count: props.facet.Count,
+            action,
+            active_filters: activeFilters,
+        });
     };
 
     const renderFacet = () => {

src/components/partials/SearchResults.jsx

@@ -3,6 +3,7 @@ import React from "react";
 import { useDispatch } from "react-redux";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link } from "react-router-dom";
+import { usePostHog } from "@posthog/react";
 
 // Geonorge WebComponents
 // eslint-disable-next-line no-unused-vars
@@ -23,6 +24,7 @@ import style from "@/components/partials/SearchResults.module.scss";
 export const SearchResults = ({ searchData, searchResultsType, viewMode }) => {
 
     const dispatch = useDispatch();
+    const posthog = usePostHog();
 
     const getShowMoreLink = () => {
         const newOffset = searchData?.offset + 25;
@@ -84,11 +86,27 @@ export const SearchResults = ({ searchData, searchResultsType, viewMode }) => {
         return localStorage.getItem("urlDownloadCsv");
     };
 
+    const handleShowMoreClick = () => {
+        posthog?.capture("show_more_results_clicked", {
+            results_type: searchResultsType,
+            current_offset: searchData?.offset,
+            search_string: searchData?.searchString,
+        });
+    };
+
+    const handleCsvDownloadClick = () => {
+        posthog?.capture("search_results_csv_clicked", {
+            results_type: searchResultsType,
+            search_string: searchData?.searchString,
+            csv_url: downloadAsCsvUrl(),
+        });
+    };
+
     const renderShowMoreLink = () => {
         return (
             <div className={style.morecontainer}>
                 <gn-button color="default">
-                    <Link to={{ search: getShowMoreLink() }} replace className={style.morebtn}>
+                    <Link to={{ search: getShowMoreLink() }} replace className={style.morebtn} onClick={handleShowMoreClick}>
                         <span>{dispatch(getResource("ShowMoreResults", "Vis flere"))}</span>
                         <FontAwesomeIcon icon={"angle-down"} key="icon" />
                     </Link>
@@ -109,7 +127,7 @@ export const SearchResults = ({ searchData, searchResultsType, viewMode }) => {
                     <div className={style.searchResultContainer}>
                         {renderMetadataSearchResults()}
                         <div className={style.downloadcsv}>
-                            <a href={downloadAsCsvUrl()}>
+                            <a href={downloadAsCsvUrl()} onClick={handleCsvDownloadClick}>
                                 {dispatch(getResource("SaveResultsAsCSV", "Lagre listen som CSV"))}
                             </a>
                         </div>