# @amplitude/plugin-user-agent-enrichment-browser

Latest version **1.0.1** (published 2023-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @amplitude/plugin-user-agent-enrichment-browser
pnpm add @amplitude/plugin-user-agent-enrichment-browser
yarn add @amplitude/plugin-user-agent-enrichment-browser
bun add @amplitude/plugin-user-agent-enrichment-browser
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-08-09 |
| First published | 2023-07-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 75 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 180 |
| Author | Amplitude Inc |
| Maintainers | alec.amplitude, amplicynthia, mae.capozzi, sdk.dev, dnshi, kevinpagtakhan, justin-fiedler, qingzhuo, rctbusk, jackmccloy, amp_haoliu, myztiq, curtisbliu, jtran, kelvin-lu, nutwani, hao.yu, kelson.warner, ajhorst_amp, brian.giori |

## Links

- npm: https://www.npmjs.com/package/@amplitude/plugin-user-agent-enrichment-browser
- Repository: https://github.com/amplitude/Amplitude-TypeScript
- Issues: https://github.com/amplitude/Amplitude-TypeScript/issues
- npm.io page: https://npm.io/package/@amplitude/plugin-user-agent-enrichment-browser

## Dependencies (4)

- [tslib](https://npm.io/package/tslib.md) ^2.4.1
- [@amplitude/ua-parser-js](https://npm.io/package/@amplitude/ua-parser-js.md) ^0.7.33
- [@amplitude/analytics-types](https://npm.io/package/@amplitude/analytics-types.md) ^2.1.1
- [@amplitude/analytics-client-common](https://npm.io/package/@amplitude/analytics-client-common.md) ^2.0.4

## Recent versions

- 1.0.1 (latest) — 2023-08-09
- 1.0.0-beta.1 (v1-beta) — 2023-07-31
- 1.0.0 — 2023-07-31
- 0.1.0 — 2023-07-26

## README

<p align="center">
  <a href="https://amplitude.com" target="_blank" align="center">
    <img src="https://static.amplitude.com/lightning/46c85bfd91905de8047f1ee65c7c93d6fa9ee6ea/static/media/amplitude-logo-with-text.4fb9e463.svg" width="280">
  </a>
  <br />
</p>

# @amplitude/plugin-user-agent-enrichment-browser

Official Browser SDK plugin for user agent enrichment.

## Installation

This package is published on NPM registry and is available to be installed using npm and yarn.

```sh
# npm
npm install @amplitude/plugin-user-agent-enrichment-browser@^1.0.0

# yarn
yarn add @amplitude/plugin-user-agent-enrichment-browser@^1.0.0
```

## Usage

This plugin works on top of the Amplitude Browser SDK. It's used for enriching events with user agent information using the @amplitude/ua-parser-js. The user agent identifies the application, operating system, vendor, and/or version of the requesting client.
For Browser SDK v1.x, we use @amplitude/ua-parser-js internally to parse the user agent information. In Browser v2.x, we have removed this client-side user agent parser and have instead implemented server-side user agent parser. You can use this plugin to maintain consistency with the user agent information from earlier SDK versions.

### 1. Import Amplitude packages

* `@amplitude/analytics-browser`
* `@amplitude/plugin-user-agent-enrichment-browser`

```typescript
import * as amplitude from '@amplitude/analytics-browser';
import { userAgentEnrichmentPlugin } from '@amplitude/plugin-user-agent-enrichment-browser';
```

### 2. Instantiate user agent enrichment plugin

The plugin accepts 1 optional parameter, which is an `Object` to disable/enable the corresponding tracking options. Each option is enabled by default.

```typescript
const uaPlugin = userAgentEnrichmentPlugin({
  osName: true,
  osVersion: true,
  deviceManufacturer: false,
  deviceModel: false,
});
```

#### Options

|Name|Type|Default|Description|
|-|-|-|-|
|`osName`|`boolean`|`true`| Enables enrichment of `os_name` property. |
|`osVersion`|`boolean`|`true`| Enables enrichment of `os_version` property. |
|`deviceManufacturer`|`boolean`|`true`| Enables enrichment of `device_manufacturer` property. |
|`deviceModel`|`boolean`|`true`| Enables enrichment of `device_model` property. |

### 3. Install plugin to Amplitude SDK

```typescript
amplitude.add(uaPlugin);
```

### 4. Initialize Amplitude SDK

```typescript
amplitude.init('API_KEY');
```

## Resulting page view event

This plugin parses user agent information using @amplitude/ua-parser-js and enriches events based on your configuration. This affects the value of the following properties: `device_family`, `device_model`, `device_manufacturer`, `device_type`, `os`, `os_name`, and `os_version`.

---
_Source: https://npm.io/package/@amplitude/plugin-user-agent-enrichment-browser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._