[Bog Analytics] - Integrating Bog Analytics into AAU

[SamratSahoo]

Overview

We are going to track events in Angels among us as a trial run for our new Bog Analytics tool : )

Be sure to create a new branch before working on your ticket!!

Acceptance Criteria

Setup:

• [x] Watch this video to set up the repository + understand how we are going to set up bog analytics into AAU https://youtu.be/SmE9JrMNkgE
• [x] Setup a Logger file where you export a development, staging, and production logger
  • [x] Authenticate the loggers with the Client API key

Events:

• [x] Click Event: Number of clicks on a post - this will help us track how much attention a dog is getting
  • [x] object id: dog_{dog name}
  • [x] user id: randomly generated string is fine
• [x] Click Event: Number of clicks on each filter - this will help us see which filters are being used and which ones are not
  • [x] object id: filter_{filter name}
  • [x] user id: randomly generated string is fine
• [x] Visit Event: Tracking the user agent of visits to fosters.angelsrescue.org
  • [x] See: https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator
  • [x] the useEffect hook will be valuable on this page because you can log events on initial load with it: https://react.dev/ reference/react/useEffect
  • [x] page url: /
  • [x] user id: The user agent you log

Notes

• You need 3 different loggers - one for development (local environments), one for staging (preview environments), and one for production (real life environments :0)
• use the URL to determine which logger to use. For example:

  if (window.location.href.includes("localhost")){
  developmentLogger.logClickEvent({...})
  } else if (window.location.href.includes("angels-among-us.netlify.app")){
  stagingLogger.logClickEvent({...})
  } else if (window.location.href.includes("fosters.angelsrescue.org")){
  productionLogger.logClickEvent({...})
  }

• To initialize and authenticate the Analtyics logger (you'll obviously need to import the necessary classes/enums):

  // development logger initialization example
  AnalyticsLogger developmentLogger = new AnalyticsLogger({environment: EventEnvironment.DEVELOPMENT});
  developmentLogger.authenticate(process.env.PUBLIC_NEXT_BOG_ANALYTICS_CLIENT_API_KEY);

• Bog Analytics NPM Page: https://www.npmjs.com/package/bog-analytics