Bug 1867294: Support for automatically collecting element click events (first version)

[abhi-agg]

Description

This PR implements the first version to automatically collect click events on html elements:

1. It will record clicks to any HTMLElement that have at least one of data-glean-id, data-glean-type, data-glean-label data attributes.
2. Additional context that is collected with this event (via extra_keys):
   1. id: A string indicating an identifier of the clicked element (takes its value from element's data-glean-id attribute value if present)
   2. type: A string indicating the type of the clicked element (takes its value from element's data-glean-type attribute value if present)
   3. label: A string indicating the label of the clicked element (takes its value from element's data-glean-label attribute value if present)

How clients can use it:

There are 2 options:

1. For automatically recording clicks on html elements: Instrumenting the elements with at least one of data-glean-id, data-glean-type and data-glean-label attribute and setting Configuration.enableAutoElementClickEvents option to true during Glean.js initialization. e.g. Like this:

Glean.initialize(APP_NAME, isTelemetryEnabled(), {
    maxEvents: 1,
    channel: process.env.REACT_APP_ENV,
    enableAutoElementClickEvents: true,
  });

2. For manually recording clicks on html elements: Explicitly calling the api

GleanMetrics.recordElementClick()

Pull Request checklist

• Quality: Make sure this PR builds and runs cleanly.
  • Inside the glean/ folder, run:
    • npm run test Runs all tests
    • npm run lint Runs all linters
• Tests: This PR includes thorough tests or an explanation of why it does not
• Changelog: This PR includes a changelog entry to CHANGELOG.md or an explanation of why it does not need one
• Documentation: This PR includes documentation changes, an explanation of why it does not need that or a follow-up bug has been filed to do that work
  • Documentation should be added to The Glean Book when making changes to Glean's user facing API
    • When changes to the Glean Book are necessary, link to the corresponding PR on the mozilla/glean repository
  • Documentation should be added to the Glean.js developer documentation when making internal code changes

[Dexterp37]

@abhi-agg please add a changelog entry!

I'm removing myself from review, leaving @rosahbruno and adding @quiiver (Wil, would you kindly take an high level look to make sure this is what you wanted?)

[rosahbruno]

Left a few initial comments. Do we think there might be a need for exposing the click event similar to what I did with the pageLoad event? That way if someone wants to use the event itself because of the dashboard they will end up with BUT they don't want to use the HTML attributes or they want to do something custom, etc. We could provide them with a GleanMetrics.recordClick() API so they can collect on their terms

[quiiver]

Looks good to me! Just a thought on extensibility. If I'm reading this correctly the only way to extend these auto collected events would be to re-create your own page_load and element_click event or you would need to extend the events defined in the core of glean.js making it a global change across all apps. While I don't think this is a blocker for this work here, I feel like this will come up as folks want to collect additional context along-side these default events.

[abhi-agg]

Looks good to me! Just a thought on extensibility. If I'm reading this correctly the only way to extend these auto collected events would be to re-create your own page_load and element_click event or you would need to extend the events defined in the core of glean.js making it a global change across all apps. While I don't think this is a blocker for this work here, I feel like this will come up as folks want to collect additional context along-side these default events.

You are absolutely right on this one. Our plan is to talk to different products within Mozilla to gather their requirements on the additional context that they would like to collect for click events and extend glean.js click events in the next version. I have tried to share more details in this comment and would love to have your thoughts on this. So, please free to chime in in the bug 🙂

Thanks a lot for your inputs on this PR :)

[abhi-agg]

Left a few initial comments. Do we think there might be a need for exposing the click event similar to what I did with the pageLoad event? That way if someone wants to use the event itself because of the dashboard they will end up with BUT they don't want to use the HTML attributes or they want to do something custom, etc. We could provide them with a GleanMetrics.recordClick() API so they can collect on their terms

@rosahbruno So, GleanMetrics.recordElementClick() API is already available for these scenarios. The code is in place for this.

Forgot to mention that I tested both modes:

1. automatic click event recording and
2. Recording click events manually via GleanMetrics.recordElementClick() API

in Debug Ping Viewer (details in the PR description) and both of them work. Please let me know if I missed something.

[rosahbruno]

NIT: Maybe individual preference, but these one-liner if's always feel less readable, but not a huge deal.