\n\n# @amplitude/plugin-user-agent-enrichment-browser\n\nOfficial Browser SDK plugin for user agent enrichment.\n\n## Installation\n\nThis package is published on NPM registry and is available to be installed using npm and yarn.\n\n```sh\n# npm\nnpm install @amplitude/plugin-user-agent-enrichment-browser@^1.0.0\n\n# yarn\nyarn add @amplitude/plugin-user-agent-enrichment-browser@^1.0.0\n```\n\n## Usage\n\nThis 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.\nFor 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.\n\n### 1. Import Amplitude packages\n\n* `@amplitude/analytics-browser`\n* `@amplitude/plugin-user-agent-enrichment-browser`\n\n```typescript\nimport * as amplitude from '@amplitude/analytics-browser';\nimport { userAgentEnrichmentPlugin } from '@amplitude/plugin-user-agent-enrichment-browser';\n```\n\n### 2. Instantiate user agent enrichment plugin\n\nThe plugin accepts 1 optional parameter, which is an `Object` to disable/enable the corresponding tracking options. Each option is enabled by default.\n\n```typescript\nconst uaPlugin = userAgentEnrichmentPlugin({\n osName: true,\n osVersion: true,\n deviceManufacturer: false,\n deviceModel: false,\n});\n```\n\n#### Options\n\n|Name|Type|Default|Description|\n|-|-|-|-|\n|`osName`|`boolean`|`true`| Enables enrichment of `os_name` property. |\n|`osVersion`|`boolean`|`true`| Enables enrichment of `os_version` property. |\n|`deviceManufacturer`|`boolean`|`true`| Enables enrichment of `device_manufacturer` property. |\n|`deviceModel`|`boolean`|`true`| Enables enrichment of `device_model` property. |\n\n### 3. Install plugin to Amplitude SDK\n\n```typescript\namplitude.add(uaPlugin);\n```\n\n### 4. Initialize Amplitude SDK\n\n```typescript\namplitude.init('API_KEY');\n```\n\n## Resulting page view event\n\nThis 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`.","gitHead":"d7c22fca2eda201f427d6a730abb5e82fb7e66dc","scripts":{"fix":"yarn fix:eslint & yarn fix:prettier","lint":"yarn lint:eslint & yarn lint:prettier","test":"jest","build":"yarn bundle && yarn build:es5 && yarn build:esm","clean":"rimraf node_modules lib coverage","bundle":"rollup --config rollup.config.js","build:es5":"tsc -p ./tsconfig.es5.json","build:esm":"tsc -p ./tsconfig.esm.json","typecheck":"tsc -p ./tsconfig.json","fix:eslint":"eslint '{src,test}/**/*.ts' --fix","lint:eslint":"eslint '{src,test}/**/*.ts'","fix:prettier":"prettier --write \"{src,test}/**/*.ts\"","lint:prettier":"prettier --check \"{src,test}/**/*.ts\""},"_npmUser":{"name":"sdk.dev","email":"sdk.dev@amplitude.com"},"repository":{"url":"git+https://github.com/amplitude/Amplitude-TypeScript.git","type":"git"},"_npmVersion":"lerna/6.1.0/node@v16.20.1+x64 (linux)","description":"
\n\n# @amplitude/plugin-user-agent-enrichment-browser\n\nOfficial Browser SDK plugin for user agent enrichment.\n\n## Installation\n\nThis package is published on NPM registry and is available to be installed using npm and yarn.\n\n```sh\n# npm\nnpm install @amplitude/plugin-user-agent-enrichment-browser@^1.0.0\n\n# yarn\nyarn add @amplitude/plugin-user-agent-enrichment-browser@^1.0.0\n```\n\n## Usage\n\nThis 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.\nFor 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.\n\n### 1. Import Amplitude packages\n\n* `@amplitude/analytics-browser`\n* `@amplitude/plugin-user-agent-enrichment-browser`\n\n```typescript\nimport * as amplitude from '@amplitude/analytics-browser';\nimport { userAgentEnrichmentPlugin } from '@amplitude/plugin-user-agent-enrichment-browser';\n```\n\n### 2. Instantiate user agent enrichment plugin\n\nThe plugin accepts 1 optional parameter, which is an `Object` to disable/enable the corresponding tracking options. Each option is enabled by default.\n\n```typescript\nconst uaPlugin = userAgentEnrichmentPlugin({\n osName: true,\n osVersion: true,\n deviceManufacturer: false,\n deviceModel: false,\n});\n```\n\n#### Options\n\n|Name|Type|Default|Description|\n|-|-|-|-|\n|`osName`|`boolean`|`true`| Enables enrichment of `os_name` property. |\n|`osVersion`|`boolean`|`true`| Enables enrichment of `os_version` property. |\n|`deviceManufacturer`|`boolean`|`true`| Enables enrichment of `device_manufacturer` property. |\n|`deviceModel`|`boolean`|`true`| Enables enrichment of `device_model` property. |\n\n### 3. Install plugin to Amplitude SDK\n\n```typescript\namplitude.add(uaPlugin);\n```\n\n### 4. Initialize Amplitude SDK\n\n```typescript\namplitude.init('API_KEY');\n```\n\n## Resulting page view event\n\nThis 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`.","readmeFilename":"README.md"}
![](\"https://static.amplitude.com/lightning/46c85bfd91905de8047f1ee65c7c93d6fa9ee6ea/static/media/amplitude-logo-with-text.4fb9e463.svg\"){kind=logo}