Add OTB Button Click Tracking (close #1267)

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": "c272b447631dc0e0be0f52f2e7d1ed6aa6603939",
+  "pnpmShrinkwrapHash": "f80095d04d277d23e686f47612be0d485ceb4726",
   "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f"
 }

libraries/tracker-core/src/core.ts

@@ -851,6 +851,42 @@ export function buildLinkClick(event: LinkClickEvent): PayloadBuilder {
   return buildSelfDescribingEvent({ event: eventJson });
 }
 
+/**
+ * A Button Click event
+ *
+ * Used when a user clicks on a <button> tag on a webpage
+ * <input type="submit"> tags are intentionally not tracked by this event,
+ * as this functionality is provided by the Form Tracking plugin
+ * see: https://docs.snowplow.io/docs/collecting-data/collecting-from-own-applications/javascript-trackers/web-tracker/plugins/form-tracking/
+ */
+export interface ButtonClickEvent {
+  /** The text on the button clicked, or a user-provided override */
+  label: string;
+  /** The ID of the button clicked, if present */
+  id?: string;
+  /** An array of class names from the button clicked */
+  classes?: Array<string>;
+  /** The name of the button, if present */
+  name?: string;
+}
+
+/**
+ * Build a Button Click Event
+ * Used when a user clicks on a <button> tag on a webpage
+ *
+ * @param event - Contains the properties for the Button Click event
+ * @returns PayloadBuilder to be sent to {@link @snowplow/tracker-core#TrackerCore.track}
+ */
+export function buildButtonClick(event: ButtonClickEvent): PayloadBuilder {
+  const { label, id, classes, name } = event;
+  const eventJson = {
+    schema: 'iglu:com.snowplowanalytics.snowplow/button_click/jsonschema/1-0-0',
+    data: removeEmptyProperties({ label, id, classes, name }),
+  };
+
+  return buildSelfDescribingEvent({ event: eventJson });
+}
+
 /**
  * An Ad Impression Event
  * Used to track an advertisement impression

plugins/browser-plugin-button-click-tracking/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2023 Snowplow Analytics Ltd, 2010 Anthon Pang
+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-button-click-tracking/README.md

@@ -0,0 +1,64 @@
+# Snowplow Link Click Tracking
+
+[![npm version][npm-image]][npm-url]
+[![License][license-image]](LICENSE)
+
+Browser Plugin to be used with `@snowplow/browser-tracker`.
+
+Adds link click tracking events to your Snowplow tracking.
+
+## Maintainer quick start
+
+Part of the Snowplow JavaScript Tracker monorepo.  
+Build with [Node.js](https://nodejs.org/en/) ( 14 or 16) 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-link-click-tracking
+```
+
+## Usage
+
+Initialize your tracker with the LinkClickTrackingPlugin:
+
+```js
+import { newTracker } from '@snowplow/browser-tracker';
+import { LinkClickTrackingPlugin } from '@snowplow/browser-plugin-link-click-tracking';
+
+newTracker('sp1', '{{collector}}', { plugins: [ LinkClickTrackingPlugin() ] }); // Also stores reference at module level
+```
+
+Then use the available functions from this package to track to all trackers which have been initialized with this plugin:
+
+```js
+import { enableLinkClickTracking, refreshLinkClickTracking } from '@snowplow/browser-plugin-link-click-tracking';
+
+enableLinkClickTracking({ options: { ... }, psuedoClicks: true });
+
+refreshLinkClickTracking();
+```
+
+## Copyright and license
+
+Licensed and distributed under the [BSD 3-Clause License](LICENSE) ([An OSI Approved License][osi]).
+
+Copyright (c) 2022 Snowplow Analytics Ltd, 2010 Anthon Pang.
+
+All rights reserved.
+
+[npm-url]: https://www.npmjs.com/package/@snowplow/browser-plugin-form-tracking
+[npm-image]: https://img.shields.io/npm/v/@snowplow/browser-plugin-form-tracking
+[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-form-tracking

plugins/browser-plugin-button-click-tracking/jest.config.js

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

plugins/browser-plugin-button-click-tracking/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@snowplow/browser-plugin-button-click-tracking",
+  "version": "3.16.0",
+  "description": "Button Click tracking for Snowplow",
+  "homepage": "http://bit.ly/sp-js",
+  "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",
+  "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"
+  },
+  "devDependencies": {
+    "@ampproject/rollup-plugin-closure-compiler": "~0.27.0",
+    "@rollup/plugin-commonjs": "~21.0.2",
+    "@rollup/plugin-node-resolve": "~13.1.3",
+    "@types/jest": "~27.4.1",
+    "@types/jsdom": "~16.2.14",
+    "@types/lodash": "~4.14.180",
+    "@typescript-eslint/eslint-plugin": "~5.15.0",
+    "@typescript-eslint/parser": "~5.15.0",
+    "eslint": "~8.11.0",
+    "jest": "~27.5.1",
+    "jest-environment-jsdom": "~27.5.1",
+    "jest-environment-jsdom-global": "~3.0.0",
+    "jest-standard-reporter": "~2.0.0",
+    "lodash": "~4.17.21",
+    "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": "~27.1.3",
+    "typescript": "~4.6.2"
+  },
+  "peerDependencies": {
+    "@snowplow/browser-tracker": "~3.16.0"
+  }
+}

plugins/browser-plugin-button-click-tracking/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'; // Prefered 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 = 'snowplowLinkClickTracking';
+
+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 }],
+  },
+];