demo.md

Initializing Ops with a Cookie Banner | MathSwe Com (2024/03/21)

Initiate web app operations

Feb 5: PR #1 merged into dev <- mathswe/ops by tobiasbriones

It sets up the web app for its initial development.

Add component Table

Feb 11: PR #2 merged into dev <- mathswe/ui by tobiasbriones

It helps render minimalistic responsive tables.

Implement component CookieBanner UI

Feb 20: PR #3 merged into dev <- legal by tobiasbriones

It adds the UI implementation for the cookie banner that will allow the user to select cookie preferences immediately.

Enhance UI of component CookieBanner with styles and anims

Feb 21: PR #4 merged into dev <- legal by tobiasbriones

It enhances and fixes some further styles and adds the showing animation.

Add dep react-cookies

Feb 21: PR #5 merged into dev <- mathswe/ops by tobiasbriones

It adds app cookie support.

Fix src path TS configs

Feb 21: PR #6 merged into dev <- mathswe/ops by tobiasbriones

The build command failed because of the tsconfig.json typos in the project paths.

Implement state persistence via cookies in CookieBanner.tsx

Feb 22: PR #7 merged into dev <- legal by tobiasbriones

It enables cookies usage to start storing user’s content via the CookieBanner component.

Enable env vars and set cookie consent to all subdomains

Feb 22: PR #8 merged into dev <- mathswe/ops by tobiasbriones

It supports the production and staging environments with public variables like domain names, as well as setting the cookie consent domain to all subdomains.

Notice that valid cross-site cookies must be set only by the APEX domain. Set the cookie consent from the main domain only, and it will apply to all its subdomains.

Implement rigorous Google Analytics app API

Feb 27: PR #9 merged into dev <- mathswe/ops by tobiasbriones

This implementation:

  • Uses env variables to set up GA as per environment requirements.
  • Follows the Google consent mode (v2).
  • Is type-safe.
  • Has important documentation.
  • Passes the consent mode tests via Google Tag Assistance and is reactive to cookie changes.
  • Disallows arbitrary updates (side effects) to the cookie banner check buttons while showing.

The remaining task is implementing this via SSR in the head tag (removing the react-ga lib).

Fix build with missing dep @types/gtag.js

Feb 27: PR #10 merged into dev <- mathswe/ops by tobiasbriones

Add extra personalization with more complete cookie consent and better banner styles

Mar 2: PR #11 merged into dev <- legal by tobiasbriones

It adds the other common categories of cookies: functional, and targeting.

It sets the other Google consent parameters from the Google documentation. They may not be required, but the system will set them accordingly.

It allows quality personalization by showing the underlying domain name requesting consent in the banner.

Personalization is even more complying now by enabling the “Essential Only” CTA button in the cookie banner, besides the existing “Accept All” CTA button.

It improves some styles for better readability in the cookie banner.