Measure user usage of the Cribbage Trainer automatically deployed to GitHub Pages

[markafitzgerald1]

At present there is no available measure of how much traffic the automatically deployed to GitHub Pages version of Cribbage Trainer is getting, if any.

Add some sort of tracker so that once the application is getting traffic, it's application development and roadmap can be adjusted and fine-tuned based on its global usage information and trends.

[markafitzgerald1]

I'm currently investigating whether Google Analytics will suffice as a starting point to provide basic user usage info.

[markafitzgerald1]

Consider adding per user action tracking as well for:

• discard selection, and
• discard deselection

in order to measure how much users use the app per page load. (#6 will affect these analytics, allowing users to stay on the same page without reloading for multiple hands.)

[markafitzgerald1]

The Google Analytics Terms and Conditions requires a Privacy Policy and user consent to Google Analytics cookies and/or local storage in section 7. Privacy:

You will have and abide by an appropriate Privacy Policy and will comply with all applicable laws, policies, and regulations relating to the collection of information from Users. You must post a Privacy Policy and that Privacy Policy must provide notice of Your use of cookies, identifiers for mobile devices (e.g., Android Advertising Identifier or Advertising Identifier for iOS) or similar technology used to collect data. You must disclose the use of Google Analytics, and how it collects and processes data. This can be done by displaying a prominent link to the site "How Google uses information from sites or apps that use our services", (located at www.google.com/policies/privacy/partners/, or any other URL that Google may provide from time to time). You will use commercially reasonable efforts to ensure that a User is provided with clear and comprehensive information about, and consents to, the storing and accessing of cookies or other information on the User’s device where such activity occurs in connection with the Service and where providing such information and obtaining such consent is required by law.

Working on that now.

• Create a Privacy Policy component
• Add the Privacy Policy component to the main application user interface
• Create a user consent to the use of Google Analytics component
• Add the user consent component to the main application user interface

[markafitzgerald1]

Adding Storybook to more effectively iterate on the Google Analytics consent widget before incorporating it into the main user interface.

• Add Storybook
• Create Analytics consent widget

[markafitzgerald1]

Branch and draft PR created with dependencies updated and deploy to production disabled for non-main branches.

GitHub repository settings updated to require PR passing build and test check before merge to main to avoid any future production outages due to GitHub Actions detectable issues.

[markafitzgerald1]

Storybook does not appear to support Parcel. Default Storybook instructions only show how to use it with Webpack and Vite. Vite seems to be more future-proof and its use of ECMAScript modules very likely works with the evergreen browsers this project is targeting. Perhaps consider a move to Vite via this migration guide from Parcel) as a supported path to using Storybook? There's no obvious sign of Parcel support coming to Storybook and a move to Vite would buy some local development performance gains. Also, Storybook based UI component development looks rather awesome!

• Prototype migration from Parcel to Vite to enable use of Storybook (to enable ease of development of this new UI component in Cribbage Trainer).

[markafitzgerald1]

TIL: The GitHub Pages Action has a feature in development to:

deploy a pull request as a GitHub Pages preview site

The feature is still in non-public alpha, but let's monitor to enable the possibility of deploys to a preview site from PRs.

[markafitzgerald1]

Install and use of Vite followed by disuse and uninstall of Parcel may be easier and another than using a third party migration guide.

[markafitzgerald1]

Replaced Parcel with Vite in 633c7d6.

[markafitzgerald1]

The Package production dependency looks like an accidental error. Please remove in this PR if it is the next one to merge into main.

• Remove Package dependency.

[markafitzgerald1]

Storybook with Card stories added in 4281a13.

[markafitzgerald1]

Package dependency removed in 8aaa89a.

[markafitzgerald1]

Storybook Test Runner incorporated in local and GitHub Actions checks in 81f6df8.

[markafitzgerald1]

PR branch getting too big: 9,654 lines added and 3,421 lines removed. I think I'll start merging the supporting changes for the resolution of this issue into main one at a time to reduce PR size and branch duration (currently 25 days old) in order to keep non-merged work in progress size more manageable and understandable.

[markafitzgerald1]

Automated local serving of Storybook for Storybook tests in the 21-measure-cribbage-trainer-github-pages-usage branch to automate one sometimes needed local development separate step.

[markafitzgerald1]

Adding Storybook well will likely require modifying how the existing components work as stories are added.

TODO:

• Change Card to only fire events on change - not actually modify app state.
• Add stories for:
  • Hand,
  • SortOrderInput,
  • SortableHand,
  • CardLabel (formerly PossibleHandCard, which was inlined 20231204),
  • PossibleHand,
  • ScoredPossibleKeepDiscard (formerly Calculation, which was renamed 20231204),
  • ScoredPossibleKeepDiscards (formerly Calculations, which was renamed 20231204), and
  • Trainer

[markafitzgerald1]

822cfae pushed to this branch and draft PR to simplify the Card component to fire events instead of directly modifying state via parent component overall hand state hook calls.

[markafitzgerald1]

CardLabel stories added in 127963b.

[markafitzgerald1]

Probably PossibleHand is next to get Storybook stories, or perhaps Hand.

[markafitzgerald1]

PR has gotten too big. Will merge it into main, then continue on this issue using trunk-based development to reduce cognitive load (only one branch) and keep the tip of development production tested.

Issue resolution strategy remains the same: supporting technical infrastructure before feature + issue remains open until both technical support and the feature are complete with minimal technical debt, where all technical debt is captured in Issues.

[markafitzgerald1]

TODO:

• merge and close PR

[markafitzgerald1]

