@apstal/analytics 1.0.0 โ 1.0.2
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 +35 -29
- package/index.js +20 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,55 +1,61 @@
|
|
|
1
|
-
# apstal
|
|
1
|
+
# @apstal/analytics
|
|
2
2
|
|
|
3
3
|
Official open-source tracking library for [Apstal](https://apstal.com) โ the autonomous conversational AI Web Analyst that helps you find and explain user drop-offs, rage clicks, and conversion leaks in plain language.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
---
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
- โก **Lightweight & Fast**: Extremely minimal overhead, optimized payload sizing.
|
|
9
|
-
- ๐ค **AI-Ready Telemetry**: Collects detailed interaction data (dead clicks, rage clicks, hesitation, and scroll speed) for the AI Analyst.
|
|
10
|
-
- ๐ก๏ธ **PII Redaction**: Automatical scrubbing of emails, cards, SSNs, and passwords before sending.
|
|
7
|
+
## ๐ Quick Start Guide (Step-by-Step)
|
|
11
8
|
|
|
12
|
-
|
|
9
|
+
Follow these steps to integrate Apstal AI Web Analytics into your website:
|
|
13
10
|
|
|
14
|
-
|
|
11
|
+
### Step 1: Sign Up & Log In
|
|
12
|
+
1. Go to [apstal.com/chat](https://apstal.com/chat).
|
|
13
|
+
2. Log in using your Google account or email.
|
|
14
|
+
|
|
15
|
+
### Step 2: Enter Your Website URL
|
|
16
|
+
On the onboarding screen, enter your website's URL (e.g., `yoursite.com`) and click **"Continue"**. Apstal will automatically create your project, detect your website's tech stack, and generate your unique **Project ID** (looks like `xxxx-xxxx-xxxx`).
|
|
17
|
+
|
|
18
|
+
### Step 3: Install the Package
|
|
19
|
+
Run the following command in your website project's root folder:
|
|
15
20
|
|
|
16
21
|
```bash
|
|
17
|
-
npm install apstal
|
|
22
|
+
npm install @apstal/analytics
|
|
18
23
|
```
|
|
19
24
|
|
|
20
|
-
|
|
25
|
+
### Step 4: Initialize Apstal in Your Code
|
|
26
|
+
|
|
27
|
+
#### For Single Page Applications (React, Next.js, Vue, Nuxt)
|
|
28
|
+
Import the initialization function in your main entry file (e.g., `layout.tsx`, `App.js`, or `index.js`) and run it:
|
|
21
29
|
|
|
22
|
-
|
|
30
|
+
```javascript
|
|
31
|
+
import { initApstal } from '@apstal/analytics';
|
|
32
|
+
|
|
33
|
+
// Initialize the tracker
|
|
34
|
+
initApstal('YOUR_PROJECT_ID'); // Replace with the Project ID from Step 2
|
|
35
|
+
```
|
|
23
36
|
|
|
24
|
-
|
|
37
|
+
#### For Classic HTML Pages
|
|
38
|
+
If you are building a static landing page or a WordPress site, add this code block before the closing `</body>` tag of your HTML:
|
|
25
39
|
|
|
26
40
|
```html
|
|
27
41
|
<script
|
|
28
42
|
defer
|
|
29
43
|
data-project="YOUR_PROJECT_ID"
|
|
30
|
-
src="/node_modules/
|
|
44
|
+
src="/node_modules/@apstal/analytics/src/apstal.js">
|
|
31
45
|
</script>
|
|
32
46
|
```
|
|
33
47
|
|
|
34
|
-
###
|
|
48
|
+
### Step 5: Start Talking to Your AI Analyst
|
|
49
|
+
Deploy your website, open a few pages, and click a few buttons. Go back to [apstal.com/chat](https://apstal.com/chat). The system will automatically detect the installation, and you can start asking the AI assistant conversational questions about your visitors' behavior (e.g., *"why did mobile users drop off today?"*).
|
|
35
50
|
|
|
36
|
-
|
|
51
|
+
---
|
|
37
52
|
|
|
38
|
-
|
|
39
|
-
// Import the tracker
|
|
40
|
-
import 'apstal-analytics';
|
|
41
|
-
|
|
42
|
-
// Make sure window configuration is set before import or initialized in script
|
|
43
|
-
window.APSTAL_PROJECT_ID = "YOUR_PROJECT_ID";
|
|
44
|
-
```
|
|
53
|
+
## ๐ก๏ธ Privacy & Compliance
|
|
45
54
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
window.APSTAL_ENDPOINT = "https://your-custom-proxy.com/api/v1/m";
|
|
51
|
-
import 'apstal-analytics';
|
|
52
|
-
```
|
|
55
|
+
Apstal is designed to comply with strict privacy regulations:
|
|
56
|
+
- ๐ต๏ธโโ๏ธ **Cookieless**: No persistent tracking cookies are stored.
|
|
57
|
+
- ๐ช๐บ **GDPR / CCPA Compliant**: Out-of-the-box compliance, no annoying cookie banners required.
|
|
58
|
+
- ๐งผ **PII Scrubbing**: Automatically redacts emails, credit cards, passwords, and tokens before they reach the server.
|
|
53
59
|
|
|
54
60
|
## License
|
|
55
61
|
|
package/index.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Apstal Analytics SDK - ES Module Wrapper
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export function initApstal(projectId, options = {}) {
|
|
6
|
+
if (typeof window === 'undefined') {
|
|
7
|
+
// Prevent errors during SSR (Server-Side Rendering in Next.js/Nuxt)
|
|
8
|
+
return;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// Set configuration globally
|
|
12
|
+
window.APSTAL_PROJECT_ID = projectId;
|
|
13
|
+
|
|
14
|
+
if (options.endpoint) {
|
|
15
|
+
window.APSTAL_ENDPOINT = options.endpoint;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Dynamically load the tracking script logic
|
|
19
|
+
require('./src/apstal.js');
|
|
20
|
+
}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apstal/analytics",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Official tracking library for Apstal โ the conversational AI Web Analyst.",
|
|
5
|
-
"main": "
|
|
5
|
+
"main": "index.js",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
8
|
"url": "git+https://github.com/apstal/analytics.git"
|