Google Analytics

[DomVinyard]

User Story:

As a product owner, I want to add Google Analytics to our React application so that we can track user behavior and improve our product.

Acceptance Criteria:

• Google Analytics should be implemented in the application using an appropriate library.
• The Google Analytics tracking code should be added to all pages in the application.
• The tracking code should be set up to track relevant user behaviour, such as page views and clicks on important elements.
• The application should continue to function correctly after adding Google Analytics.
• The data collected by Google Analytics should be analysed and used to inform product decisions.
• The implementation should be documented and easily understandable for future developers.
• The implementation should be reviewed and approved by the development team and stakeholders.

[bp289]

Here are some useful articles on how to implement this feature/ documentation.

https://medium.com/geekculture/how-to-use-google-analytics-on-reactjs-in-5-minutes-7f6b43017ba9

https://www.npmjs.com/package/react-ga4 (we opted to use the react-ga4 library as opposed to implementing google analytics manually, this specifically because it was compatible with google analytics 4)

https://developers.google.com/analytics/devguides/collection/ga4#:~:text=Google%20Analytics%204%20is%20an,geared%20towards%20a%20developer%20audience. (Information on how google analytics works)

[swdilip]

How the Analytics Data collected can be used

Clicks

• User clicks can be analysed to yield information about which elements are being clicked
• Such as if Breadcrumbs are being clicked much more often than relation cards, users must be using them as their primary means of navigating around application
• Clicks on the 'Tell me more' can be used to determine which subjects users are engaging with the most which can used to change the order of links displayed on the Homepage. With most popular subjects displayed right at the top
• Clicks on the Age selector can be used to determine which age group is using our application the most or which age level of explanations most users find useful

Page Views

• Can be used to determine which topics and categories are popular which can inform the decision to add or remove links from the homepage

Navigation Journeys

• When a user navigates to a different subject from a related one, the name of the subject(s) they navigated to and from is sent to Google analytics
• This can be used to determine which subjects are leading users to a particular subject. So if most users find/ navigate to javascript from HTML instead of from CSS, more information about HTML can be included in the Javascript topic card

[bp289]

ExplainAI GA Docs

Analytics for each page view

Firstly we import in the ReactGA object from the react-ga4 library, then we can initialize it with the GA measurement id provided in your google analytics account using the ‘initialise’ method.

With this step completed, we can use the ‘send’ method to send a pageview every time the path of the page is changed to google analytics.

import ReactGA from "react-ga4";
ReactGA.initialize("G-NDPH0VPH2Y");

function App() {
  useEffect(() => {
    ReactGA.send({
      hitType: "pageview",
      page: window.location.pathname,
    });
  });
  return (
    <div className="App">
     //other components here
    </div>
  );
}

Analytics for events

For the events, we opted to create a new file called gaEvents.js in the utils folder. This file contains all the functions that can be used for any relevent events. All can be found inside this file and should be implemented wherever needed for future features. The following functions are currently exported from this file, with the parameters provided:

sendGAEvent(data)

• For any general event, any data can be used here, ideally in the following format:

data = { category: "", action: “", label: “”,}

sendRelationEvent(parent, child)

• For when the user clicks a relationcard

sendBreadCrumbEvent(child, parent)

• For when the user clicks a breadcrumb

sendClickEvent(element, name)

• For a click event, can be sued on any element

audienceChangeOnSubjectEvent(subject, audience)

• For when the user changes the audience level, but also to collect which subject they have changed the audience level for. e.g javascript

sendAudienceLevelChangeEvent(level)

• For when the user changes the audience level

[bp289]

Couple of things to be aware of:

• This extension when enabled will allow you to view logs for GA in your console: https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en

• Ga will not work if you have an adblocker enabled.

[Ademsk1]

@bp289 is that your actual GA ID? If it's sensitive, it'd be best to remove it from Github