@amplitude/plugin-network-capture-browser

@amplitude/plugin-network-capture-browser (beta)

This plugin is in beta at the moment, naming and interface might change in the future.

TODO: Re-write this README.md to match plugin-network-capture

Browser SDK plugin for autocapture.

Installation

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

# npm
npm install @amplitude/plugin-network-capture-browser@beta

# yarn
yarn add @amplitude/plugin-network-capture-browser@beta

Usage

This plugin works on top of the Amplitude Browser SDK, generating auto-tracked events and sending to Amplitude.

To use this plugin, you need to install @amplitude/analytics-browser version v1.9.1 or later.

1. Import Amplitude packages

• @amplitude/analytics-browser
• @amplitude/plugin-network-capture-browser

import * as amplitude from '@amplitude/analytics-browser';
import { autocapturePlugin } from '@amplitude/plugin-network-capture-browser';

2. Instantiate the plugin

The plugin accepts 1 optional parameter, which is an Object to configure the allowed tracking options.

const plugin = autocapturePlugin({
  cssSelectorAllowlist: [
    '.amp-tracking',
    '[amp-tracking]'
  ],
  pageUrlAllowlist: [
    'https://amplitude.com',
    new RegExp('https://amplitude.com/blog/*')
  ],
});

Examples:

• The above cssSelectorAllowlist will only allow tracking elements like:
  • <button amp-tracking>Click</button>
  • <a class="amp-tracking">Link</a>
• The above pageUrlAllowlist will only allow the elements on URL "https://amplitude.com" or any URL matching the "https://amplitude.com/blog/*" to be tracked

Options

Name	Type	Default	Description
cssSelectorAllowlist	string[]	['a', 'button', 'input', 'select', 'textarea', 'label', '[data-amp-default-track]', '.amp-default-track']	When provided, only allow elements matching any selector to be tracked.
pageUrlAllowlist	(string|RegExp)[]	undefined	When provided, only allow elements matching URLs to be tracked.
shouldTrackEventResolver	(actionType: ActionType, element: Element) => boolean	undefined	When provided, overwrite all other allowlists and configurations.
dataAttributePrefix	string	'data-amp-track-'	Allow data attributes to be collected in event property.

3. Install plugin to Amplitude SDK

amplitude.add(plugin);

4. Initialize Amplitude SDK

amplitude.init('API_KEY');