Update web-vitals to accept custom entities (#1273)

* Update web-vitals to accept custom entities

* Update changelogs

Author: jethron

common/changes/@snowplow/browser-plugin-web-vitals/wv-context_2023-12-12-00-59.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@snowplow/browser-plugin-web-vitals",
+      "comment": "Add `context` support for the web_vitals event",
+      "type": "none"
+    }
+  ],
+  "packageName": "@snowplow/browser-plugin-web-vitals"
+}

plugins/browser-plugin-web-vitals/README.md

@@ -43,7 +43,8 @@ newTracker('sp1', '{{collector}}', { plugins: [ WebVitalsPlugin(/* pluginOptions
  * {
  *  loadWebVitalsScript: Should the plugin immediately load the Core Web Vitals measurement script from UNPKG CDN.
  *  webVitalsSource: The URL endpoint the Web Vitals script should be loaded from. Defaults to the UNPKG CDN.
- * } 
+ *  context: Array of entity objects or entity-generating functions (the web_vitals payload is passed as a parameter) to attach to the web_vitals event.
+ * }
  */
 ```
 

plugins/browser-plugin-web-vitals/src/index.ts

@@ -1,5 +1,5 @@
 import { BrowserPlugin, BrowserTracker, dispatchToTrackersInCollection } from '@snowplow/browser-tracker-core';
-import { buildSelfDescribingEvent } from '@snowplow/tracker-core';
+import { DynamicContext, buildSelfDescribingEvent, resolveDynamicContext } from '@snowplow/tracker-core';
 import { WEB_VITALS_SCHEMA } from './schemata';
 import { attachWebVitalsPageListeners, createWebVitalsScript, webVitalsListener } from './utils';
 
@@ -10,11 +10,13 @@ let listenersAttached = false;
 interface WebVitalsPluginOptions {
   loadWebVitalsScript?: boolean;
   webVitalsSource?: string;
+  context?: DynamicContext;
 }
 
 const defaultPluginOptions = {
   loadWebVitalsScript: true,
   webVitalsSource: WEB_VITALS_SOURCE,
+  context: [],
 };
 
 /**
@@ -45,7 +47,8 @@ export function WebVitalsPlugin(pluginOptions: WebVitalsPluginOptions = defaultP
                 schema: WEB_VITALS_SCHEMA,
                 data: webVitalsObject,
               },
-            })
+            }),
+            resolveDynamicContext(options.context ?? [], webVitalsObject)
           );
         });
       }

plugins/browser-plugin-web-vitals/test/__snapshots__/web-vitals.test.ts.snap

@@ -14,3 +14,19 @@ Object {
   "schema": "iglu:com.snowplowanalytics.snowplow/web_vitals/jsonschema/1-0-0",
 }
 `;
+
+exports[`Web Vitals plugin Returns values for Web Vitals properties: context 1`] = `
+Array [
+  Object {
+    "data": Array [
+      Object {
+        "data": Object {
+          "ok": true,
+        },
+        "schema": "iglu:com.example/test/jsonschema/1-0-0",
+      },
+    ],
+    "schema": "iglu:com.snowplowanalytics.snowplow/contexts/jsonschema/1-0-0",
+  },
+]
+`;

plugins/browser-plugin-web-vitals/test/web-vitals.test.ts

@@ -40,13 +40,17 @@ describe('Web Vitals plugin', () => {
     const core = trackerCore({
       corePlugins: [],
       callback: (payloadBuilder) => {
-        const { data } = payloadBuilder.getJson()[0].json;
-        expect(data).toMatchSnapshot();
+        const [data, ...context] = payloadBuilder.getJson();
+        expect(data.json.data).toMatchSnapshot();
+        expect(context.map(({ json }) => json)).toMatchSnapshot('context');
         done();
       },
     });
 
-    WebVitalsPlugin({ loadWebVitalsScript: false }).activateBrowserPlugin?.({ core } as BrowserTracker);
+    WebVitalsPlugin({
+      loadWebVitalsScript: false,
+      context: [{ schema: 'iglu:com.example/test/jsonschema/1-0-0', data: { ok: true } }],
+    }).activateBrowserPlugin?.({ core } as BrowserTracker);
     const pagehideEvent = new PageTransitionEvent('pagehide');
     jsdom.window.dispatchEvent(pagehideEvent);
   });