@amplitude/plugin-page-view-tracking-browser

Official Browser SDK plugin for page view tracking

Installation

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

# npm
npm install @amplitude/plugin-page-view-tracking-browser

# yarn
yarn add @amplitude/plugin-page-view-tracking-browser

Usage

This plugin works on top of Amplitude Browser SDK and adds page view tracking features to built-in features. To use this plugin, you need to install @amplitude/analytics-browser version v2.0.0 or later.

1. Import Amplitude packages

@amplitude/plugin-page-view-tracking-browser

import { pageViewTrackingPlugin } from '@amplitude/plugin-page-view-tracking-browser';

2. Instantiate page view plugin

The plugin accepts an optional parameter of type Object to configure the plugin based on your use case.

const pageViewTracking = pageViewTrackingPlugin({
  trackOn: undefined,
  trackHistoryChanges: undefined,
});

Options

Name	Type	Default	Description
`trackOn`	`"attribution"` or `() => boolean`	`undefined`	Use this option to control when to track a page view event. By default, a page view event is sent on each SDK initialization. Use `() => boolean` to control sending page view events using custom conditional logic. Use `"attribution"` to send page view events with attribution events. This option requires using @amplitude/plugin-web-attribution-browser.
`trackHistoryChanges`	`"all"` or `"pathOnly"`	`undefined`	Use this option to subscribe to page view changes based on full URL or URL path in a single page application like React.js. By default, page view changes are based on full URL. Use `"all"` to compare the full url changes. Use `"pathOnly"` to compare only url path changes.

3. Install plugin to Amplitude SDK

amplitude.add(pageViewTracking);

4. Initialize Amplitude SDK

amplitude.init('API_KEY');

Resulting page view event

This plugin tracks page views based on your configuration. A page view event is composed of the following values:

Event type

"[Amplitude ]Page Viewed"

Event properties

Property	Description
`'[Amplitude] Page Domain'`	The website's hostname or `location.hostname`
`'[Amplitude] Page Location'`	The website's full url or `location.href`
`'[Amplitude] Page Path'`	The website's pathname or `location.pathname`
`'[Amplitude] Page Title'`	The website's title or `document.title`
`'[Amplitude] Page URL'`	The website's url excluding query parameters