@webticks/core 0.1.0 → 0.1.1
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 +39 -75
- package/injector.js +1 -5
- package/package.json +4 -1
- package/tracker.js +5 -22
package/README.md
CHANGED
|
@@ -1,98 +1,62 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @webticks/core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Lightweight analytics library for modern web applications.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
function App() {
|
|
11
|
-
return (
|
|
12
|
-
<div>
|
|
13
|
-
<WebTicksAnalytics />
|
|
14
|
-
{/* Your app */}
|
|
15
|
-
</div>
|
|
16
|
-
);
|
|
17
|
-
}
|
|
7
|
+
```bash
|
|
8
|
+
npm install @webticks/core
|
|
18
9
|
```
|
|
19
10
|
|
|
20
|
-
##
|
|
21
|
-
|
|
22
|
-
### Option 1: Express Middleware (Automatic)
|
|
11
|
+
## Quick Start
|
|
23
12
|
|
|
24
13
|
```javascript
|
|
25
|
-
import
|
|
26
|
-
import { createServerMiddleware } from '@webticks/core/server';
|
|
27
|
-
|
|
28
|
-
const app = express();
|
|
29
|
-
|
|
30
|
-
// Automatically track all HTTP requests
|
|
31
|
-
app.use(createServerMiddleware({
|
|
32
|
-
backendUrl: 'https://api.example.com/track'
|
|
33
|
-
}));
|
|
14
|
+
import inject from '@webticks/core';
|
|
34
15
|
|
|
35
|
-
|
|
16
|
+
// Initialize analytics with explicit config
|
|
17
|
+
inject({
|
|
18
|
+
backendUrl: 'https://your-api.com/track',
|
|
19
|
+
appId: 'your-app-id'
|
|
20
|
+
});
|
|
36
21
|
```
|
|
37
22
|
|
|
38
|
-
|
|
23
|
+
## Best Practices: Environment Variables
|
|
39
24
|
|
|
40
|
-
|
|
41
|
-
import { AnalyticsTracker } from '@webticks/core/tracker';
|
|
25
|
+
For security and flexibility, it is **highly recommended** to source your configuration from environment variables rather than hardcoding them in your source code.
|
|
42
26
|
|
|
43
|
-
|
|
44
|
-
|
|
27
|
+
```javascript
|
|
28
|
+
// Example using Vite or other modern bundlers
|
|
29
|
+
inject({
|
|
30
|
+
backendUrl: import.meta.env.VITE_WEBTICKS_BACKEND_URL,
|
|
31
|
+
appId: import.meta.env.VITE_WEBTICKS_APP_ID
|
|
45
32
|
});
|
|
46
33
|
|
|
47
|
-
//
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
query: { page: 1 },
|
|
52
|
-
headers: { 'user-agent': 'Mozilla/5.0' }
|
|
34
|
+
// Example using Node.js / Webpack
|
|
35
|
+
inject({
|
|
36
|
+
backendUrl: process.env.WEBTICKS_BACKEND_URL,
|
|
37
|
+
appId: process.env.WEBTICKS_APP_ID
|
|
53
38
|
});
|
|
39
|
+
```
|
|
54
40
|
|
|
55
|
-
|
|
56
|
-
tracker.trackEvent('database_query', {
|
|
57
|
-
table: 'users',
|
|
58
|
-
duration: 45
|
|
59
|
-
});
|
|
41
|
+
## Exports
|
|
60
42
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
43
|
+
| Export | Description |
|
|
44
|
+
|--------|-------------|
|
|
45
|
+
| `@webticks/core` | Injector function (default) |
|
|
46
|
+
| `@webticks/core/tracker` | `AnalyticsTracker` class for manual tracking |
|
|
64
47
|
|
|
65
|
-
|
|
48
|
+
## API
|
|
66
49
|
|
|
67
|
-
|
|
68
|
-
// pages/api/users.js
|
|
69
|
-
import { AnalyticsTracker } from '@webticks/core/tracker';
|
|
50
|
+
### `inject(config)`
|
|
70
51
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
52
|
+
| Option | Type | Description |
|
|
53
|
+
|--------|------|-------------|
|
|
54
|
+
| `backendUrl` | `string` | Recommended. URL to send analytics data to. Defaults to `/api/track`. |
|
|
55
|
+
| `appId` | `string` | Required. Your application ID. |
|
|
74
56
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
method: req.method,
|
|
78
|
-
path: req.url,
|
|
79
|
-
query: req.query,
|
|
80
|
-
headers: {
|
|
81
|
-
'user-agent': req.headers['user-agent']
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
|
|
85
|
-
// Your API logic here
|
|
86
|
-
const data = await getUsers();
|
|
87
|
-
|
|
88
|
-
res.status(200).json(data);
|
|
89
|
-
}
|
|
90
|
-
```
|
|
57
|
+
> [!NOTE]
|
|
58
|
+
> `appId` and `backendUrl` are typically provided by the [webticks-api](https://github.com/Celerinc/webticks-api.git) project, which you can self-host. Alternatively, you can use any backend that implements the WebTicks ingestion API.
|
|
91
59
|
|
|
92
|
-
##
|
|
60
|
+
## License
|
|
93
61
|
|
|
94
|
-
|
|
95
|
-
✅ **Environment Agnostic**: Works in browser and Node.js
|
|
96
|
-
✅ **Zero Breaking Changes**: Existing packages work without modifications
|
|
97
|
-
✅ **Easy Updates**: Fix bugs once, all environments benefit
|
|
98
|
-
✅ **Flexible**: Works with any framework (Express, Koa, Fastify, serverless, etc.)
|
|
62
|
+
[MPL-2.0](https://github.com/Celerinc/webticks/blob/main/LICENSE)
|
package/injector.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { AnalyticsTracker } from "./tracker.js";
|
|
2
2
|
|
|
3
|
-
export default function inject() {
|
|
3
|
+
export default function inject(config = {}) {
|
|
4
4
|
// Only auto-inject in browser environments
|
|
5
5
|
if (typeof window === 'undefined') {
|
|
6
6
|
console.warn("webticks auto-inject skipped: Not in a browser environment.");
|
|
@@ -12,10 +12,6 @@ export default function inject() {
|
|
|
12
12
|
return;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
const config = {
|
|
16
|
-
backendUrl: "https://api.example.com/track"
|
|
17
|
-
};
|
|
18
|
-
|
|
19
15
|
const tracker = new AnalyticsTracker(config);
|
|
20
16
|
tracker.autoTrackPageViews();
|
|
21
17
|
window.webticks = tracker;
|
package/package.json
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webticks/core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Lightweight analytics library for modern web applications with seamless event tracking and page view monitoring",
|
|
5
5
|
"type": "module",
|
|
6
|
+
"publishConfig": {
|
|
7
|
+
"access": "public"
|
|
8
|
+
},
|
|
6
9
|
"main": "injector.js",
|
|
7
10
|
"module": "injector.js",
|
|
8
11
|
"exports": {
|
package/tracker.js
CHANGED
|
@@ -15,11 +15,10 @@ export class AnalyticsTracker {
|
|
|
15
15
|
* @param {string} config.backendUrl - URL to send analytics data
|
|
16
16
|
* @param {string} [config.appId] - Application ID for tracking (can also be set via WEBTICKS_APP_ID env variable)
|
|
17
17
|
*/
|
|
18
|
-
constructor(config) {
|
|
19
|
-
this.config = config
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
this.appId = this.config.appId || this.getAppIdFromEnv();
|
|
18
|
+
constructor(config = {}) {
|
|
19
|
+
this.config = config;
|
|
20
|
+
this.backendUrl = config.backendUrl || "/api/track";
|
|
21
|
+
this.appId = config.appId || null;
|
|
23
22
|
|
|
24
23
|
/** @type {Event[]} */
|
|
25
24
|
this.eventQueue = [];
|
|
@@ -44,22 +43,6 @@ export class AnalyticsTracker {
|
|
|
44
43
|
console.log(`AnalyticsTracker initialized in ${isServer() ? 'Node.js' : 'Browser'} environment.`);
|
|
45
44
|
}
|
|
46
45
|
|
|
47
|
-
/**
|
|
48
|
-
* Get app ID from environment variable
|
|
49
|
-
* Works in both browser (import.meta.env) and Node.js (process.env)
|
|
50
|
-
*/
|
|
51
|
-
getAppIdFromEnv() {
|
|
52
|
-
// Browser environment (Vite, etc.)
|
|
53
|
-
if (typeof import.meta !== 'undefined' && import.meta.env) {
|
|
54
|
-
return import.meta.env.VITE_WEBTICKS_APP_ID || import.meta.env.WEBTICKS_APP_ID;
|
|
55
|
-
}
|
|
56
|
-
// Node.js environment
|
|
57
|
-
if (typeof process !== 'undefined' && process.env) {
|
|
58
|
-
return process.env.WEBTICKS_APP_ID;
|
|
59
|
-
}
|
|
60
|
-
return null;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
46
|
initializeUser() {
|
|
64
47
|
// Skip if adapter is not available (will be initialized later in server environments)
|
|
65
48
|
if (!this.adapter) {
|
|
@@ -226,7 +209,7 @@ export class AnalyticsTracker {
|
|
|
226
209
|
const eventsToSend = [...this.eventQueue];
|
|
227
210
|
|
|
228
211
|
try {
|
|
229
|
-
const response = await this.adapter.sendRequest(this.
|
|
212
|
+
const response = await this.adapter.sendRequest(this.backendUrl, {
|
|
230
213
|
uid: this.userId,
|
|
231
214
|
sessionId: this.sessionId,
|
|
232
215
|
events: eventsToSend,
|