Add plugin based on my local webview tracker

common/config/rush/browser-approved-packages.json

@@ -166,6 +166,10 @@
       "name": "@snowplow/tracker-core",
       "allowedCategories": [ "libraries", "plugins", "trackers" ]
     },
+    {
+      "name": "@snowplow/webview-tracker",
+      "allowedCategories": [ "plugins" ]
+    },
     {
       "name": "@testing-library/dom",
       "allowedCategories": [ "libraries" ]

common/config/rush/repo-state.json

@@ -1,5 +1,5 @@
 // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
 {
-  "pnpmShrinkwrapHash": "d1933251824ef3eb837586f089856ce0f6036111",
+  "pnpmShrinkwrapHash": "412da84d3505397750a52478d20df47fa2942011",
   "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f"
 }

plugins/browser-plugin-webview/CHANGELOG.json

@@ -0,0 +1,5 @@
+{
+  "name": "@snowplow/browser-plugin-webview",
+  "entries": [
+  ]
+}

plugins/browser-plugin-webview/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2024 Snowplow Analytics Ltd
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

plugins/browser-plugin-webview/README.md

@@ -0,0 +1,59 @@
+# Snowplow WebView Plugin
+
+[![npm version][npm-image]][npm-url]
+[![License][license-image]](LICENSE)
+
+Browser Plugin to be used with `@snowplow/browser-tracker`.
+
+This plugin is for use in WebViews. It forwards the events to the Snowplow Android, iOS, or React Native trackers via the [Snowplow WebView tracker](https://github.com/snowplow-incubator/snowplow-webview-tracker).
+
+## Maintainer quick start
+
+Part of the Snowplow JavaScript Tracker monorepo.
+Build with [Node.js](https://nodejs.org/en/) (18 - 20) and [Rush](https://rushjs.io/).
+
+### Setup repository
+
+```bash
+npm install -g @microsoft/rush
+git clone https://github.com/snowplow/snowplow-javascript-tracker.git
+rush update
+```
+
+## Package Installation
+
+With npm:
+
+```bash
+npm install @snowplow/browser-plugin-webview
+```
+
+## Usage
+
+Initialize your tracker with the `WebViewPlugin`:
+
+```js
+import { newTracker } from '@snowplow/browser-tracker';
+import { WebViewPlugin } from '@snowplow/browser-plugin-webview';
+
+newTracker('sp1', '{{collector_url}}', {
+   appId: 'my-app-id',
+   plugins: [ WebViewPlugin() ],
+});
+```
+
+For a full API reference, you can read the plugin [documentation page](https://docs.snowplow.io/docs/collecting-data/collecting-from-own-applications/javascript-trackers/browser-tracker/browser-tracker-v3-reference/plugins/webview/).
+
+## Copyright and license
+
+Licensed and distributed under the [BSD 3-Clause License](LICENSE) ([An OSI Approved License][osi]).
+
+Copyright (c) 2024 Snowplow Analytics Ltd.
+
+All rights reserved.
+
+[npm-url]: https://www.npmjs.com/package/@snowplow/browser-plugin-webview
+[npm-image]: https://img.shields.io/npm/v/@snowplow/browser-plugin-webview
+[docs]: https://docs.snowplowanalytics.com/docs/collecting-data/collecting-from-own-applications/javascript-tracker/
+[osi]: https://opensource.org/licenses/BSD-3-Clause
+[license-image]: https://img.shields.io/npm/l/@snowplow/browser-plugin-webview

plugins/browser-plugin-webview/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  preset: 'ts-jest',
+  reporters: ['jest-standard-reporter'],
+  setupFilesAfterEnv: ['../../setupTestGlobals.ts'],
+  testEnvironment: 'jest-environment-jsdom-global',
+};

plugins/browser-plugin-webview/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@snowplow/browser-plugin-webview",
+  "version": "4.1.0",
+  "description": "Automatically forwards events to Snowplow mobile trackers running in a WebView.",
+  "homepage": "https://github.com/snowplow/snowplow-javascript-tracker",
+  "bugs": "https://github.com/snowplow/snowplow-javascript-tracker/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/snowplow/snowplow-javascript-tracker.git"
+  },
+  "license": "BSD-3-Clause",
+  "author": "Snowplow Analytics Ltd (https://snowplow.io/)",
+  "sideEffects": false,
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.module.js",
+  "types": "./dist/index.module.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c --silent --failAfterWarnings",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@snowplow/browser-tracker-core": "workspace:*",
+    "@snowplow/tracker-core": "workspace:*",
+    "tslib": "^2.3.1",
+    "@snowplow/webview-tracker": "github:snowplow-incubator/snowplow-webview-tracker#a02ad4331c39f45a15bd1eb05039d795726ad70b"
+  },
+  "devDependencies": {
+    "@ampproject/rollup-plugin-closure-compiler": "~0.27.0",
+    "@rollup/plugin-commonjs": "~21.0.2",
+    "@rollup/plugin-node-resolve": "~13.1.3",
+    "@types/jest": "~28.1.1",
+    "@types/jsdom": "~16.2.14",
+    "@typescript-eslint/eslint-plugin": "~5.15.0",
+    "@typescript-eslint/parser": "~5.15.0",
+    "eslint": "~8.11.0",
+    "jest": "~28.1.3",
+    "jest-environment-jsdom": "~28.1.3",
+    "jest-environment-jsdom-global": "~4.0.0",
+    "jest-standard-reporter": "~2.0.0",
+    "rollup": "~2.70.1",
+    "rollup-plugin-cleanup": "~3.2.1",
+    "rollup-plugin-license": "~2.6.1",
+    "rollup-plugin-terser": "~7.0.2",
+    "rollup-plugin-ts": "~2.0.5",
+    "ts-jest": "~28.0.8",
+    "typescript": "~4.6.2"
+  },
+  "peerDependencies": {
+    "@snowplow/browser-tracker": "~4.0.1"
+  }
+}

