1883593 - Use Glean's automatic click events in Glean Dictionary

Status: RESOLVED FIXED

(Data Platform and Tools :: Glean: SDK, enhancement, P1)

Description

[Abhishek]

Record element click via Glean's builtin automatic element click events (introduced in https://github.com/mozilla/glean.js/pull/1848)

Focus is to instrument Glean's automatic element click events i.e. via data-glean-* attributes instead of manually calling the click event recording API (i.e. GleanMetrics.recordElementClick()).

This decision was made as a result of my discussion with :brosa on matrix where

he suggested:

I imagine most people already are comfortable using an event API, so if we instrument the DPV and the dictionary with the data-label's, we can use those as examples for a different way to collect the same info. Users may end up preferring data-label's, kinda like how MDN collects stuff, so having examples for them to see it working in the wild would be good.

And I proposed that:

AFAIK, MDN uses data-* attributes but Bedrock doesn't. They explicitly call the recording API. Although, they might (or might not) switch to using data-labels based approach with glean's automatic click events.

However, instrumenting via data-glean-* attribute in Debug Ping Viewer (DPV) did expose some issues (as per https://bugzilla.mozilla.org/show_bug.cgi?id=1882747) that were pertaining to not instrumenting the right elements for clicks. Other clients might face similar issues. Hence, to uncover more issues like these, if any, I will follow the same data-glean-* based instrumentation for Glean Dictionary as well 👍️

Comment 1

[Abhishek]

(In reply to Abhishek from comment #0)

However, instrumenting via data-glean-* attribute in Debug Ping Viewer (DPV) did expose some issues (as per https://bugzilla.mozilla.org/show_bug.cgi?id=1882747) that were pertaining to not instrumenting the right elements for clicks. Other clients might face similar issues. Hence, to uncover more issues like these, if any, I will follow the same data-glean-* based instrumentation for Glean Dictionary as well 👍️

As a first step, I was trying to capture clicks when a user cliks on various apps listed on the home page of Glean Dictionary using Glean's automated click feature and I encountered the similar issues as faced for Debug Ping Viewer. This time, it is not an <svg> tag but a nested <a> tag. However, after annotating all nested elements with pointer-events:none css styling (the same way as was done for Debug Ping Viewer), I could make it work.

Comment 2

[Abhishek]

As per my conversation with :dexter on matrix in context of https://bugzilla.mozilla.org/show_bug.cgi?id=1885504#c1, the plan is to:

1. Create PR with functionality specified in https://bugzilla.mozilla.org/show_bug.cgi?id=1883593#c1, get this PR reviewed and merged and then deploy latest Glean Dictionary as the priority is to have some click events right now, than having all of them perfectly working.

After this, the plan is to:

2. Fix https://bugzilla.mozilla.org/show_bug.cgi?id=1885504
3. Cut a new Glean.js release
4. Record clicks using Glean's automated click capturing feature for rest of the elements that haven't been captured in step 1

Comment 3

[Abhishek]

(In reply to Abhishek from comment #2)

1. Create PR with functionality specified in https://bugzilla.mozilla.org/show_bug.cgi?id=1883593#c1, get this PR reviewed and merged and then deploy latest Glean Dictionary as the priority is to have some click events right now, than having all of them perfectly working.

Created PR https://github.com/mozilla/glean-dictionary/pull/2155 to resolve this.

Comment 4

[Abhishek]

Attachment: [mozilla/glean-dictionary] [Bug 1883593] Capture app clicks via Glean's automated click events (#2155)

(In reply to Abhishek from comment #2)

1. Create PR with functionality specified in https://bugzilla.mozilla.org/show_bug.cgi?id=1883593#c1, get this PR reviewed and merged and then deploy latest Glean Dictionary as the priority is to have some click events right now, than having all of them perfectly working.

Created PR https://github.com/mozilla/glean-dictionary/pull/2155 to resolve this.

Comment 5

[Abhishek]

(In reply to Abhishek from comment #4)

Created attachment 9391448 [details] [review]
[mozilla/glean-dictionary] [Bug 1883593] Capture app clicks via Glean's automated click events (#2155)

(In reply to Abhishek from comment #2)

1. Create PR with functionality specified in https://bugzilla.mozilla.org/show_bug.cgi?id=1883593#c1, get this PR reviewed and merged and then deploy latest Glean Dictionary as the priority is to have some click events right now, than having all of them perfectly working.

Created PR https://github.com/mozilla/glean-dictionary/pull/2155 to resolve this.

Latest changes of Glean Dictionary deployed to prod as per https://bugzilla.mozilla.org/show_bug.cgi?id=1885642

Comment 6

[Abhishek]

(In reply to Abhishek from comment #2)

After this, the plan is to:

2. Fix https://bugzilla.mozilla.org/show_bug.cgi?id=1885504

I have started working on this issue now.

Comment 7

[Abhishek]

(In reply to Abhishek from comment #2)

After this, the plan is to:

2. Fix https://bugzilla.mozilla.org/show_bug.cgi?id=1885504
3. Cut a new Glean.js release
4. Record clicks using Glean's automated click capturing feature for rest of the elements that haven't been captured in step 1

Created a bug https://bugzilla.mozilla.org/show_bug.cgi?id=1886159 that blocks this bug. Once 1886159 is resolve, I can resume working on 4

Comment 8

[Abhishek]

(In reply to Abhishek from comment #2)

As per my conversation with :dexter on matrix in context of https://bugzilla.mozilla.org/show_bug.cgi?id=1885504#c1, the plan is to:

1. Create PR with functionality specified in https://bugzilla.mozilla.org/show_bug.cgi?id=1883593#c1, get this PR reviewed and merged and then deploy latest Glean Dictionary as the priority is to have some click events right now, than having all of them perfectly working.

After this, the plan is to:

2. Fix https://bugzilla.mozilla.org/show_bug.cgi?id=1885504
3. Cut a new Glean.js release
4. Record clicks using Glean's automated click capturing feature for rest of the elements that haven't been captured in step 1

Now that https://bugzilla.mozilla.org/show_bug.cgi?id=1886159 is resolved, I will resume working on 4.

I am trying to gather information regarding which clicks are important for us to capture in Glean Dictionary:

1. We are already capturing clicks on apps on the home page.
2. As per my conversation with :dexter, he wanted to understand how users interact on individual metric page (as an example, clicks on https://dictionary.telemetry.mozilla.org/apps/fenix/metrics/activation_activation_id) => I will start with their instrumentation.

While I work on 2, I will discuss with Bruno in parallel to gather rest of the requirements and document them here.

Comment 9

[Abhishek]

Attachment: [mozilla/glean-dictionary] [Bug 1883593] Instrumentation to capture more clicks via glean (#2164)

Comment 10

[Abhishek]

abhi-agg merged PR [mozilla/glean-dictionary]: [Bug 1883593] Instrumentation to capture more clicks via glean (#2164) in b15f8f7.

This PR capture clicks on:

1. Metric details page: Clicks on Access section (bottom most) and Sampling Configuration Snippet row inside Metric sampling section

2. App details page: Clicks on Metrics, Pings, Tags, Application IDs and Third-Party Data tabs

Comment 11

[Abhishek]

The latest state of click capturing in Glean Dictionary is:

1. Home page: Clicks on various apps listed on this page
2. Metric details page: Clicks on Access section (bottom most) and Sampling Configuration Snippet row inside Metric sampling section
3. App details page: Clicks on Metrics, Pings, Tags, Application IDs and Third-Party Data tabs

Comment 12

[Abhishek]

Deployed latest Glean Dictionary to production.

As per my conversation with :dexter, work on this ticket is done. If we decide to add more instrumentation to capture more clicks in Glean Dictionary then a new ticket can be opened.