Analytics

Dockerfile

@@ -26,7 +26,9 @@ RUN npm ci --include=dev --legacy-peer-deps || npm install --include=dev --legac
 ENV NODE_ENV=$NODE_ENV
 ENV NODE_OPTIONS="--openssl-legacy-provider"
 
-RUN npm run build
+RUN npm run build && \
+    mkdir -p public/static/search/_next && \
+    cp -r .next/static public/static/search/_next/
 
 EXPOSE 8080
 CMD ["node_modules/next/dist/bin/next", "start", "-p", "8080"]

csp.config.js

@@ -13,6 +13,7 @@ const config = {
     '*.doubleclick.net',
     '*.googletagmanager.com',
     '*.cloudflareinsights.com',
+    'tracker.core.ac.uk',
     LOGROCKET,
     'blob:',
     'data:',
@@ -50,6 +51,8 @@ const config = {
     SELF,
     PRODUCTION,
     'sentry.io',
+    'plausible.io',
+    'tracker.core.ac.uk',
     '*.google-analytics.com',
     '*.doubleclick.net',
     '*.googletagmanager.com',

data/data-loader.js

@@ -67,6 +67,7 @@ const getApiFromFileName = function (filepath) {
 }
 
 const retrieveStats = async (cacheFilePath) => {
+  if (process.env.NODE_ENV === 'development') return null
   const errorMsg =
     'Fail. ==> Statistics retrieval failed due to API Core instability.'
 

hooks/use-analytics.js

@@ -4,25 +4,62 @@ import ReactGA from 'react-ga4'
 import { useCookie } from '@oacore/design'
 
 const useAnalytics = () => {
+  const PLAUSIBLE_DOMAIN = 'core-frontend-stage-search.thankfulplant-67ea1df5.uksouth.azurecontainerapps.io'
   const analyticsAllowed = useCookie('analytics_cookies_allowed')
 
   const router = useRouter()
   const reportPageview = useCallback((url, title, type = 'search') => {
+    const search = typeof window !== 'undefined' ? window.location.search.substring(1) : ''
+
     ReactGA.send({
       hitType: type,
       page: url,
-      title: `Search | ${window.location.search.substring(1)}`,
+      title: `Search | ${search}`,
     })
   }, [])
 
   useEffect(() => {
+    console.log('init useAnalytics plausible')
+    if (typeof window === 'undefined') return undefined
+
+    import('@plausible-analytics/tracker').then(({ init }) => {
+      console.log('Init plausible-analytics/tracker')
+      init({
+        domain: PLAUSIBLE_DOMAIN,
+        endpoint: 'https://tracker.core.ac.uk/api/event',
+        outboundLinks: true,
+        fileDownloads: true,
+        formSubmissions: true,
+        autoCapturePageviews: false,
+      })
+      console.log('Plausible initialized, window.plausible:', !!window.plausible)
+      if (window.plausible) {
+        window.plausible('pageview')
+        console.log('Plausible pageview sent')
+      }
+    }).catch((error) => {
+      console.log('Error plausible-analytics/tracker')
+      console.log(error)
+    })
+
+    return undefined
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    console.log('init useAnalytics GA')
+    if (typeof window === 'undefined') return undefined
+
     if (analyticsAllowed && process.env.NODE_ENV === 'production') {
       // Initialise production Google Analytics
       console.log(process.env.GA_TRACKING_CODE)
-      console.log("GA")
+      console.log("init GA")
 
       ReactGA.initialize(process.env.GA_TRACKING_CODE)
     } else if (analyticsAllowed) {
+      console.log(process.env.GA_TRACKING_CODE)
+      console.log("init analyticsAllowed")
+
       window.ga = (...args) =>
         // We want to have logging in the development environment
         // eslint-disable-next-line no-console
@@ -36,13 +73,21 @@ const useAnalytics = () => {
     return () => {
       window.ga = null
     }
-  }, [])
+  }, [analyticsAllowed, reportPageview, router.asPath])
 
   useEffect(() => {
-    router.events.on('routeChangeComplete', reportPageview)
+    const handleRouteChange = (url) => {
+      reportPageview(url)
+      if (typeof window !== 'undefined' && window.plausible) {
+        window.plausible('pageview')
+        console.log('Plausible pageview on route change:', url)
+      }
+    }
+
+    router.events.on('routeChangeComplete', handleRouteChange)
 
     return () => {
-      router.events.off('routeChangeComplete', reportPageview)
+      router.events.off('routeChangeComplete', handleRouteChange)
     }
   }, [])
 }

next.config.js

@@ -21,6 +21,7 @@ const nextConfig = {
       },
       {
         source: `/static/:path*`,
+        // source: `/:path*`,
         destination: '/:path*',
       },
     ]