plugins/browser-plugin-webview/rollup.config.js

@@ -0,0 +1,37 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import ts from 'rollup-plugin-ts'; // Preferred over @rollup/plugin-typescript as it bundles .d.ts files
+import { banner } from '../../banner';
+import compiler from '@ampproject/rollup-plugin-closure-compiler';
+import { terser } from 'rollup-plugin-terser';
+import cleanup from 'rollup-plugin-cleanup';
+import pkg from './package.json';
+import { builtinModules } from 'module';
+
+const umdPlugins = [nodeResolve({ browser: true }), commonjs(), ts()];
+const umdName = 'snowplowWebViewTracking';
+
+export default [
+  // CommonJS (for Node) and ES module (for bundlers) build.
+  {
+    input: './src/index.ts',
+    plugins: [...umdPlugins, banner()],
+    treeshake: { moduleSideEffects: ['sha1'] },
+    output: [{ file: pkg.main, format: 'umd', sourcemap: true, name: umdName }],
+  },
+  {
+    input: './src/index.ts',
+    plugins: [...umdPlugins, compiler(), terser(), cleanup({ comments: 'none' }), banner()],
+    treeshake: { moduleSideEffects: ['sha1'] },
+    output: [{ file: pkg.main.replace('.js', '.min.js'), format: 'umd', sourcemap: true, name: umdName }],
+  },
+  {
+    input: './src/index.ts',
+    external: [...builtinModules, ...Object.keys(pkg.dependencies), ...Object.keys(pkg.devDependencies)],
+    plugins: [
+      ts(), // so Rollup can convert TypeScript to JavaScript
+      banner(),
+    ],
+    output: [{ file: pkg.module, format: 'es', sourcemap: true }],
+  },
+];

plugins/browser-plugin-webview/src/index.ts

