Show instructions if analytics is adblocked and clicks privacy settings

.changelog/1294.feature.md

@@ -1 +1 @@
-Analytics: integrate matomo with UI (using matomo cookies for storage)
+Integrate matomo analytics

.changelog/1325.feature.md

@@ -0,0 +1 @@
+Integrate matomo analytics

src/app/components/AnalyticsConsent/AnalyticsIsBlocked.tsx

@@ -0,0 +1,70 @@
+import Snackbar from '@mui/material/Snackbar'
+import Typography from '@mui/material/Typography'
+import { styled } from '@mui/material/styles'
+import Button from '@mui/material/Button'
+import Link from '@mui/material/Link'
+import { Trans, useTranslation } from 'react-i18next'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardActions from '@mui/material/CardActions'
+import { useScreenSize } from 'app/hooks/useScreensize'
+import { legalDocuments } from '../../utils/externalLinks'
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  paddingLeft: theme.spacing(5),
+  paddingRight: theme.spacing(5),
+}))
+
+export const AnalyticsIsBlocked = (props: { isOpen: boolean; onReload: () => void; onClose: () => void }) => {
+  const { t } = useTranslation()
+  const { isMobile } = useScreenSize()
+  return (
+    <>
+      <Snackbar
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        sx={{
+          maxWidth: '450px',
+        }}
+        open={props.isOpen}
+      >
+        <Card elevation={4}>
+          <CardContent>
+            <Typography
+              fontSize="14px"
+              sx={{
+                paddingBottom: '12px',
+                lineHeight: '1.25',
+              }}
+              align="center"
+            >
+              <Trans
+                i18nKey="analyticsConsent.blockedText"
+                t={t}
+                components={{
+                  PrivacyPolicyLink: (
+                    <Link
+                      href={legalDocuments.privacyPolicy}
+                      target="_blank"
+                      sx={{ fontWeight: 400, textDecoration: 'underline' }}
+                    />
+                  ),
+                }}
+              />
+            </Typography>
+          </CardContent>
+          <CardActions sx={{ justifyContent: 'center', paddingBottom: isMobile ? '16px' : '32px' }}>
+            <StyledButton onClick={() => props.onReload()} color="secondary" variant="outlined">
+              {t('analyticsConsent.reloadButtonLabel')}
+            </StyledButton>
+            <StyledButton onClick={() => props.onClose()} color="secondary" variant="outlined">
+              {t('analyticsConsent.closeButtonLabel')}
+            </StyledButton>
+          </CardActions>
+        </Card>
+      </Snackbar>
+    </>
+  )
+}

src/app/components/AnalyticsConsent/index.tsx

@@ -15,6 +15,7 @@ import * as matomo from './initializeMatomo'
 import { legalDocuments } from '../../utils/externalLinks'
 import { ThemeByNetwork } from '../ThemeByNetwork'
 import { Network } from '../../../types/network'
