@adv-re/segment-wrapper 4.36.0-beta.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.
- package/README.md +240 -0
- package/dist/index.d.mts +916 -0
- package/dist/index.d.ts +916 -0
- package/dist/index.js +1145 -0
- package/dist/index.mjs +1085 -0
- package/package.json +61 -0
package/README.md
ADDED
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
# @adv-re/segment-wrapper
|
|
2
|
+
|
|
3
|
+
Modern TypeScript abstraction layer on top of the Segment Analytics library with built-in support for Google Analytics 4, Adobe Analytics, TCF compliance, and consent management.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- โจ **TypeScript Support** - Full type safety and IntelliSense
|
|
8
|
+
- ๐ **TCF/GDPR Compliance** - Built-in Transparency & Consent Framework support
|
|
9
|
+
- ๐ **Google Analytics 4** - Native GA4 integration with consent mode
|
|
10
|
+
- ๐ฏ **Adobe Analytics** - Adobe Visitor API integration
|
|
11
|
+
- ๐ **Middleware System** - Extensible source and destination middlewares
|
|
12
|
+
- ๐ **Universal ID** - User identification across domains
|
|
13
|
+
- ๐ฆ **Multiple Formats** - ESM, CommonJS, and UMD builds
|
|
14
|
+
- ๐งช **Well Tested** - 203 tests with 80%+ coverage
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @adv-re/segment-wrapper
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Quick Start
|
|
23
|
+
|
|
24
|
+
### Basic Usage (ESM/TypeScript)
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
import analytics from '@adv-re/segment-wrapper'
|
|
28
|
+
import {initConfig} from '@adv-re/segment-wrapper'
|
|
29
|
+
|
|
30
|
+
// Initialize configuration
|
|
31
|
+
initConfig({
|
|
32
|
+
segmentKey: 'your-segment-write-key',
|
|
33
|
+
googleAnalyticsMeasurementId: 'G-XXXXXXXXXX',
|
|
34
|
+
googleAnalyticsConsentManagement: true
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
// Track events
|
|
38
|
+
await analytics.track('Button Clicked', {
|
|
39
|
+
buttonName: 'Sign Up',
|
|
40
|
+
location: 'Homepage'
|
|
41
|
+
})
|
|
42
|
+
|
|
43
|
+
// Track page views
|
|
44
|
+
await analytics.page('Homepage', {
|
|
45
|
+
title: 'Welcome to Our Site'
|
|
46
|
+
})
|
|
47
|
+
|
|
48
|
+
// Identify users
|
|
49
|
+
await analytics.identify('user-123', {
|
|
50
|
+
email: 'user@example.com',
|
|
51
|
+
plan: 'premium'
|
|
52
|
+
})
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### UMD Usage (Browser)
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<script src="https://cdn.segment.com/analytics.js/v1/YOUR_WRITE_KEY/analytics.min.js"></script>
|
|
59
|
+
<script src="/path/to/umd/index.global.js"></script>
|
|
60
|
+
|
|
61
|
+
<script>
|
|
62
|
+
// Access via window.sui.analytics
|
|
63
|
+
window.sui.analytics.track('Page Viewed', {
|
|
64
|
+
page: 'home'
|
|
65
|
+
})
|
|
66
|
+
</script>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Configuration
|
|
70
|
+
|
|
71
|
+
```typescript
|
|
72
|
+
import {initConfig} from '@adv-re/segment-wrapper'
|
|
73
|
+
|
|
74
|
+
initConfig({
|
|
75
|
+
// Segment
|
|
76
|
+
segmentKey: 'your-segment-write-key',
|
|
77
|
+
|
|
78
|
+
// Google Analytics 4
|
|
79
|
+
googleAnalyticsMeasurementId: 'G-XXXXXXXXXX',
|
|
80
|
+
googleAnalyticsConsentManagement: true,
|
|
81
|
+
googleAnalyticsConfig: {
|
|
82
|
+
// Custom GA4 config
|
|
83
|
+
},
|
|
84
|
+
|
|
85
|
+
// Adobe Analytics
|
|
86
|
+
adobeVisitorId: 'YOUR_ADOBE_ORG_ID@AdobeOrg',
|
|
87
|
+
|
|
88
|
+
// TCF/GDPR
|
|
89
|
+
enableTcf: true,
|
|
90
|
+
|
|
91
|
+
// Universal ID
|
|
92
|
+
universalId: 'user-universal-id',
|
|
93
|
+
userEmail: 'user@example.com',
|
|
94
|
+
|
|
95
|
+
// Middlewares
|
|
96
|
+
experimentalPageDataMiddleware: false,
|
|
97
|
+
|
|
98
|
+
// Other
|
|
99
|
+
defaultProperties: {
|
|
100
|
+
platform: 'web',
|
|
101
|
+
app: 'my-app'
|
|
102
|
+
},
|
|
103
|
+
userIdPrefix: 'usr_'
|
|
104
|
+
})
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
See [Configuration Guide](./docs/configuration.md) for all available options.
|
|
108
|
+
|
|
109
|
+
## API Reference
|
|
110
|
+
|
|
111
|
+
### Core Methods
|
|
112
|
+
|
|
113
|
+
- `analytics.track(event, properties?, context?, callback?)` - Track custom events
|
|
114
|
+
- `analytics.page(name?, properties?, context?, callback?)` - Track page views
|
|
115
|
+
- `analytics.identify(userId, traits?, options?, callback?)` - Identify users
|
|
116
|
+
- `analytics.reset()` - Reset user identification
|
|
117
|
+
|
|
118
|
+
### Utilities
|
|
119
|
+
|
|
120
|
+
- `getConfig(key)` - Get configuration value
|
|
121
|
+
- `setConfig(key, value)` - Set configuration value
|
|
122
|
+
- `clearConfig()` - Clear all configuration
|
|
123
|
+
- `getUniversalId()` - Get current Universal ID
|
|
124
|
+
- `getAdobeMCVisitorID()` - Get Adobe Marketing Cloud Visitor ID
|
|
125
|
+
- `getAdobeVisitorData()` - Get Adobe Visitor API data
|
|
126
|
+
|
|
127
|
+
See [API Reference](./docs/api-reference.md) for detailed documentation.
|
|
128
|
+
|
|
129
|
+
## Advanced Features
|
|
130
|
+
|
|
131
|
+
### Middleware System
|
|
132
|
+
|
|
133
|
+
The segment-wrapper includes a powerful middleware system that allows you to modify tracking data before it's sent:
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
// Middlewares are automatically registered on initialization
|
|
137
|
+
// They enrich events with:
|
|
138
|
+
// - User traits (anonymous ID, user ID)
|
|
139
|
+
// - Campaign context (UTM parameters, STC tracking)
|
|
140
|
+
// - Page referrer information
|
|
141
|
+
// - Screen dimensions
|
|
142
|
+
// - Default context properties
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
See [Middleware Documentation](./docs/middlewares.md) for more details.
|
|
146
|
+
|
|
147
|
+
### TCF/GDPR Compliance
|
|
148
|
+
|
|
149
|
+
Built-in support for Transparency & Consent Framework (TCF) v2:
|
|
150
|
+
|
|
151
|
+
```typescript
|
|
152
|
+
import {getGdprPrivacyValue, checkAnalyticsGdprIsAccepted} from '@adv-re/segment-wrapper'
|
|
153
|
+
|
|
154
|
+
// Get current GDPR consent state
|
|
155
|
+
const gdprValue = await getGdprPrivacyValue()
|
|
156
|
+
// { analytics: 'accepted', advertising: 'declined' }
|
|
157
|
+
|
|
158
|
+
// Check if analytics tracking is allowed
|
|
159
|
+
const canTrack = checkAnalyticsGdprIsAccepted(gdprValue)
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
Events are automatically blocked or modified based on user consent.
|
|
163
|
+
|
|
164
|
+
See [TCF Documentation](./docs/tcf-compliance.md) for more details.
|
|
165
|
+
|
|
166
|
+
### Google Analytics 4 Integration
|
|
167
|
+
|
|
168
|
+
Native GA4 integration with automatic consent mode:
|
|
169
|
+
|
|
170
|
+
```typescript
|
|
171
|
+
initConfig({
|
|
172
|
+
googleAnalyticsMeasurementId: 'G-XXXXXXXXXX',
|
|
173
|
+
googleAnalyticsConsentManagement: true,
|
|
174
|
+
googleAnalyticsConfig: {
|
|
175
|
+
send_page_view: false,
|
|
176
|
+
// Additional GA4 config options
|
|
177
|
+
}
|
|
178
|
+
})
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
Features:
|
|
182
|
+
- Automatic consent mode updates based on TCF
|
|
183
|
+
- Session and client ID tracking
|
|
184
|
+
- Campaign parameter forwarding
|
|
185
|
+
- Custom event tracking
|
|
186
|
+
|
|
187
|
+
## Migration from @s-ui/segment-wrapper
|
|
188
|
+
|
|
189
|
+
See [Migration Guide](./docs/migration-guide.md) for step-by-step instructions on migrating from the legacy `@s-ui/segment-wrapper` package.
|
|
190
|
+
|
|
191
|
+
Key changes:
|
|
192
|
+
- Package name: `@s-ui/segment-wrapper` โ `@adv-re/segment-wrapper`
|
|
193
|
+
- Full TypeScript support with type definitions
|
|
194
|
+
- Modern build system (tsup instead of sui-bundler)
|
|
195
|
+
- Improved tree-shaking and bundle size
|
|
196
|
+
|
|
197
|
+
## Browser Support
|
|
198
|
+
|
|
199
|
+
- Chrome/Edge (last 2 versions)
|
|
200
|
+
- Firefox (last 2 versions)
|
|
201
|
+
- Safari (last 2 versions)
|
|
202
|
+
- iOS Safari (last 2 versions)
|
|
203
|
+
|
|
204
|
+
## Bundle Size
|
|
205
|
+
|
|
206
|
+
- ESM: ~34KB (minified)
|
|
207
|
+
- CommonJS: ~36KB (minified)
|
|
208
|
+
- UMD: ~15KB (minified)
|
|
209
|
+
|
|
210
|
+
## Development
|
|
211
|
+
|
|
212
|
+
```bash
|
|
213
|
+
# Install dependencies
|
|
214
|
+
npm install
|
|
215
|
+
|
|
216
|
+
# Run tests
|
|
217
|
+
npm test
|
|
218
|
+
|
|
219
|
+
# Build
|
|
220
|
+
npm run build
|
|
221
|
+
|
|
222
|
+
# Build UMD bundle
|
|
223
|
+
npm run build:umd
|
|
224
|
+
|
|
225
|
+
# Lint
|
|
226
|
+
npm run lint
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
## Documentation
|
|
230
|
+
|
|
231
|
+
- [Configuration Guide](./docs/configuration.md)
|
|
232
|
+
- [API Reference](./docs/api-reference.md)
|
|
233
|
+
- [Middleware System](./docs/middlewares.md)
|
|
234
|
+
- [TCF Compliance](./docs/tcf-compliance.md)
|
|
235
|
+
- [Migration Guide](./docs/migration-guide.md)
|
|
236
|
+
- [Examples](./docs/examples.md)
|
|
237
|
+
|
|
238
|
+
## License
|
|
239
|
+
|
|
240
|
+
ISC
|