MPP-3528: Recreate website metrics, add images

[jwhitlock]

This rewrites METRICS.md to include all the frontend code that emits Google Analytics events, as well as sample images to make it easier to refer to buttons and text.

The images are minimized for size with pngquant. They are displayed at 1/3 width, and can be clicked to see the full image.

How to test:

• Read the doc, see if anything sounds off. Don't feel you have to read all the details, skimming is fine.
• Spot check by searching for categories, labels, etc in frontend/src.

• I've added or updated relevant docs in the docs/ directory.

[groovecoder]

Thanks! This is a great thorough update to the metrics doc.

The screenshots help establish context for the pings really well, but a couple (non-blocking) concerns about including screenshots:

• We only include screenshots for the website and not the add-on
• We will have to maintain the screenshots

[groovecoder]

suggestion (non-blocking):

Suggested change

	Here is a summary of the event categories and actions:
	Here is an in-depth table of the event categories and actions:

😛

[jwhitlock]

The screenshots help establish context for the pings really well, but a couple (non-blocking) concerns about including screenshots:

We only include screenshots for the website and not the add-on

Yep, the new detailed sections only cover the website. The add-on documentation (called an "Extension", we should revisit if we want to use that) is untouched and at the bottom of the document. I hope to tackle that next.

We will have to maintain the screenshots

A few thoughts:

1. We weren't doing a great job of updating this document when it was text only either, so yeah, it will get out of date.
2. We have no dedicated design resources, so the design won't change
3. It was easier to generate screenshots than to understand React code