First three commits of the PR (#27) now exist in main:

• move to Node.js 20,
• restrict of deploy to occur from main only, and
• move from Parcel to Vite (to enable add of Storybook).

Next: add Storybook in main.

[markafitzgerald1]

Next three commits of the PR (#27) now exist in main:

• add Storybook and Card stories,
• ensure test screenshots up to date on Linux, and
• remove unused Package dependency.

Next: use the Storybook Test Runner.

[markafitzgerald1]

Mixpanel and Clicky also offer free analytics which would provide page load counts of Cribbage Trainer. Perhaps evaluate those as well?

TODO:

• Evaluate Mixpanel.
• Evaluate Clicky.

[markafitzgerald1]

All dependencies except eslint updated to latest. ESLint 9 can be successfully installed if typescript-eslint is upgraded to version 8.0.0-alpha-10 or greater now that typescript-eslint/typescript-eslint#8211 is Closed, but other dependencies like eslint-plugin-jest do not seem to be happy to work with @typescript-eslint/eslint-plugin@^8.

I'll defer on upgrading to ESLint 9 for now, waiting until at least a non-alpha, @latest release of typescript-eslint exists which works with ESLint 9. By that time, hopefully all transitive dependencies also work with ESLint 9.

[markafitzgerald1]

I had a quick look over Mixpanel and Clicky as alternatives to using Google Analytics, and concluded that because Google Analytics is suitable for both now (small-scale, growing app) and the future (during the growth phase), I'll stick with Google Analytics as the initial analytics provider for Cribbage Trainer.

[markafitzgerald1]

All dependencies except eslint updated to latest. eslint upgrade to version 9 no longer blocked on typescript-eslint/typescript-eslint#8211, but is still blocked on jsx-eslint/eslint-plugin-jsx-a11y#978.

[markafitzgerald1]

"Add the user consent component to the main application user interface" TODO almost ready for push to branch: functional code is complete, style is complete, unit test coverage is almost complete.

[markafitzgerald1]

"Add the user consent component to the main application user interface" TODO added in draft PR #151.

Will still need "Add the Privacy Policy component to the main application user interface" and "Use Google Analytics in the GitHub Pages deployed version of Cribbage Trainer when consented to by the user" TODOs done before that PR can be merged and deployed, as all three parts are required together for the production app to make sense.

[markafitzgerald1]

Privacy Policy improved upon in #151. TODO: add Policy to UI from both analytics consent dialog and main app UI.

[markafitzgerald1]

TODO

• review policy for any missing bits (e.g. meaning of local storage)
• review policy for possible simplifications (e.g. data retention period as it is the Google Analytics (GA) default, cookies section when cookies only used for GA, third party data sharing section when not done or currently planned to be used).

[markafitzgerald1]

Local storage explanation for non-technical readers added to Privacy Policy in #151.

[markafitzgerald1]

Cookies section of Privacy Policy simplified in #151.

[markafitzgerald1]

Data Sharing section of Privacy Policy simplified in #151.

[markafitzgerald1]

Privacy Policy content improvements complete in #151.

[markafitzgerald1]

Privacy policy added and linked in #151 commit c88a91e.

Google Analytics 4 loaded with consent mode in #151 in bce7033.

#151 merged into the main branch and deployed to production as of 2024-09-22T22:36:04-04.

[markafitzgerald1]

Google Analytics says "Your Google tag wasn't detected on your website." after running its test.

I concur: no Google Analytics getting loaded in production. Why not?

[markafitzgerald1]

2024-09-22T23:53:43-04: Google Analytics 4 tag now detected on the production Cribbage Trainer site. Fix was to use the vars context: https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/accessing-contextual-information-about-workflow-runs#vars-context.

[markafitzgerald1]

However, my Firefox client is not loading the GA script. Investigation continues...

[markafitzgerald1]

uBlock was blocking Google Tag Manager in Firefox. Reconfiguration of Firefox uBlock to allow Google Tag Manager on https://markafitzgerald1.github.io/cribbage-trainer/ resolved that issue.

Google Tag Manager also loading in my Chrome.

No additional traffic sent that I can see on accept of analytics.

No traffic showing from my Firefox or my Chrome in the Google Analytics Realtime view or Home Page (Dashboard).

[markafitzgerald1]

Adding the Google Analytics advised script tags:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

directly to <head> results in an event being sent to Google Analytics.

Now that we have a known working state, can compare against current main / production code to figure out why the above works and production does not!

[markafitzgerald1]

The issue was that the Google Analytics gtag function used the arguments array-like object while the production code was using a ...args rest parameter.

The fix was to go back to using the arguments array-like object in the gtag function.

[markafitzgerald1]

Issue fixed in #161, deployed 20240924T001458-04 and confirmed working T001902-04.

[markafitzgerald1]

Event tracking looks correct in Google Analytics. Will leave this issue open at least a day or two to confirm analytics are gathered for users that are not me. :)

[markafitzgerald1]

I'm not certain that analytics events on discard selection and deselection is useful at present. Will ponder before explicitly deciding whether to do that in this Issue or not. (Base GA tracking may be enough for current needs and to close this Issue.)

[markafitzgerald1]

It may be more effective to not track any custom app events in this issue. Instead, the events to up track can be selected in order to help decide whether and when to build new features, and to measure the impacts of new features.

[markafitzgerald1]

Analytics still seems to be working.

Ideas after this issue closes:

• Get Google to index production app site - once app is more useful.
• Buy a domain name and point it at the GitHub Pages site - again, once the app is more useful.

[markafitzgerald1]

Won't ask Google to index (#22) just yet - app needs to be more of a minimum lovable product (MLP) first. Same for domain name (#163).

[markafitzgerald1]

#164 opened to get some sort of measure of usage by Google Analytics blocking users.

[markafitzgerald1]

All done!