Fixes #3100 - Send GA events for issue-wizard clicks/input changes

[johngian]

This PR fixes issue #3100

Proposed PR background

We would like to keep track of events in the redesigned issue form. This PR adds more detailed events for this specific page outside of the generic page views we send.

At the moment we track:

• Next step clicks
• Form input changes

[johngian]

This is the console log when using debug_analytics.js version of analytics.js in my local env with some casual browsing.

                         _                          _       _   _
                        | |                        | |     | | (_)
  __ _  ___   ___   __ _| | ___    __ _ _ __   __ _| |_   _| |_ _  ___ ___
 / _` |/ _ \ / _ \ / _` | |/ _ \  / _` | '_ \ / _` | | | | | __| |/ __/ __|
| (_| | (_) | (_) | (_| | |  __/ | (_| | | | | (_| | | |_| | |_| | (__\__ \
 \__, |\___/ \___/ \__, |_|\___|  \__,_|_| |_|\__,_|_|\__, |\__|_|\___|___/
  __/ |             __/ |                              __/ |
 |___/             |___/                              |___/
analytics_debug.js:16:359
Running analytics_debug.js. This script is intended for testing and debugging only. analytics_debug.js:16:359
Initializing Google Analytics. analytics_debug.js:16:359
Running command: ga("create", "UA-116539473-1", "webcompat.com") analytics_debug.js:16:359
Creating new tracker: t0 analytics_debug.js:16:359
New visitor. Generating new clientId analytics_debug.js:16:359
Generating new gid analytics_debug.js:16:359
Running command: ga("send", "pageview") analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Running command: ga("set", "anonymizeIp", true) analytics_debug.js:16:359
Registered new plugin: ga(provide, "render", Function) analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "click", eventCategory: "wizard next-step click", eventLabel: "step-container step1 col open"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "input", eventCategory: "wizard input", eventLabel: "step-container step1 col open"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "click", eventCategory: "wizard next-step click", eventLabel: "step-container step2 col open"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "click", eventCategory: "wizard next-step click", eventLabel: "step-container step2 col open"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "click", eventCategory: "wizard next-step click", eventLabel: "step-container step3 subproblem col"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "click", eventCategory: "wizard next-step click", eventLabel: "step-container step3 subproblem col"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "click", eventCategory: "wizard next-step click", eventLabel: "step-container step6 col open"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "click", eventCategory: "wizard next-step click", eventLabel: "step-container step6 col open"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "input", eventCategory: "wizard input", eventLabel: "step-container step6 col open"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "click", eventCategory: "wizard next-step click", eventLabel: "step-container step8 col open"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "input", eventCategory: "wizard input", eventLabel: "step-container step8 col open"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "click", eventCategory: "wizard next-step click", eventLabel: "step-container step10 col upload-screenshot open"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "click", eventCategory: "wizard next-step click", eventLabel: "step-container step11 col final-step open"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Scroll anchoring was disabled in a scroll container because of too many consecutive adjustments (10) with too little total distance (2.46333332061768 px average, 24.6333 px total). new
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "click", eventCategory: "wizard next-step click", eventLabel: "step-container step11 col final-step open"}) analytics_debug.js:16:359
Storage not available. Aborting hit. analytics_debug.js:16:359
Executing Google Analytics commands. analytics_debug.js:16:359
Running command: ga("send", "event", {eventAction: "input", eventCategory: "wizard input", eventLabel: "step-container step11 col final-step open"}) analytics_debug.js:16:359

[karlcow]

I let @miketaylr review this one.
he is away until 2019-12-03

[miketaylr]

Code LGTM -- I don't really know how to analyze the data to understand pain points in the wizard, but I assume someone does. :)

(I guess we expect to see equal amounts of clicks for each steps in a perfect world?)