redo changes - google analytics package implementation

assets/src/containers/App.js

@@ -1,14 +1,15 @@
 import React from 'react'
 import { Route, Routes, useMatch } from 'react-router-dom'
-import GoogleAnalyticsTracking from '../components/GoogleAnalyticsTracking'
 import CourseList from './CourseList'
 import Course from './Course'
 import WarningBanner from '../components/WarningBanner'
 import AlertBanner from '../components/AlertBanner'
 import { Helmet } from 'react-helmet'
+import useGoogleAnalytics from 'react-ga-onetrust-consent'
 
 function App (props) {
-  const { user, gaId, cspNonce } = props
+  const { user, gaId, cspNonce, oneTrustScriptDomain } = props
+  useGoogleAnalytics({ googleAnalyticsId: gaId, nonce: cspNonce, oneTrustScriptDomain})
 
   if (!user.isLoggedIn) {
     if (user.loginURL === '') {
@@ -21,7 +22,6 @@ function App (props) {
   return (
     <>
       <Helmet titleTemplate='%s | My Learning Analytics' title='Courses' />
-      <GoogleAnalyticsTracking {...{ gaId, cspNonce }} />
       <Routes>
         <Route path='/' element={<CourseList user={user} />} />
         <Route path='/courses' element={<CourseList user={user} />} />

assets/src/globals.js

@@ -55,5 +55,6 @@ const siteTheme = createTheme({
   props: componentSettings
 })
 const gaId = mylaGlobals.google_analytics_id
+const oneTrustScriptDomain = mylaGlobals.one_trust_script_domain
 
-export { user, siteTheme, gaId, cspNonce, viewHelpURLs, surveyLink }
+export { user, siteTheme, gaId, cspNonce, viewHelpURLs, surveyLink, oneTrustScriptDomain }

assets/src/index.js

@@ -6,7 +6,7 @@ import './index.css'
 import App from './containers/App'
 import client from './service/client'
 import { ApolloProvider } from '@apollo/client'
-import { user, siteTheme, gaId, cspNonce } from './globals'
+import { user, siteTheme, gaId, cspNonce, oneTrustScriptDomain } from './globals'
 // import * as serviceWorker from './serviceWorker'
 
 const container = document.getElementById('root')
@@ -15,7 +15,7 @@ root.render(
   <Router basename='/'>
     <ApolloProvider client={client}>
       <ThemeProvider theme={siteTheme}>
-        <App user={user} gaId={gaId} cspNonce={cspNonce} />
+        <App user={user} gaId={gaId} cspNonce={cspNonce} oneTrustScriptDomain={oneTrustScriptDomain}/>
       </ThemeProvider>
     </ApolloProvider>
   </Router>

config/env_sample.hjson

@@ -11,12 +11,15 @@
     ],
     # The URL of a generic help or documentation site, to be used in the front end's drop-down menu
     "HELP_URL": "https://its.umich.edu/academics-research/teaching-learning/my-learning-analytics",
+    "PRIVACY_REDIRECT_URL": "https://umich.edu/about/privacy/"
     # Help for views. Specify URLs to overide defaults
     # URL_VIEW_RESOURCES_ACCESSED
     # URL_VIEW_ASSIGNMENT_PLANNING
     # URL_VIEW_GRADE_DISTRIBUTION
     # ID for your Google Analytics, defaults to nothing/disabled
     "GA_ID": "",
+    # ID of OneTrust script domain, used for google analytics integration
+    "OT_SCRIPT_DOMAIN": ""
     # The hex value to be used in the front end for the primary color of the palette and theme
     "PRIMARY_UI_COLOR": "#00274C",
     # Configuration of CSP see https://django-csp.readthedocs.io/en/latest/configuration.html

dashboard/common/utils.py

@@ -103,6 +103,8 @@ def get_myla_globals(request):
 
     if settings.GA_ID:
         google_analytics_id = settings.GA_ID
+    if settings.OT_SCRIPT_DOMAIN:
+        one_trust_script_domain = settings.OT_SCRIPT_DOMAIN
     primary_ui_color = settings.PRIMARY_UI_COLOR
 
     myla_globals = {
@@ -115,6 +117,7 @@ def get_myla_globals(request):
         "logout": logout_url,
         "primary_ui_color": primary_ui_color,
         "google_analytics_id": google_analytics_id,
+        "one_trust_script_domain": one_trust_script_domain,
         "view_help_urls": {
             'ra': settings.URL_VIEW_RESOURCES_ACCESSED,
             'ap': settings.URL_VIEW_ASSIGNMENT_PLANNING,

dashboard/settings.py

@@ -70,13 +70,15 @@ def apply_env_overrides(env: Dict[str, Any], environ: os._Environ) -> Dict[str,
 LOGIN_URL = '/accounts/login/'
 LOGOUT_URL = '/accounts/logout/'
 HELP_URL = ENV.get("HELP_URL", "https://its.umich.edu/academics-research/teaching-learning/my-learning-analytics")
+PRIVACY_REDIRECT_URL = ENV.get("PRIVACY_REDIRECT_URL","https://umich.edu/about/privacy/")
 
 URL_VIEW_RESOURCES_ACCESSED = ENV.get("URL_VIEW_RESOURCES_ACCESSED", "https://its.umich.edu/academics-research/teaching-learning/my-learning-analytics/support/resources-accessed")
 URL_VIEW_ASSIGNMENT_PLANNING = ENV.get("URL_VIEW_ASSIGNMENT_PLANNING", "https://its.umich.edu/academics-research/teaching-learning/my-learning-analytics/support/assignment-planning-goals")
 URL_VIEW_GRADE_DISTRIBUTION = ENV.get("URL_VIEW_GRADE_DISTRIBUTION", "https://its.umich.edu/academics-research/teaching-learning/my-learning-analytics/support/grade-distribution")
 
 # Google Analytics ID
 GA_ID = ENV.get('GA_ID', '')
+OT_SCRIPT_DOMAIN = ENV.get('OT_SCRIPT_DOMAIN', '')
 
 # Resource values from env
 RESOURCE_VALUES = ENV.get("RESOURCE_VALUES", {"files": {"types": ["canvas"], "icon": "fas fa-file fa-lg"}})

dashboard/urls.py

@@ -42,6 +42,8 @@
     path('status/bare_status/', watchman.views.bare_status),
 
     path('admin/', admin.site.urls),
+    # Use PRIVACY_REDIRECT_URL for the privacy policy
+    path('privacy/', views.privacy_policy_redirect, name='privacy_policy'),
 
     # Note the absence of a trailing slash; adding one breaks the GraphQL implementation.
     path('graphql', DashboardGraphQLView.as_view( middleware=[] if settings.DEBUG else [DisableIntrospectionMiddleware],graphiql=settings.DEBUG)),

dashboard/views.py

@@ -678,6 +678,8 @@ def logout(request):
     auth.logout(request)
     return redirect(settings.LOGOUT_REDIRECT_URL)
 
+def privacy_policy_redirect(request):
+    return redirect(settings.PRIVACY_REDIRECT_URL)
 
 def courses_enabled(request):
     """ Returns json for all courses we currently support and are enabled """

package.json

@@ -18,11 +18,11 @@
     "lodash.debounce": "4.0.8",
     "lodash.isequal": "4.5.0",
     "rc-slider": "10.5.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-ga4": "2.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-ga-onetrust-consent": "github:tl-its-umich-edu/react-ga-onetrust-consent",
     "react-helmet": "6.1.0",
-    "react-router-dom": "6.21.1"
+    "react-router-dom": "6.25.1"
   },
   "babel": {
     "presets": [