Task: Add device characteristics telemetry

package.json

@@ -130,4 +130,4 @@
  "resolutions": {
  "@types/react": "17.0.30"
  }
-}
+}

src/app/utils/device-characteristics-telemetry.spec.ts

@@ -0,0 +1,28 @@
+import { getDeviceScreenScale, getBrowserScreenSize } from './device-characteristics-telemetry'
+
+Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: jest.fn().mockImplementation(query => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(), // Deprecated
+ removeListener: jest.fn(), // Deprecated
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn()
+ }))
+});
+describe('Device Telemetry', () => {
+ it('should get device screen scale', () => {
+ const percentage = '%';
+ expect(getDeviceScreenScale()).toContain(percentage);
+ });
+
+ it('should get device screen size', () => {
+ const deviceWidth = 1367;
+ const expectedScreenSize = 'xxl';
+ expect(getBrowserScreenSize(deviceWidth)).toBe(expectedScreenSize);
+ });
+})
+

src/app/utils/device-characteristics-telemetry.ts

@@ -0,0 +1,28 @@
+export function getBrowserScreenSize(browserWidth: number){
+ if(browserWidth >= 1920){
+ return 'xxxl';
+ }
+ else if(browserWidth >= 1366){
+ return 'xxl';
+ }
+ else if(browserWidth >= 1024){
+ return 'xl';
+ }
+ else if(browserWidth >= 640){
+ return 'l';
+ }
+ else if(browserWidth >= 480){
+ return 'm';
+ }
+
+ return 's';
+}
+
+export function getDeviceScreenScale(){
+ const scaleString = (window.devicePixelRatio * 100).toFixed(0);
+
+ matchMedia(`(resolution: ${scaleString})dppx`).addEventListener('change',
+ getDeviceScreenScale, {once: true})
+
+ return `${scaleString}%`;
+}

src/app/views/query-runner/QueryRunner.tsx

@@ -99,6 +99,8 @@ IQueryRunnerState
  SelectedVersion: sampleQuery.selectedVersion,
  QuerySignature: `${sampleQuery.selectedVerb} ${sanitizedUrl}`
  });
+
+ telemetry.trackDeviceCharacteristicsTelemetry();
  }
  this.setState({ sampleBody: '' });
  };

src/telemetry/event-types.ts

@@ -6,3 +6,4 @@ export const LINK_CLICK_EVENT = 'LINK_CLICK_EVENT';
 export const LISTITEM_CLICK_EVENT = 'LISTITEM_CLICK_EVENT';
 export const DROPDOWN_CHANGE_EVENT = 'DROPDOWN_CHANGE_EVENT';
 export const WINDOW_OPEN_EVENT = 'WINDOW_OPEN_EVENT';
+export const DEVICE_CHARACTERISTICS_EVENT = 'DEVICE_CHARACTERISTICS_EVENT';

src/telemetry/telemetry.ts

@@ -15,6 +15,7 @@ import { sanitizeQueryUrl } from '../app/utils/query-url-sanitization';
 import { IQuery } from '../types/query-runner';
 import {
  BUTTON_CLICK_EVENT,
+ DEVICE_CHARACTERISTICS_EVENT,
  LINK_CLICK_EVENT,
  TAB_CLICK_EVENT,
  WINDOW_OPEN_EVENT
@@ -28,6 +29,7 @@ import {
 } from './filters';
 import ITelemetry from './ITelemetry';
 import { getVersion } from '../app/utils/version';
+import { getBrowserScreenSize, getDeviceScreenScale } from '../app/utils/device-characteristics-telemetry';
 
 class Telemetry implements ITelemetry {
  private appInsights: ApplicationInsights;
@@ -118,6 +120,20 @@ class Telemetry implements ITelemetry {
  telemetry.trackEvent(WINDOW_OPEN_EVENT, properties);
  }
 
+ public trackDeviceCharacteristicsTelemetry(properties?: any){
+ const deviceProperties = {
+ deviceHeight: screen.height,
+ deviceWidth: screen.width,
+ browserScreenSize: getBrowserScreenSize(window.innerWidth),
+ browserHeight: window.innerHeight,
+ browserWidth: window.innerWidth,
+ scale: getDeviceScreenScale()
+ };
+ properties = Object.assign(properties || {}, deviceProperties);
+
+ telemetry.trackEvent(DEVICE_CHARACTERISTICS_EVENT, properties);
+ }
+
  private getInstrumentationKey() {
  return (
  (window as any).InstrumentationKey ||