Implement google analytics to track user metrics

[pushyamig]

A new Google analytics Id need to be created for test/qa/prod, the global API call should be sending the GA ID to UI.

This library is used by MyLA and ROHO as well https://github.com/react-ga/react-ga. We could use this but shop around if there is something better available as well

[jaydonkrooss]

Because our project uses typecript, I've found that I need to update the google analytics package to include types so that the import can be handled properly. I'll create a new issue to create an index.d.ts file on that project.

Will try to implement typescript based on what I'm seeing online, may look similar to how the google analytics React Package structures its types: https://github.com/react-ga/react-ga/blob/master/types/index.d.ts

[jaydonkrooss]

This is currently available to test in CCM Dev. Here's the test plan for Google Analytics OneTrust consent integration. You will need:

1. Access to the Google Analytics realtime dashboards: Dev
2. A free-to-use VPN that allows you to spoof your location (eg. TunnelBear or Windscribe). For TunnelBear you can also just use the Chrome extension, but you need to create a free account on their page. The extension is probably the easiest to use. Remember to turn it off after testing.

SETUP: Once you have a VPN installed and configured, you need to ensure Google Analytics activity is not blocked, so make sure to turn OFF any automatic analytics & tracking blocking on both your VPN and browser (such as if you're using Brave). For example, in the preferences of Windscribe VPN, turn off "Ad + trackers" blocking.

Scenario 1: for a user in a non-EU country, the integration automatically enables GA tracking and does NOT show the consent banner.

• Have your VPN disabled or enabled for a country not in the EU
• start an incognito browser and navigate to CCM Dev. As you remain on home, you should not see a popup window at the bottom of the page
• Log in to ccm LTI normally and navigate to any module on the page (such as "Format Canvas Gradebook" or "Create Sections")
• Check the google analytics realtime dashboard. You should see recent activity for your location.

Scenario 2: for a user in an EU country, consent popup should appear and when accepting tracking preferences, activity should be tracked.

• Have VPN enabled to an EU country like Germany or Sweden
• start an incognito browser and navigate to CCM Dev. you will see a popup window to accept or deny cookies
• Click accept cookies, then log in and navigate to any other page past the home screen
• Check google analytics. There should be new activity, and the location of the activity should be the selected EU country.

Scenario 3: repeat the steps above for EU users but instead DENY the tracking preferences. As you navigate to any other pages, there should be NO activity found in google analytics

Scenario 4: repeat the steps for EU users but don't select anything on the banner. As you navigate to other pages, the banner will continue to appear, but again, NO activity should be tracked in the realtime dashboard

One other thing worth checking is that the privacy policy link that exists on the banner properly navigates to the U-M Privacy page (I'll add this to the branch later today)