+import { AnalyticsIsBlocked } from './AnalyticsIsBlocked'
 
 const AnalyticsContext = createContext<{
   reopenAnalyticsConsent: () => void
@@ -23,7 +24,9 @@ const AnalyticsContext = createContext<{
 export const AnalyticsConsentProvider = (props: { children: React.ReactNode }) => {
   if (process.env.REACT_APP_ENABLE_OASIS_MATOMO_ANALYTICS !== 'true') return <>{props.children}</>
 
-  const [hasAccepted, setHasAccepted] = useState<matomo.HasAccepted>('timed_out_matomo_not_loaded')
+  const [hasAccepted, setHasAccepted] = useState<
+    matomo.HasAccepted | 'loading' | 'timed_out_matomo_not_loaded_force_open'
+  >('loading')
 
   useEffect(() => {
     matomo.addMatomo()
@@ -53,7 +56,17 @@ export const AnalyticsConsentProvider = (props: { children: React.ReactNode }) =
   }, [location.key, hasAccepted])
 
   return (
-    <AnalyticsContext.Provider value={{ reopenAnalyticsConsent: () => setHasAccepted('not-chosen') }}>
+    <AnalyticsContext.Provider
+      value={{
+        reopenAnalyticsConsent: () => {
+          if (hasAccepted === 'timed_out_matomo_not_loaded' || hasAccepted === 'loading') {
+            setHasAccepted('timed_out_matomo_not_loaded_force_open')
+          } else {
+            setHasAccepted('not-chosen')
+          }
+        },
+      }}
+    >
       {props.children}
       {/* Theme is needed because AnalyticsConsentProvider is outside network-themed routes */}
       <ThemeByNetwork isRootTheme={false} network={Network.mainnet}>
@@ -68,6 +81,11 @@ export const AnalyticsConsentProvider = (props: { children: React.ReactNode }) =
             setHasAccepted(await matomo.hasAccepted({ timeout: 10_000 }))
           }}
         />
+        <AnalyticsIsBlocked
+          isOpen={hasAccepted === 'timed_out_matomo_not_loaded_force_open'}
+          onReload={() => window.location.reload()}
+          onClose={() => setHasAccepted('timed_out_matomo_not_loaded')}
+        />
       </ThemeByNetwork>
     </AnalyticsContext.Provider>
   )
@@ -86,12 +104,7 @@ export const ReopenAnalyticsConsentButton = () => {
   )
 }
 
-const AcceptCookiesButton = styled(Button)(({ theme }) => ({
-  paddingLeft: theme.spacing(5),
-  paddingRight: theme.spacing(5),
-}))
-
-const DeclineCookiesButton = styled(Button)(({ theme }) => ({
+const StyledButton = styled(Button)(({ theme }) => ({
   paddingLeft: theme.spacing(5),
   paddingRight: theme.spacing(5),
 }))
@@ -118,6 +131,7 @@ export const AnalyticsConsentView = (props: {
         <Card elevation={4}>
           <CardContent>
             <Typography
+              fontSize="14px"
               sx={{
                 paddingBottom: '12px',
                 lineHeight: '1.25',
@@ -141,12 +155,12 @@ export const AnalyticsConsentView = (props: {
             </Typography>
           </CardContent>
           <CardActions sx={{ justifyContent: 'center', paddingBottom: isMobile ? '16px' : '32px' }}>
-            <AcceptCookiesButton onClick={() => props.onAccept()} color="primary" variant="contained">
+            <StyledButton onClick={() => props.onAccept()} color="primary" variant="contained">
               {t('analyticsConsent.acceptButtonLabel')}
-            </AcceptCookiesButton>
-            <DeclineCookiesButton onClick={() => props.onDecline()} color="secondary" variant="outlined">
+            </StyledButton>
+            <StyledButton onClick={() => props.onDecline()} color="secondary" variant="outlined">
               {t('analyticsConsent.declineButtonLabel')}
-            </DeclineCookiesButton>
+            </StyledButton>
           </CardActions>
         </Card>
       </Snackbar>

src/locales/en/translation.json

@@ -33,8 +33,11 @@
   "analyticsConsent": {
     "settings": "Privacy settings",
     "text": "At Oasis Foundation we believe in your privacy, so you can choose to browse our site without any tracking or by clicking “{{acceptButtonLabel}}”, you help us to improve our site and help us grow our ecosystem. View our <PrivacyPolicyLink>Privacy Policy</PrivacyPolicyLink> for more information.",
+    "blockedText": "Our analytics tracking failed to load. Therefore, you will continue using the site with user tracking disabled. If you are willing to accept tracking please pause your adblocker and reload the page to accept tracking. View our <PrivacyPolicyLink>Privacy Policy</PrivacyPolicyLink> for more information.",
     "acceptButtonLabel": "Accept",
-    "declineButtonLabel": "Decline"
+    "declineButtonLabel": "Decline",
+    "reloadButtonLabel": "Reload page",
+    "closeButtonLabel": "Close"
   },
   "blocks": {
     "latest": "Latest Blocks",