Add telemetry on device characteristics

[RabebOthmani]

In order to get responsiveness right and provide a good experience for our customers, we first need to understand what devices and screen resolutions are most used. The goal here is to add telemetry to capture screen resolution and other device characteristics that will help us understand usage patterns and build appropriately.

[RabebOthmani]

@gavinbarron please feel free to add anything I missed

[gavinbarron]

Thanks for creating this issue @RabebOthmani I'd suggest that we extend our base trackEvent method to enrich the custom properties being sent to Application Insights with clientWidth, clientHeight, and bucketing of the width that corresponds to the MADS layout guidance for break points

xxxl: width >= 1920px xxl: 1366px <= width <= 1919px xl: 1024px <= width <= 1365px l: 640px <= width <= 1023px m: 480px <= width <= 639px s: width <= 479px (interestingly MADS doesn't define this but we should have a bucket for it)

[MaryannGitonga]

Alongside the screen.width and screen.height, other device characteristics to be captured are:

• Browser width and height (window.innerWidth and window.innerHeight respectively) to capture telemetry in a real scenario when a user resizes the browser.
• Device pixel ratio (window.devicePixelRatio) to monitor screen resolution and zoom levels and to help identify where users are being bumped down to lower effective resolutions due to device settings.

The telemetry should be captured in a redundant manner (whenever a user resizes the browser) to help analyze how many graph requests are being sent by a particular screen size/browser size.