Skip to content

Commit e1cc3f3

Browse files
daniel-graham-amplitudedaniel-graham-amplitude
committed
feat: stub in frustration browser plugin
1 parent 1c75f46 commit e1cc3f3

File tree

17 files changed

+238
-7
lines changed

17 files changed

+238
-7
lines changed

‎packages/plugin-frustration-browser/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Change Log
2+
3+
All notable changes to this project will be documented in this file.
4+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

‎packages/plugin-frustration-browser/README.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<p align="center">
2+
<a href="https://amplitude.com" target="_blank" align="center">
3+
<img src="https://static.amplitude.com/lightning/46c85bfd91905de8047f1ee65c7c93d6fa9ee6ea/static/media/amplitude-logo-with-text.4fb9e463.svg" width="280">
4+
</a>
5+
<br />
6+
</p>
7+
8+
# @amplitude/plugin-frustration-browser (beta)
9+
**This plugin is in beta at the moment, naming and interface might change in the future.**
10+
11+
This plugin captures frustration analytics events like "Dead Clicks" and "Rage Clicks".
12+
13+
## Installation
14+
15+
This package is not published on NPM registry and is available to be installed using npm and yarn.
16+
17+
```sh
18+
# npm
19+
npm install @amplitude/plugin-frustration-browser@beta
20+
21+
# yarn
22+
yarn add @amplitude/plugin-frustration-browser@beta
23+
```
24+
25+
## Usage
26+
27+
```typescript
28+
import * as amplitude from '@amplitude/analytics-browser';
29+
import { frustrationPlugin } from '@amplitude/plugin-frustration-browser';
30+
```
31+
32+
### 2. Instantiate the plugin
33+
34+
```typescript
35+
const plugin = frustrationPlugin();
36+
```
37+
38+
### 3. Install plugin to Amplitude SDK
39+
40+
```typescript
41+
amplitude.add(plugin);
42+
```
43+
44+
### 4. Initialize Amplitude SDK
45+
46+
```typescript
47+
amplitude.init('API_KEY');
48+
```

‎packages/plugin-frustration-browser/jest.config.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const baseConfig = require('../../jest.config.js');
2+
const package = require('./package');
3+
4+
module.exports = {
5+
...baseConfig,
6+
displayName: package.name,
7+
rootDir: '.',
8+
testEnvironment: 'jsdom',
9+
coveragePathIgnorePatterns: ['index.ts'],
10+
};
11+

‎packages/plugin-frustration-browser/package.json

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"name": "@amplitude/plugin-frustration-browser",
3+
"version": "0.0.1-alpha.1",
4+
"description": "",
5+
"author": "Amplitude Inc",
6+
"homepage": "https://github.com/amplitude/Amplitude-TypeScript",
7+
"license": "MIT",
8+
"main": "lib/cjs/index.js",
9+
"module": "lib/esm/index.js",
10+
"types": "lib/esm/index.d.ts",
11+
"sideEffects": false,
12+
"publishConfig": {
13+
"access": "public",
14+
"tag": "alpha"
15+
},
16+
"repository": {
17+
"type": "git",
18+
"url": "git+https://github.com/amplitude/Amplitude-TypeScript.git"
19+
},
20+
"scripts": {
21+
"build": "yarn bundle && yarn build:es5 && yarn build:esm",
22+
"bundle": "rollup --config rollup.config.js",
23+
"build:es5": "tsc -p ./tsconfig.es5.json",
24+
"build:esm": "tsc -p ./tsconfig.esm.json",
25+
"watch": "tsc -p ./tsconfig.esm.json --watch",
26+
"clean": "rimraf node_modules lib coverage",
27+
"fix": "yarn fix:eslint & yarn fix:prettier",
28+
"fix:eslint": "eslint '{src,test}/**/*.ts' --fix",
29+
"fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
30+
"lint": "yarn lint:eslint & yarn lint:prettier",
31+
"lint:eslint": "eslint '{src,test}/**/*.ts'",
32+
"lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
33+
"test": "jest",
34+
"typecheck": "tsc -p ./tsconfig.json",
35+
"version": "yarn version-file && yarn build",
36+
"version-file": "node -p \"'export const VERSION = \\'' + require('./package.json').version + '\\';'\" > src/version.ts"
37+
},
38+
"bugs": {
39+
"url": "https://github.com/amplitude/Amplitude-TypeScript/issues"
40+
},
41+
"dependencies": {
42+
"@amplitude/analytics-core": "^2.12.0",
43+
"tslib": "^2.4.1"
44+
},
45+
"devDependencies": {
46+
"@amplitude/analytics-browser": "^2.17.6",
47+
"@rollup/plugin-commonjs": "^23.0.4",
48+
"@rollup/plugin-node-resolve": "^15.0.1",
49+
"@rollup/plugin-typescript": "^10.0.1",
50+
"css.escape": "^1.5.1",
51+
"rollup": "^2.79.1",
52+
"rollup-plugin-execute": "^1.1.1",
53+
"rollup-plugin-gzip": "^3.1.0",
54+
"rollup-plugin-terser": "^7.0.2"
55+
},
56+
"files": [
57+
"lib"
58+
]
59+
}

‎packages/plugin-frustration-browser/rollup.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { iife, umd } from '../../scripts/build/rollup.config';
2+
3+
iife.input = umd.input;
4+
iife.output.name = 'amplitudeFrustrationPlugin';
5+
6+
export default [umd, iife];

‎packages/plugin-frustration-browser/src/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const PLUGIN_NAME = 'frustration-browser';

