@vidinfra/analytics 1.0.0 → 1.1.0

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.
Files changed (2) hide show
  1. package/README.md +94 -41
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,67 +1,120 @@
1
- # Tracker - tenbyteAnalytics
1
+ # Vidinfra Analytics Tracker
2
2
 
3
- This is the web client used to track page and media events of websites for the tenbyte Analytics.
3
+ Web client for tracking page views and media playback events with Vidinfra Analytics.
4
4
 
5
5
  ## Installation
6
6
 
7
- Install the package using npm or yarn:
7
+ ### npm / yarn
8
8
 
9
9
  ```bash
10
- npm i @tenbyte/analytics
11
- or
12
- yarn add @tenbyte/analytics
10
+ npm i @vidinfra/analytics
11
+ # or
12
+ yarn add @vidinfra/analytics
13
13
  ```
14
14
 
15
- ## Usage
15
+ ### CDN / IIFE (Script Tag)
16
16
 
17
- Follow the steps below to use the package.
17
+ Add the following script tag to your HTML. All exports are available under the `TenbyteAnalytics` global.
18
18
 
19
- ### React/Next.js
19
+ ```html
20
+ <!-- Production (minified) -->
21
+ <script src="https://unpkg.com/@vidinfra/analytics/dist/index.global.js"></script>
22
+
23
+ <!-- Development (unminified, with readable source) -->
24
+ <script src="https://unpkg.com/@vidinfra/analytics/dist/index.global.dev.js"></script>
25
+ ```
26
+
27
+ Then use it directly in your page:
28
+
29
+ ```html
30
+ <script>
31
+ TenbyteAnalytics.initTracking({
32
+ trackingUrl: 'https://<organization>.analytics.tenbyte.com/tracking/v1/<project-id>/<platform-id>',
33
+ debugMode: true,
34
+ });
35
+ </script>
36
+ ```
37
+
38
+ To track media players via the IIFE build:
39
+
40
+ ```html
41
+ <video
42
+ id="my-video"
43
+ data-media-id="video-123"
44
+ data-media-type="movies"
45
+ title="My Video"
46
+ src="video.mp4"
47
+ controls
48
+ ></video>
49
+
50
+ <script>
51
+ var player = TenbyteAnalytics.addPlayer(document.getElementById('my-video'));
52
+
53
+ // To stop tracking later:
54
+ // TenbyteAnalytics.removePlayer(player);
55
+ </script>
56
+ ```
57
+
58
+ ## Usage (ES Modules)
59
+
60
+ ### React / Next.js
20
61
 
21
62
  ```typescript
22
63
  // layout.tsx
23
- import { initTracking } from '@tenbyte/analytics';
64
+ import { initTracking } from '@vidinfra/analytics';
24
65
 
25
66
  initTracking({
26
- trackingUrl: 'http://<organization>.analytics.tenbyte.com/tracking/v1/<project-id>/<platform-id>',
27
- debugMode: true,
67
+ trackingUrl: 'https://<organization>.analytics.tenbyte.com/tracking/v1/<project-id>/<platform-id>',
68
+ debugMode: true,
28
69
  });
29
70
  ```
30
71
 
31
- Media tracking is done by adding the following code to the player component:
72
+ ### Media Tracking
32
73
 
33
74
  ```typescript
34
75
  // player.tsx
35
- import { addPlayer, removePlayer } from '@tenbyte/analytics/media';
76
+ import { addPlayer, removePlayer } from '@vidinfra/analytics/media';
36
77
  import { useEffect, useRef } from 'react';
37
78
 
38
79
  export function YourPlayer({ video }: Props) {
39
- const playerRef = useRef(null);
40
-
41
- useEffect(() => {
42
- if (!playerRef.current) return;
43
- const analPlayer = addPlayer(playerRef.current);
44
-
45
- return () => {
46
- removePlayer(analPlayer);
47
- };
48
- }, [playerRef.current]);
49
-
50
- return (
51
- <>
52
- <video
53
- ref={playerRef}
54
- width="800"
55
- height="450"
56
- data-media-id={video.id}
57
- data-media-type="movies"
58
- title={video.title}
59
- src={video.src}
60
- poster={video.poster}
61
- controls
62
- autoPlay
63
- ></video>
64
- </>
65
- );
80
+ const playerRef = useRef(null);
81
+
82
+ useEffect(() => {
83
+ if (!playerRef.current) return;
84
+ const analPlayer = addPlayer(playerRef.current);
85
+
86
+ return () => {
87
+ removePlayer(analPlayer);
88
+ };
89
+ }, [playerRef.current]);
90
+
91
+ return (
92
+ <video
93
+ ref={playerRef}
94
+ width="800"
95
+ height="450"
96
+ data-media-id={video.id}
97
+ data-media-type="movies"
98
+ title={video.title}
99
+ src={video.src}
100
+ poster={video.poster}
101
+ controls
102
+ autoPlay
103
+ ></video>
104
+ );
66
105
  }
67
106
  ```
107
+
108
+ ## Configuration Options
109
+
110
+ | Option | Type | Default | Description |
111
+ | ---------------------- | ---------- | ------- | ------------------------------------------------ |
112
+ | `trackingUrl` | `string` | — | **Required.** Your analytics endpoint URL. |
113
+ | `hashMode` | `boolean` | `false` | Use hash-based routing for page tracking. |
114
+ | `trackPage` | `boolean` | `true` | Enable page view tracking. |
115
+ | `trackMedia` | `boolean` | `true` | Enable media playback tracking. |
116
+ | `autoDiscoverPlayers` | `boolean` | `false` | Auto-detect `<video>` elements on page navigate. |
117
+ | `pageViewDelay` | `number` | `10` | Delay (ms) before recording a page view. |
118
+ | `debugMode` | `boolean` | `false` | Log internal events to the console. |
119
+ | `userGetter` | `function` | — | Callback that returns user info. |
120
+ | `pageMetaGetter` | `function` | — | Callback that returns extra page metadata. |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vidinfra/analytics",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "The web client for Vidinfra Analytics",
5
5
  "type": "module",
6
6
  "exports": {