@@ -0,0 +1,70 @@
+import { BrowserPlugin, BrowserTracker, Payload } from '@snowplow/browser-tracker-core';
+import { hasMobileInterface, trackWebViewEvent } from '../../../../../mirandawilson/snowplow-webview-tracker';
+import { Logger, SelfDescribingEvent, SelfDescribingJson } from '@snowplow/tracker-core';
+
+const _trackers: Record<string, BrowserTracker> = {};
+
+export function WebViewPlugin(): BrowserPlugin {
+  let LOG: Logger;
+
+  return {
+    activateBrowserPlugin: (tracker: BrowserTracker) => {
+      _trackers[tracker.id] = tracker;
+    },
+
+    logger: (logger: Logger) => {
+      LOG = logger;
+    },
+
+    filter: (payload) => {
+      if (hasMobileInterface() === true) {
+        LOG.debug(`Payload (event ID: ${payload.eid}) was filtered out and forwarded to WebView tracker.`);
+
+        let atomicProperties = {
+          eventName: payload.e as string,
+          trackerVersion: payload.tv as string,
+          useragent: payload.ua as string,
+          url: payload.url as string,
+          title: payload.page as string,
+          referrer: payload.refr as string,
+          category: payload.se_ca as string,
+          action: payload.se_ac as string,
+          label: payload.se_la as string,
+          property: payload.se_pr as string,
+          value: payload.se_va as number,
+          minXOffset: payload.pp_mix as number,
+          maxXOffset: payload.pp_max as number,
+          minYOffset: payload.pp_miy as number,
+          maxYOffset: payload.pp_may as number,
+        };
+        let event = getSelfDescribingEventData(payload);
+        let entities = getEntities(payload);
+        let trackers: Array<string> = Object.keys(_trackers);
+
+        trackWebViewEvent({ properties: atomicProperties, event: event, context: entities }, trackers);
+
+        return false;
+      } else {
+        return true;
+      }
+    },
+  };
+}
+
+function getSelfDescribingEventData(payload: Payload): SelfDescribingEvent | undefined {
+  if (payload.ue_pr) {
+    return JSON.parse(payload.ue_pr as string);
+  } else if (payload.ue_px) {
+    return JSON.parse(payload.ue_px as string);
+  }
+  return undefined;
+}
+
+function getEntities(payload: Payload): SelfDescribingJson[] {
+  if (payload.co) {
+    return JSON.parse(payload.co as string)['data'];
+  } else if (payload.cx) {
+    return JSON.parse(payload.cx as string)['data'];
+  }
+  return [];
+}

plugins/browser-plugin-webview/test/webview.test.ts

@@ -0,0 +1,52 @@
+import { addTracker, SharedState, EventStore, BrowserTracker } from '@snowplow/browser-tracker-core';
+import { newInMemoryEventStore } from '@snowplow/tracker-core';
+import { WebViewPlugin } from '../src';
+import { hasMobileInterface } from '../../../../../mirandawilson/snowplow-webview-tracker';
+
+jest.mock('../../../../snowplow-webview-tracker');
+
+describe('WebView plugin', () => {
+  let idx = 1;
+  let eventStore: EventStore;
+  let tracker: BrowserTracker | null;
+
+  let mockHasMobileInterface = hasMobileInterface as jest.Mock<boolean>;
+
+  it('Does not filter events if mobile interface not found', async () => {
+    mockHasMobileInterface.mockImplementation(() => {
+      return false;
+    });
+
+    eventStore = newInMemoryEventStore({});
+    const customFetch = async () => new Response(null, { status: 500 });
+    tracker = addTracker(`sp${idx++}`, `sp${idx++}`, 'js-4.0.0', '', new SharedState(), {
+      plugins: [WebViewPlugin()],
+      eventStore,
+      customFetch,
+    });
+
+    tracker?.trackPageView();
+
+    let events = await eventStore.getAllPayloads();
+    expect(events).toHaveLength(1);
+  });
+
+  it('Filters out the events if a mobile interface is present', async () => {
+    mockHasMobileInterface.mockImplementation(() => {
+      return true;
+    });
+
+    eventStore = newInMemoryEventStore({});
+    const customFetch = async () => new Response(null, { status: 500 });
+    tracker = addTracker(`sp${idx++}`, `sp${idx++}`, 'js-4.0.0', '', new SharedState(), {
+      plugins: [WebViewPlugin()],
+      eventStore,
+      customFetch,
+    });
+
+    tracker?.trackPageView();
+
+    let events = await eventStore.getAllPayloads();
+    expect(events).toHaveLength(0);
+  });
+});

plugins/browser-plugin-webview/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

rush.json

@@ -546,6 +546,12 @@
       "projectFolder": "plugins/browser-plugin-screen-tracking",
       "reviewCategory": "plugins",
       "versionPolicyName": "tracker"
+    },
+    {
+      "packageName": "@snowplow/browser-plugin-webview",
+      "projectFolder": "plugins/browser-plugin-webview",
+      "reviewCategory": "plugins",
+      "versionPolicyName": "tracker"
     }
   ]
 }