‎packages/plugin-frustration-browser/src/frustration-plugin.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* eslint-disable no-restricted-globals */
2+
import { BrowserClient, BrowserConfig, EnrichmentPlugin } from '@amplitude/analytics-core';
3+
import { PLUGIN_NAME } from './constants';
4+
5+
export type BrowserEnrichmentPlugin = EnrichmentPlugin<BrowserClient, BrowserConfig>;
6+
7+
export const frustrationPlugin = (): BrowserEnrichmentPlugin => {
8+
const setup: BrowserEnrichmentPlugin['setup'] = async (/*config, amplitude*/) => {
9+
// add logic here to setup any resources
10+
};
11+
12+
/* istanbul ignore next */
13+
const execute: BrowserEnrichmentPlugin['execute'] = async (event) => {
14+
return event;
15+
};
16+
17+
const teardown = async () => {
18+
// add logic here to clean up any resources
19+
};
20+
21+
return {
22+
name: PLUGIN_NAME,
23+
type: 'enrichment',
24+
setup,
25+
execute,
26+
teardown,
27+
};
28+
};

‎packages/plugin-frustration-browser/src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { frustrationPlugin as plugin, frustrationPlugin } from './frustration-plugin';
2+
export { VERSION } from './version';

‎packages/plugin-frustration-browser/src/version.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const VERSION = '0.0.1-alpha.1';

‎packages/plugin-frustration-browser/test/index.test.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { frustrationPlugin } from '../src/index';
2+
3+
describe('frustration-browser', () => {
4+
it('should be defined', () => {
5+
expect(frustrationPlugin).toBeDefined();
6+
});
7+
it('should call setup and teardown without errors', async () => {
8+
const plugin = frustrationPlugin();
9+
/* eslint-disable-next-line @typescript-eslint/no-unsafe-argument */
10+
await plugin?.setup?.({} as unknown as any, {} as unknown as any);
11+
await plugin?.teardown?.();
12+
});
13+
});

‎packages/plugin-frustration-browser/tsconfig.es5.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"include": ["src/**/*"],
4+
"compilerOptions": {
5+
"module": "commonjs",
6+
"noEmit": false,
7+
"outDir": "lib/cjs",
8+
"rootDir": "./src"
9+
}
10+
}

‎packages/plugin-frustration-browser/tsconfig.esm.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"include": ["src/**/*"],
4+
"compilerOptions": {
5+
"module": "es6",
6+
"noEmit": false,
7+
"outDir": "lib/esm",
8+
"rootDir": "./src"
9+
}
10+
}

‎packages/plugin-frustration-browser/tsconfig.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"include": ["src/**/*", "test/**/*"],
4+
"compilerOptions": {
5+
"baseUrl": ".",
6+
"esModuleInterop": true,
7+
"lib": ["dom"],
8+
"noEmit": true,
9+
"rootDir": "."
10+
}
11+
}

‎packages/plugin-stub-browser/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<br />
66
</p>
77

8-
# @amplitude/plugin-stub-browser (beta)
9-
**This plugin is in beta at the moment, naming and interface might change in the future.**
8+
# @amplitude/plugin-stub-browser (alpha)
9+
**This plugin is in alpha at the moment, naming and interface might change in the future.**
1010

1111
A stub plugin. Copy and paste this and rename to make a new plugin.
1212

@@ -18,10 +18,10 @@ This package is not published on NPM registry and is available to be installed u
1818

1919
```sh
2020
# npm
21-
npm install @amplitude/plugin-stub-browser@beta
21+
npm install @amplitude/plugin-stub-browser@alpha
2222

2323
# yarn
24-
yarn add @amplitude/plugin-stub-browser@beta
24+
yarn add @amplitude/plugin-stub-browser@alpha
2525
```
2626

2727
## Usage

‎packages/plugin-stub-browser/package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131
"lint": "yarn lint:eslint & yarn lint:prettier",
3232
"lint:eslint": "eslint '{src,test}/**/*.ts'",
3333
"lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
34-
"publish": "node ../../scripts/publish/upload-to-s3.js",
3534
"test": "jest",
3635
"typecheck": "tsc -p ./tsconfig.json",
3736
"version": "yarn version-file && yarn build",
@@ -42,7 +41,6 @@
4241
},
4342
"dependencies": {
4443
"@amplitude/analytics-core": "^2.12.0",
45-
"rxjs": "^7.8.1",
4644
"tslib": "^2.4.1"
4745
},
4846
"devDependencies": {

‎packages/plugin-web-vitals-browser/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040
},
4141
"dependencies": {
4242
"@amplitude/analytics-core": "^2.12.0",
43-
"rxjs": "^7.8.1",
4443
"tslib": "^2.4.1",
4544
"web-vitals": "^5.0.1"
4645
},

‎test-server/autocapture/frustration.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/amplitude.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Frustration Analytics Test</title>
8+
</head>
9+
<body>
10+
<div id="app">
11+
<div>Placeholder to add a Rage Click test</div>
12+
<div>Placeholder to add a Dead Click test</div>
13+
<div>Placeholder to add a non-Dead Click test</div>
14+
</div>
15+
<script type="module">
16+
import * as amplitude from '@amplitude/analytics-browser';
17+
import { frustrationPlugin } from '@amplitude/plugin-frustration-browser';
18+
window.amplitude = amplitude;
19+
amplitude.add(frustrationPlugin());
20+
amplitude.init(
21+
import.meta.env.VITE_AMPLITUDE_API_KEY,
22+
import.meta.env.VITE_AMPLITUDE_USER_ID || 'amplitude-typescript test user',
23+
{
24+
autocapture: {
25+
},
26+
}
27+
);
28+
</script>
29+
</body>
30+
</html>

0 commit comments

Comments
 (0)