@amplitude/plugin-page-view-tracking-browser 0.4.4 → 0.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +83 -0
- package/package.json +5 -5
package/README.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
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-page-view-tracking-browser
|
|
9
|
+
|
|
10
|
+
Official Browser SDK plugin for page view tracking
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
This package is published on NPM registry and is available to be installed using npm and yarn.
|
|
15
|
+
|
|
16
|
+
```sh
|
|
17
|
+
# npm
|
|
18
|
+
npm install @amplitude/plugin-page-view-tracking-browser
|
|
19
|
+
|
|
20
|
+
# yarn
|
|
21
|
+
yarn add @amplitude/plugin-page-view-tracking-browser
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
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 `v1.4.0` or later.
|
|
27
|
+
|
|
28
|
+
### 1. Import Amplitude packages
|
|
29
|
+
|
|
30
|
+
* `@amplitude/analytics-browser`
|
|
31
|
+
* `@amplitude/plugin-page-view-tracking-browser`
|
|
32
|
+
|
|
33
|
+
```typescript
|
|
34
|
+
import * as amplitude from '@amplitude/analytics-browser';
|
|
35
|
+
import { pageViewTrackingPlugin } from '@amplitude/plugin-page-view-tracking-browser';
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### 2. Instantiate page view plugin
|
|
39
|
+
|
|
40
|
+
The plugin requires 1 parameter, which is the `amplitude` instance. The plugin also accepts an optional second parameter, which is an `Object` to configure the plugin based on your use case.
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
const pageViewTracking = pageViewTrackingPlugin(amplitude, {
|
|
44
|
+
trackOn: undefined,
|
|
45
|
+
trackHistoryChanges: undefined,
|
|
46
|
+
});
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
#### Options
|
|
50
|
+
|
|
51
|
+
|Name|Type|Default|Description|
|
|
52
|
+
|-|-|-|-|
|
|
53
|
+
|`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.<br/><br/>Use `() => boolean` to control sending page view events using custom conditional logic.<br/><br/>Use `"attribution"` to send page view events with attribution events. This option requires using [@amplitude/plugin-web-attribution-browser](https://github.com/amplitude/Amplitude-TypeScript/tree/main/packages/plugin-web-attribution-browser).|
|
|
54
|
+
|`trackHistoryChanges`|`"all"` or `"pathOnly"`|`undefined`|Use this option to subscribe to page view changes in a single page application like React.js. By default, page view changes in single page applications does not trigger a page view event.<br/><br/>Use `"all"` to compare the full url changes.<br/><br/>Use `"pathOnly"` to compare only url path changes.|
|
|
55
|
+
|
|
56
|
+
### 3. Install plugin to Amplitude SDK
|
|
57
|
+
|
|
58
|
+
```typescript
|
|
59
|
+
amplitude.add(pageViewTracking);
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### 4. Initialize Amplitude SDK
|
|
63
|
+
|
|
64
|
+
```typescript
|
|
65
|
+
amplitude.init('API_KEY');
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Resulting page view event
|
|
69
|
+
|
|
70
|
+
This plugin tracks page views based on your configuration. A page view event is composed of the following values:
|
|
71
|
+
|
|
72
|
+
#### Event type
|
|
73
|
+
* `"Page View"`
|
|
74
|
+
|
|
75
|
+
#### Event properties
|
|
76
|
+
|
|
77
|
+
|Property|Description|
|
|
78
|
+
|-|-|
|
|
79
|
+
|`page_domain`|The website's hostname or `location.hostname`|
|
|
80
|
+
|`page_location`|The website's full url or `location.href`|
|
|
81
|
+
|`page_path`|The website's pathname or `location.pathname`|
|
|
82
|
+
|`page_title`|The website's title or `document.title`|
|
|
83
|
+
|`page_url`|The website's url excluding query parameters|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@amplitude/plugin-page-view-tracking-browser",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.6",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Amplitude Inc",
|
|
6
6
|
"homepage": "https://github.com/amplitude/Amplitude-TypeScript",
|
|
@@ -36,12 +36,12 @@
|
|
|
36
36
|
"url": "https://github.com/amplitude/Amplitude-TypeScript/issues"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@amplitude/analytics-client-common": "^0.3.
|
|
40
|
-
"@amplitude/analytics-types": "^0.
|
|
39
|
+
"@amplitude/analytics-client-common": "^0.3.5",
|
|
40
|
+
"@amplitude/analytics-types": "^0.12.0",
|
|
41
41
|
"tslib": "^2.3.1"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@amplitude/analytics-browser": "^1.
|
|
44
|
+
"@amplitude/analytics-browser": "^1.6.0",
|
|
45
45
|
"@rollup/plugin-commonjs": "^21.0.2",
|
|
46
46
|
"@rollup/plugin-node-resolve": "^13.1.3",
|
|
47
47
|
"@rollup/plugin-typescript": "^8.3.1",
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"files": [
|
|
54
54
|
"lib"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "f5f195e30233dbd1a4c60f55d04c7d36b888080e"
|
|
57
57
|
}
|