Round dimension type values on payload (close #1195) (#1196)

common/changes/@snowplow/browser-tracker-core/feature-1195-round-width-x-height-values_2023-05-22-13-17.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@snowplow/browser-tracker-core",
+      "comment": "Round dimension type values on payload",
+      "type": "none"
+    }
+  ],
+  "packageName": "@snowplow/browser-tracker-core"
+}

common/changes/@snowplow/tracker-core/feature-1195-round-width-x-height-values_2023-05-22-13-17.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@snowplow/tracker-core",
+      "comment": "Make addPayloadPair more lenient with 'uknown' type",
+      "type": "none"
+    }
+  ],
+  "packageName": "@snowplow/tracker-core"
+}

libraries/browser-tracker-core/src/helpers/browser_props.ts

@@ -1,8 +1,11 @@
+/* Separator used for dimension values e.g. widthxheight */
+const DIMENSION_SEPARATOR = 'x';
+
 export function getBrowserProperties() {
   return {
-    viewport: detectViewport(),
-    documentSize: detectDocumentSize(),
-    resolution: screen.width + 'x' + screen.height,
+    viewport: floorDimensionFields(detectViewport()),
+    documentSize: floorDimensionFields(detectDocumentSize()),
+    resolution: floorDimensionFields(detectScreenResolution()),
     colorDepth: screen.colorDepth,
     devicePixelRatio: window.devicePixelRatio,
     cookiesEnabled: window.navigator.cookieEnabled,
@@ -35,7 +38,7 @@ function detectViewport() {
   }
 
   if (width >= 0 && height >= 0) {
-    return width + 'x' + height;
+    return width + DIMENSION_SEPARATOR + height;
   } else {
     return null;
   }
@@ -55,5 +58,19 @@ function detectDocumentSize() {
     bodyHeight = be ? Math.max(be.offsetHeight, be.scrollHeight) : 0;
   var w = Math.max(de.clientWidth, de.offsetWidth, de.scrollWidth);
   var h = Math.max(de.clientHeight, de.offsetHeight, de.scrollHeight, bodyHeight);
-  return isNaN(w) || isNaN(h) ? '' : w + 'x' + h;
+  return isNaN(w) || isNaN(h) ? '' : w + DIMENSION_SEPARATOR + h;
+}
+
+function detectScreenResolution() {
+  return screen.width + DIMENSION_SEPARATOR + screen.height;
+}
+
+export function floorDimensionFields(field?: string | null) {
+  return (
+    field &&
+    field
+      .split(DIMENSION_SEPARATOR)
+      .map((dimension) => Math.floor(Number(dimension)))
+      .join(DIMENSION_SEPARATOR)
+  );
 }

libraries/browser-tracker-core/test/browser_props.test.ts

@@ -0,0 +1,13 @@
+import { floorDimensionFields } from '../src/helpers/browser_props';
+
+describe('Browser props', () => {
+  it('floorDimensionFields correctly floors dimension type values', () => {
+    const testDimensions = '100x100';
+    expect(floorDimensionFields(testDimensions)).toEqual(testDimensions);
+  });
+
+  it('floorDimensionFields correctly floors dimension type values with fractional numbers', () => {
+    const testFractionalDimensions = '100.2x100.1';
+    expect(floorDimensionFields(testFractionalDimensions)).toEqual('100x100');
+  });
+});

libraries/tracker-core/src/core.ts

@@ -155,7 +155,7 @@ export interface TrackerCore {
    * @param key - Field name
    * @param value - Field value
    */
-  addPayloadPair: (key: string, value: string | number) => void;
+  addPayloadPair: (key: string, value: unknown) => void;
 
   /**
    * Get current base64 encoding state
@@ -429,7 +429,7 @@ export function trackerCore(configuration: CoreConfiguration = {}): TrackerCore
      * @param key - Field name
      * @param value - Field value
      */
-    function addPayloadPair(key: string, value: string | number): void {
+    function addPayloadPair(key: string, value: unknown): void {
       payloadPairs[key] = value;
     }