@streamscloud/streams-analytics-collector 2.0.10 → 3.0.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/dist/analytics-collector.d.ts +24 -0
- package/dist/analytics-collector.js +51 -0
- package/dist/{analytics/app-events-tracker.d.ts → app-events-tracker.d.ts} +37 -0
- package/dist/appearance-events-tracker.d.ts +14 -0
- package/dist/appearance-events-tracker.js +26 -0
- package/dist/contained-entity-measurements-tracker.d.ts +15 -0
- package/dist/contained-entity-measurements-tracker.js +78 -0
- package/dist/events-reporter.d.ts +14 -0
- package/dist/events-reporter.js +27 -0
- package/dist/gql-data-sender.d.ts +16 -0
- package/dist/gql-data-sender.js +38 -0
- package/dist/graphql/report-event.graphql.js +3 -0
- package/dist/graphql/report-external-event.graphql.js +3 -0
- package/dist/graphql/report-external-measurement.graphql.js +3 -0
- package/dist/graphql/report-measurement.graphql.js +3 -0
- package/dist/index.d.ts +6 -2
- package/dist/index.js +6 -4
- package/dist/measurements-batcher.d.ts +23 -0
- package/dist/measurements-batcher.js +90 -0
- package/dist/measurements-reporter.d.ts +15 -0
- package/dist/measurements-reporter.js +28 -0
- package/dist/report-event.graphql.js +3 -0
- package/dist/report-external-event.graphql.js +3 -0
- package/dist/report-external-measurement.graphql.js +3 -0
- package/dist/report-measurement.graphql.js +3 -0
- package/dist/reporting/events-reporter.d.ts +14 -0
- package/dist/reporting/events-reporter.js +30 -0
- package/dist/reporting/gql-data-sender.d.ts +12 -0
- package/dist/reporting/gql-data-sender.js +35 -0
- package/dist/reporting/index.d.ts +4 -0
- package/dist/reporting/measurements-reporter.d.ts +15 -0
- package/dist/reporting/measurements-reporter.js +31 -0
- package/dist/reporting/report-event.graphql.js +3 -0
- package/dist/reporting/report-external-event.graphql.js +3 -0
- package/dist/reporting/report-external-measurement.graphql.js +3 -0
- package/dist/reporting/report-measurement.graphql.js +3 -0
- package/dist/reporting/types.d.ts +54 -0
- package/dist/reporting/types.js +35 -0
- package/dist/schemas.d.ts +5 -0
- package/dist/schemas.js +17 -0
- package/dist/types.d.ts +0 -4
- package/dist/types.js +38 -0
- package/dist/viewport-visibility-tracker.d.ts +13 -0
- package/dist/viewport-visibility-tracker.js +104 -0
- package/package.json +5 -6
- package/dist/adcampaignsquery.graphql.js +0 -3
- package/dist/analytics/ViewportVisibilityTracker.d.ts +0 -46
- package/dist/analytics/ViewportVisibilityTracker.js +0 -117
- package/dist/analytics/app-events-tracker.js +0 -430
- package/dist/analytics/index.d.ts +0 -3
- package/dist/analytics/index.js +0 -3
- package/dist/analytics/types.d.ts +0 -37
- package/dist/analytics/types.js +0 -33
- package/dist/analytics.graphql.js +0 -3
- package/dist/articlequery.graphql.js +0 -3
- package/dist/components/index.d.ts +0 -2
- package/dist/components/index.js +0 -1
- package/dist/components/types.d.ts +0 -19
- package/dist/components/types.js +0 -12
- package/dist/components-data/component-data-provider.service.d.ts +0 -3
- package/dist/components-data/component-data-provider.service.js +0 -35
- package/dist/components-data/components-data-fetcher.service.d.ts +0 -5
- package/dist/components-data/components-data-fetcher.service.js +0 -35
- package/dist/components-data/components-data-parameters-reader.service.d.ts +0 -2
- package/dist/components-data/components-data-parameters-reader.service.js +0 -20
- package/dist/components-data/index.d.ts +0 -4
- package/dist/components-data/index.js +0 -3
- package/dist/components-data/types.d.ts +0 -24
- package/dist/components-data/types.js +0 -6
- package/dist/contentlistsquery.graphql.js +0 -3
- package/dist/data-loaders/index.d.ts +0 -2
- package/dist/data-loaders/index.js +0 -2
- package/dist/data-loaders/short-videos-data-loader/index.d.ts +0 -2
- package/dist/data-loaders/short-videos-data-loader/loader.d.ts +0 -4
- package/dist/data-loaders/short-videos-data-loader/loader.js +0 -14
- package/dist/data-loaders/short-videos-data-loader/mapper.d.ts +0 -3
- package/dist/data-loaders/short-videos-data-loader/mapper.js +0 -27
- package/dist/data-loaders/short-videos-data-loader/types.d.ts +0 -14
- package/dist/data-loaders/streams-data-loader/index.d.ts +0 -2
- package/dist/data-loaders/streams-data-loader/loader.d.ts +0 -4
- package/dist/data-loaders/streams-data-loader/loader.js +0 -14
- package/dist/data-loaders/streams-data-loader/mapper.d.ts +0 -3
- package/dist/data-loaders/streams-data-loader/mapper.js +0 -11
- package/dist/data-loaders/streams-data-loader/types.d.ts +0 -4
- package/dist/data-loaders/types.d.ts +0 -3
- package/dist/external-analytics.graphql.js +0 -3
- package/dist/internal-analytics.graphql.js +0 -3
- package/dist/postsquery.graphql.js +0 -3
- package/dist/services/embed-content-api-client.d.ts +0 -8
- package/dist/services/embed-content-api-client.js +0 -48
- package/dist/services/embed-content-client.service.d.ts +0 -2
- package/dist/services/embed-content-client.service.js +0 -5
- package/dist/services/index.d.ts +0 -2
- package/dist/services/index.js +0 -2
- package/dist/services/operations/posts-query.graphql.js +0 -3
- package/dist/services/operations/streams-query.graphql.js +0 -3
- package/dist/services/types.d.ts +0 -303
- package/dist/streams-api-client-model.d.ts +0 -5
- package/dist/streams-content-api-client.d.ts +0 -14
- package/dist/streams-content-api-client.js +0 -89
|
@@ -1,430 +0,0 @@
|
|
|
1
|
-
import { AppEventType, CommunityMessageStatus } from './types.js';
|
|
2
|
-
import InternalTrackAppEvent from '../internal-analytics.graphql.js';
|
|
3
|
-
import TrackAppEvent from '../external-analytics.graphql.js';
|
|
4
|
-
import { ViewportVisibilityTracker } from './ViewportVisibilityTracker.js';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* AppEventsTracker is a utility class for tracking various user events in StreamsCloud applications
|
|
8
|
-
* such as post views, community message views, stream interactions, etc.
|
|
9
|
-
*/
|
|
10
|
-
class AppEventsTracker {
|
|
11
|
-
static reported = [];
|
|
12
|
-
static playedPercentsByPost = new Map();
|
|
13
|
-
// Store video data by page ID to handle multiple videos per page
|
|
14
|
-
static videosByPage = new Map();
|
|
15
|
-
static gqlEndpoint = "";
|
|
16
|
-
static client;
|
|
17
|
-
static organizationId;
|
|
18
|
-
static profileId;
|
|
19
|
-
static useClient = false;
|
|
20
|
-
/**
|
|
21
|
-
* Set the GraphQL client for making API calls (for authorized calls)
|
|
22
|
-
* @param client - The URQL client instance
|
|
23
|
-
*/
|
|
24
|
-
static setClient(client) {
|
|
25
|
-
this.client = client;
|
|
26
|
-
this.useClient = true;
|
|
27
|
-
}
|
|
28
|
-
/**
|
|
29
|
-
* Set the GraphQL endpoint for making API calls (for non-authorized calls)
|
|
30
|
-
* @param endpoint - The GraphQL endpoint URL
|
|
31
|
-
*/
|
|
32
|
-
static setEndpoint(endpoint) {
|
|
33
|
-
this.gqlEndpoint = endpoint;
|
|
34
|
-
this.useClient = false;
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* Set organization ID for non-authorized calls
|
|
38
|
-
* @param organizationId - The organization ID
|
|
39
|
-
*/
|
|
40
|
-
static setOrganizationId(organizationId) {
|
|
41
|
-
this.organizationId = organizationId;
|
|
42
|
-
}
|
|
43
|
-
/**
|
|
44
|
-
* Set profile ID for non-authorized calls
|
|
45
|
-
* @param profileId - The profile ID
|
|
46
|
-
*/
|
|
47
|
-
static setProfileId(profileId) {
|
|
48
|
-
this.profileId = profileId;
|
|
49
|
-
}
|
|
50
|
-
/**
|
|
51
|
-
* Track the progress of a short video within a page
|
|
52
|
-
* @param pageId - The ID of the page containing the video
|
|
53
|
-
* @param videoId - The ID of the video
|
|
54
|
-
* @param playedPercents - The percentage of the video that has been played
|
|
55
|
-
* @param streamId - The ID of the stream containing the video (optional)
|
|
56
|
-
*/
|
|
57
|
-
static trackShortVideoProgress(pageId, videoId, playedPercents, streamId) {
|
|
58
|
-
// Initialize page map if it doesn't exist
|
|
59
|
-
if (!this.videosByPage.has(pageId)) {
|
|
60
|
-
this.videosByPage.set(pageId, new Map());
|
|
61
|
-
}
|
|
62
|
-
// Update the played percentage for this video on this page
|
|
63
|
-
// Only store the maximum percentage in case of looping videos
|
|
64
|
-
const pageVideos = this.videosByPage.get(pageId);
|
|
65
|
-
if (pageVideos) {
|
|
66
|
-
const videoKey = `${videoId}|${streamId || ""}`;
|
|
67
|
-
const currentMaxPercent = pageVideos.get(videoKey) || 0;
|
|
68
|
-
// Store only the maximum played percentage value
|
|
69
|
-
// This ensures we don't decrease progress when video loops
|
|
70
|
-
pageVideos.set(videoKey, Math.max(currentMaxPercent, playedPercents));
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
/**
|
|
74
|
-
* Report all video views for a page when it's deactivated
|
|
75
|
-
* @param pageId - The ID of the page that's being deactivated
|
|
76
|
-
* @param streamId - The ID of the stream containing the page (optional)
|
|
77
|
-
*/
|
|
78
|
-
static reportPageVideoViews(pageId, streamId) {
|
|
79
|
-
const pageVideos = this.videosByPage.get(pageId);
|
|
80
|
-
if (pageVideos) {
|
|
81
|
-
// Report all video views for this page
|
|
82
|
-
pageVideos.forEach((playedPercents, videoKey) => {
|
|
83
|
-
const [videoId, videoStreamId] = videoKey.split("|");
|
|
84
|
-
this.reportAppEvent(videoId, AppEventType.ShortVideoView, videoStreamId || streamId, playedPercents);
|
|
85
|
-
});
|
|
86
|
-
// Clean up the tracking data for this page
|
|
87
|
-
this.videosByPage.delete(pageId);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
/**
|
|
91
|
-
* Track when a post is opened
|
|
92
|
-
* @param postId - The ID of the post
|
|
93
|
-
* @param ownerId - The ID of the owner
|
|
94
|
-
*/
|
|
95
|
-
static trackPostOpened(postId, ownerId) {
|
|
96
|
-
this.reportAppEvent(postId, AppEventType.PostView, ownerId);
|
|
97
|
-
}
|
|
98
|
-
/**
|
|
99
|
-
* Track when a post is being played
|
|
100
|
-
* @param postId - The ID of the post
|
|
101
|
-
* @param playedPercents - The percentage of the post that has been played
|
|
102
|
-
* @deprecated Consider using trackShortVideoProgress for better tracking of multiple videos
|
|
103
|
-
*/
|
|
104
|
-
static reportVideoPostPlayingProgress(postId, playedPercents) {
|
|
105
|
-
// Store the latest played percentage for this post
|
|
106
|
-
this.playedPercentsByPost.set(postId, playedPercents);
|
|
107
|
-
}
|
|
108
|
-
/**
|
|
109
|
-
* Track when a community message is opened
|
|
110
|
-
* @param messageId - The ID of the message
|
|
111
|
-
* @param status - The status of the message
|
|
112
|
-
*/
|
|
113
|
-
static trackCommunityMessageOpened(messageId, status) {
|
|
114
|
-
if (status === CommunityMessageStatus.Sent) {
|
|
115
|
-
this.reportAppEvent(messageId, AppEventType.CommunityMessageView);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
/**
|
|
119
|
-
* Track when a stream tile is shown to the user (basic, immediate call).
|
|
120
|
-
* @param streamId - The ID of the stream
|
|
121
|
-
*/
|
|
122
|
-
static trackStreamTileImpression(streamId) {
|
|
123
|
-
this.reportAppEvent(streamId, AppEventType.StreamTileImpression);
|
|
124
|
-
}
|
|
125
|
-
/**
|
|
126
|
-
* Track when a stream tile is shown to the user, using viewport visibility tracking.
|
|
127
|
-
* The impression event will only be fired if the element becomes visible (at least 50% in viewport).
|
|
128
|
-
* The event is only fired once per streamId per session/visit.
|
|
129
|
-
*
|
|
130
|
-
* @param el - The DOM element to observe (e.g., the stream tile)
|
|
131
|
-
* @param streamId - The unique stream ID for this tile
|
|
132
|
-
*/
|
|
133
|
-
static trackStreamTileImpressionWithVisibility(el, streamId) {
|
|
134
|
-
if (!el || !streamId)
|
|
135
|
-
return;
|
|
136
|
-
ViewportVisibilityTracker.registerTile(el, streamId, (sid) => {
|
|
137
|
-
this.reportAppEvent(sid, AppEventType.StreamTileImpression);
|
|
138
|
-
});
|
|
139
|
-
// The ViewportVisibilityTracker will call the callback when visible
|
|
140
|
-
}
|
|
141
|
-
/**
|
|
142
|
-
* Track when a stream tile is clicked
|
|
143
|
-
* @param streamId - The ID of the stream
|
|
144
|
-
*/
|
|
145
|
-
static trackStreamTileClick(streamId) {
|
|
146
|
-
this.reportAppEvent(streamId, AppEventType.StreamTileClick);
|
|
147
|
-
}
|
|
148
|
-
/**
|
|
149
|
-
* Track when a stream is viewed
|
|
150
|
-
* @param streamId - The ID of the stream
|
|
151
|
-
*/
|
|
152
|
-
static trackStreamView(streamId) {
|
|
153
|
-
this.reportAppEvent(streamId, AppEventType.StreamView);
|
|
154
|
-
}
|
|
155
|
-
/**
|
|
156
|
-
* Track the amount of time a user engages with a stream
|
|
157
|
-
* @param streamId - The ID of the stream
|
|
158
|
-
* @param engagementTimeSeconds - The engagement time in seconds
|
|
159
|
-
*/
|
|
160
|
-
static trackStreamEngagementTime(streamId, engagementTimeSeconds) {
|
|
161
|
-
this.reportAppEvent(streamId, AppEventType.StreamEngagementTime, undefined, engagementTimeSeconds);
|
|
162
|
-
}
|
|
163
|
-
/**
|
|
164
|
-
* Track how deep a user scrolls in a stream
|
|
165
|
-
* @param streamId - The ID of the stream
|
|
166
|
-
* @param scrollDepth - The scroll depth (typically a percentage)
|
|
167
|
-
*/
|
|
168
|
-
static trackStreamScrollDepth(streamId, scrollDepth) {
|
|
169
|
-
this.reportAppEvent(streamId, AppEventType.StreamScrollDepth, undefined, scrollDepth);
|
|
170
|
-
}
|
|
171
|
-
/**
|
|
172
|
-
* Track when a stream page is viewed
|
|
173
|
-
* @param pageId - The ID of the page
|
|
174
|
-
* @param streamId - The ID of the stream
|
|
175
|
-
*/
|
|
176
|
-
static trackStreamPageView(pageId, streamId) {
|
|
177
|
-
this.reportAppEvent(pageId, AppEventType.StreamPageView, streamId);
|
|
178
|
-
}
|
|
179
|
-
/**
|
|
180
|
-
* Track when a product in a stream is clicked
|
|
181
|
-
* @param productId - The ID of the product
|
|
182
|
-
* @param streamId - The ID of the stream
|
|
183
|
-
*/
|
|
184
|
-
static trackStreamProductClicked(productId, streamId) {
|
|
185
|
-
this.reportAppEvent(productId, AppEventType.StreamProductClick, streamId);
|
|
186
|
-
}
|
|
187
|
-
/**
|
|
188
|
-
* Track when a product in a stream is shown to the user (basic, immediate call)
|
|
189
|
-
* @param productId - The ID of the product
|
|
190
|
-
* @param streamId - The ID of the stream
|
|
191
|
-
*/
|
|
192
|
-
static trackStreamProductImpression(productId, streamId) {
|
|
193
|
-
this.reportAppEvent(productId, AppEventType.StreamProductImpression, streamId);
|
|
194
|
-
}
|
|
195
|
-
/**
|
|
196
|
-
* Track when a product in a stream is shown to the user, using viewport visibility tracking.
|
|
197
|
-
* The impression event will only be fired if the element becomes visible (at least 50% in viewport).
|
|
198
|
-
* The event is only fired once per productId per session/visit.
|
|
199
|
-
*
|
|
200
|
-
* @param el - The DOM element to observe (e.g., the product element)
|
|
201
|
-
* @param productId - The unique product ID for this element
|
|
202
|
-
* @param streamId - The ID of the stream
|
|
203
|
-
*/
|
|
204
|
-
static trackStreamProductImpressionWithVisibility(el, productId, streamId) {
|
|
205
|
-
if (!el || !productId || !streamId)
|
|
206
|
-
return;
|
|
207
|
-
ViewportVisibilityTracker.registerTile(el, productId, (pid) => {
|
|
208
|
-
this.reportAppEvent(pid, AppEventType.StreamProductImpression, streamId);
|
|
209
|
-
});
|
|
210
|
-
// The ViewportVisibilityTracker will call the callback when visible
|
|
211
|
-
}
|
|
212
|
-
/**
|
|
213
|
-
* Track when a product in a stream is added to cart
|
|
214
|
-
* @param productId - The ID of the product
|
|
215
|
-
* @param streamId - The ID of the stream
|
|
216
|
-
*/
|
|
217
|
-
static trackStreamProductAddToCart(productId, streamId) {
|
|
218
|
-
this.reportAppEvent(productId, AppEventType.StreamProductAddToCart, streamId);
|
|
219
|
-
}
|
|
220
|
-
/**
|
|
221
|
-
* Track when a product in a stream is checked out
|
|
222
|
-
* @param productId - The ID of the product
|
|
223
|
-
* @param streamId - The ID of the stream
|
|
224
|
-
*/
|
|
225
|
-
static trackStreamProductCheckout(productId, streamId) {
|
|
226
|
-
this.reportAppEvent(productId, AppEventType.StreamProductCheckout, streamId);
|
|
227
|
-
}
|
|
228
|
-
/**
|
|
229
|
-
* Track when a post is closed
|
|
230
|
-
* @param postId - The ID of the post
|
|
231
|
-
* @param streamId - The ID of the stream
|
|
232
|
-
* @deprecated Consider using trackShortVideoProgress and reportPageVideoViews for better tracking of multiple videos
|
|
233
|
-
*/
|
|
234
|
-
static trackClosed(postId, streamId) {
|
|
235
|
-
// Get the stored played percentage for this post
|
|
236
|
-
const playedPercents = this.playedPercentsByPost.get(postId);
|
|
237
|
-
// Report the final ShortVideoView event with the final played percentage when video is stopped
|
|
238
|
-
if (playedPercents !== undefined) {
|
|
239
|
-
this.reportAppEvent(postId, AppEventType.ShortVideoView, streamId, playedPercents);
|
|
240
|
-
}
|
|
241
|
-
// Clean up stored data for this post
|
|
242
|
-
this.playedPercentsByPost.delete(postId);
|
|
243
|
-
const postIndex = this.reported.indexOf(postId);
|
|
244
|
-
if (postIndex >= 0) {
|
|
245
|
-
this.reported.splice(postIndex, 1);
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
/**
|
|
249
|
-
* Track when an ad is shown to the user
|
|
250
|
-
* @param adId - The ID of the ad
|
|
251
|
-
*/
|
|
252
|
-
static trackAdImpression(adId) {
|
|
253
|
-
this.reportAppEvent(adId, AppEventType.AdImpression);
|
|
254
|
-
}
|
|
255
|
-
/**
|
|
256
|
-
* Track when an ad is clicked by the user
|
|
257
|
-
* @param adId - The ID of the ad
|
|
258
|
-
*/
|
|
259
|
-
static trackAdClick(adId) {
|
|
260
|
-
this.reportAppEvent(adId, AppEventType.AdClick);
|
|
261
|
-
}
|
|
262
|
-
/**
|
|
263
|
-
* Track when an ad is shown to the user, using viewport visibility tracking.
|
|
264
|
-
* The impression event will only be fired if the element becomes visible (at least 50% in viewport).
|
|
265
|
-
* The event is only fired once per adId per session/visit.
|
|
266
|
-
*
|
|
267
|
-
* @param el - The DOM element to observe (e.g., the ad element)
|
|
268
|
-
* @param adId - The unique ad ID for this element
|
|
269
|
-
*/
|
|
270
|
-
static trackAdImpressionWithVisibility(el, adId) {
|
|
271
|
-
if (!el || !adId)
|
|
272
|
-
return;
|
|
273
|
-
ViewportVisibilityTracker.registerTile(el, adId, (aid) => {
|
|
274
|
-
this.reportAppEvent(aid, AppEventType.AdImpression);
|
|
275
|
-
});
|
|
276
|
-
// The ViewportVisibilityTracker will call the callback when visible
|
|
277
|
-
}
|
|
278
|
-
/**
|
|
279
|
-
* Track when a short video is shown to the user (basic, immediate call)
|
|
280
|
-
* @param videoId - The ID of the short video
|
|
281
|
-
*/
|
|
282
|
-
static trackShortVideoImpression(videoId) {
|
|
283
|
-
this.reportAppEvent(videoId, AppEventType.ShortVideoImpression);
|
|
284
|
-
}
|
|
285
|
-
/**
|
|
286
|
-
* Track when a short video is shown to the user, using viewport visibility tracking.
|
|
287
|
-
* The impression event will only be fired if the element becomes visible (at least 50% in viewport).
|
|
288
|
-
* The event is only fired once per videoId per session/visit.
|
|
289
|
-
*
|
|
290
|
-
* @param el - The DOM element to observe (e.g., the video element)
|
|
291
|
-
* @param videoId - The unique video ID for this element
|
|
292
|
-
*/
|
|
293
|
-
static trackShortVideoImpressionWithVisibility(el, videoId) {
|
|
294
|
-
if (!el || !videoId)
|
|
295
|
-
return;
|
|
296
|
-
ViewportVisibilityTracker.registerTile(el, videoId, (vid) => {
|
|
297
|
-
this.reportAppEvent(vid, AppEventType.ShortVideoImpression);
|
|
298
|
-
});
|
|
299
|
-
// The ViewportVisibilityTracker will call the callback when visible
|
|
300
|
-
}
|
|
301
|
-
/**
|
|
302
|
-
* Track when a short video is viewed by the user
|
|
303
|
-
* @param videoId - The ID of the short video
|
|
304
|
-
* @param playedPercents - The percentage of the video that was played (optional)
|
|
305
|
-
*/
|
|
306
|
-
static trackShortVideoView(videoId) {
|
|
307
|
-
this.reportAppEvent(videoId, AppEventType.ShortVideoView);
|
|
308
|
-
}
|
|
309
|
-
/**
|
|
310
|
-
* Track when a product in a short video is clicked
|
|
311
|
-
* @param productId - The ID of the product
|
|
312
|
-
* @param videoId - The ID of the short video containing the product
|
|
313
|
-
*/
|
|
314
|
-
static trackShortVideoProductClick(productId, videoId) {
|
|
315
|
-
this.reportAppEvent(productId, AppEventType.ShortVideoProductClick, videoId);
|
|
316
|
-
}
|
|
317
|
-
/**
|
|
318
|
-
* Track when a product in a short video is shown to the user (basic, immediate call)
|
|
319
|
-
* @param productId - The ID of the product
|
|
320
|
-
* @param videoId - The ID of the short video containing the product
|
|
321
|
-
*/
|
|
322
|
-
static trackShortVideoProductImpression(productId, videoId) {
|
|
323
|
-
this.reportAppEvent(productId, AppEventType.ShortVideoProductImpression, videoId);
|
|
324
|
-
}
|
|
325
|
-
/**
|
|
326
|
-
* Track when a product in a short video is shown to the user, using viewport visibility tracking.
|
|
327
|
-
* The impression event will only be fired if the element becomes visible (at least 50% in viewport).
|
|
328
|
-
* The event is only fired once per productId per session/visit.
|
|
329
|
-
*
|
|
330
|
-
* @param el - The DOM element to observe (e.g., the product element)
|
|
331
|
-
* @param productId - The unique product ID for this element
|
|
332
|
-
* @param videoId - The ID of the short video containing the product
|
|
333
|
-
*/
|
|
334
|
-
static trackShortVideoProductImpressionWithVisibility(el, productId, videoId) {
|
|
335
|
-
if (!el || !productId || !videoId)
|
|
336
|
-
return;
|
|
337
|
-
ViewportVisibilityTracker.registerTile(el, productId, (pid) => {
|
|
338
|
-
this.reportAppEvent(pid, AppEventType.ShortVideoProductImpression, videoId);
|
|
339
|
-
});
|
|
340
|
-
// The ViewportVisibilityTracker will call the callback when visible
|
|
341
|
-
}
|
|
342
|
-
/**
|
|
343
|
-
* Track when a product in a short video is added to cart
|
|
344
|
-
* @param productId - The ID of the product
|
|
345
|
-
* @param videoId - The ID of the short video containing the product
|
|
346
|
-
*/
|
|
347
|
-
static trackShortVideoProductAddToCart(productId, videoId) {
|
|
348
|
-
this.reportAppEvent(productId, AppEventType.ShortVideoProductAddToCart, videoId);
|
|
349
|
-
}
|
|
350
|
-
/**
|
|
351
|
-
* Track when a product in a short video is checked out
|
|
352
|
-
* @param productId - The ID of the product
|
|
353
|
-
* @param videoId - The ID of the short video containing the product
|
|
354
|
-
*/
|
|
355
|
-
static trackShortVideoProductCheckout(productId, videoId) {
|
|
356
|
-
this.reportAppEvent(productId, AppEventType.ShortVideoProductCheckout, videoId);
|
|
357
|
-
}
|
|
358
|
-
/**
|
|
359
|
-
* Report an app event to the API
|
|
360
|
-
* @private
|
|
361
|
-
* @param targetId - The ID of the target object
|
|
362
|
-
* @param eventType - The type of event
|
|
363
|
-
* @param ownerId - The ID of the owner (optional)
|
|
364
|
-
* @param value - Additional value for the event (optional)
|
|
365
|
-
*/
|
|
366
|
-
static async reportAppEvent(targetId, eventType, ownerId, value) {
|
|
367
|
-
await this.saveAppEvent(targetId, eventType, ownerId, value);
|
|
368
|
-
}
|
|
369
|
-
/**
|
|
370
|
-
* Save an app event to the API
|
|
371
|
-
* @private
|
|
372
|
-
* @param targetId - The ID of the target object
|
|
373
|
-
* @param eventType - The type of event
|
|
374
|
-
* @param ownerId - The ID of the owner (optional)
|
|
375
|
-
* @param value - Additional value for the event (optional)
|
|
376
|
-
*/
|
|
377
|
-
static async saveAppEvent(targetId, eventType, ownerId, value) {
|
|
378
|
-
// Create the input payload with the base properties
|
|
379
|
-
const input = {
|
|
380
|
-
eventType,
|
|
381
|
-
targetId,
|
|
382
|
-
ownerId: ownerId || undefined,
|
|
383
|
-
value: value || undefined,
|
|
384
|
-
};
|
|
385
|
-
// Add organization and profile IDs for non-authorized calls if they exist
|
|
386
|
-
if (!this.useClient) {
|
|
387
|
-
if (this.profileId) {
|
|
388
|
-
input.profileId = this.profileId;
|
|
389
|
-
}
|
|
390
|
-
}
|
|
391
|
-
// Add organization ID if it exists
|
|
392
|
-
if (this.organizationId) {
|
|
393
|
-
input.organizationId = this.organizationId;
|
|
394
|
-
}
|
|
395
|
-
// Choose between client and direct endpoint modes
|
|
396
|
-
if (this.useClient) {
|
|
397
|
-
if (!this.client) {
|
|
398
|
-
console.warn("An attempt to save app event without initializing GraphQL client detected");
|
|
399
|
-
return;
|
|
400
|
-
}
|
|
401
|
-
await this.client.mutation(InternalTrackAppEvent, { input }).toPromise();
|
|
402
|
-
}
|
|
403
|
-
else {
|
|
404
|
-
if (!this.gqlEndpoint) {
|
|
405
|
-
console.warn("An attempt to save app event without initializing GraphQL endpoint detected");
|
|
406
|
-
return;
|
|
407
|
-
}
|
|
408
|
-
await this.queryGql(TrackAppEvent, { input });
|
|
409
|
-
}
|
|
410
|
-
}
|
|
411
|
-
static queryGql = async (query, variables) => {
|
|
412
|
-
const response = await fetch(this.gqlEndpoint, {
|
|
413
|
-
method: "POST",
|
|
414
|
-
headers: {
|
|
415
|
-
"Content-Type": "application/json",
|
|
416
|
-
},
|
|
417
|
-
body: JSON.stringify({
|
|
418
|
-
query,
|
|
419
|
-
variables,
|
|
420
|
-
}),
|
|
421
|
-
});
|
|
422
|
-
const gql = await response.json();
|
|
423
|
-
if (!gql.data) {
|
|
424
|
-
throw new Error(JSON.stringify(gql.errors));
|
|
425
|
-
}
|
|
426
|
-
return gql.data;
|
|
427
|
-
};
|
|
428
|
-
}
|
|
429
|
-
|
|
430
|
-
export { AppEventsTracker };
|
package/dist/analytics/index.js
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
export declare enum AppEventType {
|
|
2
|
-
AdClick = "AD_CLICK",
|
|
3
|
-
AdImpression = "AD_IMPRESSION",
|
|
4
|
-
CommunityMessageView = "COMMUNITY_MESSAGE_VIEW",
|
|
5
|
-
ContributionCreated = "CONTRIBUTION_CREATED",
|
|
6
|
-
PostView = "POST_VIEW",
|
|
7
|
-
ShortVideoImpression = "SHORT_VIDEO_IMPRESSION",
|
|
8
|
-
ShortVideoProductAddToCart = "SHORT_VIDEO_PRODUCT_ADD_TO_CART",
|
|
9
|
-
ShortVideoProductCheckout = "SHORT_VIDEO_PRODUCT_CHECKOUT",
|
|
10
|
-
ShortVideoProductClick = "SHORT_VIDEO_PRODUCT_CLICK",
|
|
11
|
-
ShortVideoProductImpression = "SHORT_VIDEO_PRODUCT_IMPRESSION",
|
|
12
|
-
ShortVideoView = "SHORT_VIDEO_VIEW",
|
|
13
|
-
StreamEngagementTime = "STREAM_ENGAGEMENT_TIME",
|
|
14
|
-
StreamPageView = "STREAM_PAGE_VIEW",
|
|
15
|
-
StreamProductAddToCart = "STREAM_PRODUCT_ADD_TO_CART",
|
|
16
|
-
StreamProductCheckout = "STREAM_PRODUCT_CHECKOUT",
|
|
17
|
-
StreamProductClick = "STREAM_PRODUCT_CLICK",
|
|
18
|
-
StreamProductImpression = "STREAM_PRODUCT_IMPRESSION",
|
|
19
|
-
StreamScrollDepth = "STREAM_SCROLL_DEPTH",
|
|
20
|
-
StreamTileClick = "STREAM_TILE_CLICK",
|
|
21
|
-
StreamTileImpression = "STREAM_TILE_IMPRESSION",
|
|
22
|
-
StreamView = "STREAM_VIEW"
|
|
23
|
-
}
|
|
24
|
-
export declare enum CommunityMessageStatus {
|
|
25
|
-
Sent = "SENT",
|
|
26
|
-
Delivered = "DELIVERED",
|
|
27
|
-
Read = "READ",
|
|
28
|
-
Failed = "FAILED"
|
|
29
|
-
}
|
|
30
|
-
export type TrackAppEventInput = {
|
|
31
|
-
eventType: AppEventType;
|
|
32
|
-
targetId: string;
|
|
33
|
-
ownerId?: string;
|
|
34
|
-
value?: number;
|
|
35
|
-
organizationId?: string;
|
|
36
|
-
profileId?: string;
|
|
37
|
-
};
|
package/dist/analytics/types.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
var AppEventType;
|
|
2
|
-
(function (AppEventType) {
|
|
3
|
-
AppEventType["AdClick"] = "AD_CLICK";
|
|
4
|
-
AppEventType["AdImpression"] = "AD_IMPRESSION";
|
|
5
|
-
AppEventType["CommunityMessageView"] = "COMMUNITY_MESSAGE_VIEW";
|
|
6
|
-
AppEventType["ContributionCreated"] = "CONTRIBUTION_CREATED";
|
|
7
|
-
AppEventType["PostView"] = "POST_VIEW";
|
|
8
|
-
AppEventType["ShortVideoImpression"] = "SHORT_VIDEO_IMPRESSION";
|
|
9
|
-
AppEventType["ShortVideoProductAddToCart"] = "SHORT_VIDEO_PRODUCT_ADD_TO_CART";
|
|
10
|
-
AppEventType["ShortVideoProductCheckout"] = "SHORT_VIDEO_PRODUCT_CHECKOUT";
|
|
11
|
-
AppEventType["ShortVideoProductClick"] = "SHORT_VIDEO_PRODUCT_CLICK";
|
|
12
|
-
AppEventType["ShortVideoProductImpression"] = "SHORT_VIDEO_PRODUCT_IMPRESSION";
|
|
13
|
-
AppEventType["ShortVideoView"] = "SHORT_VIDEO_VIEW";
|
|
14
|
-
AppEventType["StreamEngagementTime"] = "STREAM_ENGAGEMENT_TIME";
|
|
15
|
-
AppEventType["StreamPageView"] = "STREAM_PAGE_VIEW";
|
|
16
|
-
AppEventType["StreamProductAddToCart"] = "STREAM_PRODUCT_ADD_TO_CART";
|
|
17
|
-
AppEventType["StreamProductCheckout"] = "STREAM_PRODUCT_CHECKOUT";
|
|
18
|
-
AppEventType["StreamProductClick"] = "STREAM_PRODUCT_CLICK";
|
|
19
|
-
AppEventType["StreamProductImpression"] = "STREAM_PRODUCT_IMPRESSION";
|
|
20
|
-
AppEventType["StreamScrollDepth"] = "STREAM_SCROLL_DEPTH";
|
|
21
|
-
AppEventType["StreamTileClick"] = "STREAM_TILE_CLICK";
|
|
22
|
-
AppEventType["StreamTileImpression"] = "STREAM_TILE_IMPRESSION";
|
|
23
|
-
AppEventType["StreamView"] = "STREAM_VIEW";
|
|
24
|
-
})(AppEventType || (AppEventType = {}));
|
|
25
|
-
var CommunityMessageStatus;
|
|
26
|
-
(function (CommunityMessageStatus) {
|
|
27
|
-
CommunityMessageStatus["Sent"] = "SENT";
|
|
28
|
-
CommunityMessageStatus["Delivered"] = "DELIVERED";
|
|
29
|
-
CommunityMessageStatus["Read"] = "READ";
|
|
30
|
-
CommunityMessageStatus["Failed"] = "FAILED";
|
|
31
|
-
})(CommunityMessageStatus || (CommunityMessageStatus = {}));
|
|
32
|
-
|
|
33
|
-
export { AppEventType, CommunityMessageStatus };
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
var TrackAppEvent = "mutation TrackAppEvent($input: ExternalTrackAppEventInput!) {\n externalTrackAppEvent(input: $input) {\n void\n }\n}\n\nmutation InternalTrackAppEvent($input: TrackAppEventInput!) {\n trackAppEvent(input: $input) {\n void\n }\n}\n";
|
|
2
|
-
|
|
3
|
-
export { TrackAppEvent as default };
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
var SiteArticleQuery = "query SiteArticle($organizationId: String!, $slug: String!) {\n siteArticle(filter: { organizationId: $organizationId, slug: $slug }) {\n ...ArticleFragment\n }\n}\n\nfragment ArticleFragment on Article {\n id\n postId\n slug\n publishedAt\n mainImage(scale: ORIGINAL_ENCODED)\n sections {\n ...ArticleSectionPayloadFragment\n }\n}\n\nfragment ArticleSectionPayloadFragment on ArticleSection {\n id\n isContentEditable\n styles {\n paddingBottom\n paddingTop\n paddingLeft\n paddingRight\n }\n layouts {\n ..._ArticleLayoutPayloadFragment\n }\n}\n\nfragment _ArticleLayoutPayloadFragment on ArticleLayout {\n id\n type\n styles {\n paddingBottom\n paddingTop\n paddingLeft\n paddingRight\n }\n fields {\n ..._ArticleFieldPayloadFragment\n }\n}\n\nfragment _ArticleFieldPayloadFragment on ArticleField {\n id\n name\n description\n fieldData {\n type\n bylineData {\n ..._BylineFieldDataPayloadFragment\n }\n imageData {\n ..._ImageFieldDataPayloadFragment\n }\n mediaData {\n ..._MediaFieldDataPayloadFragment\n }\n mediaGalleryData {\n ..._MediaGalleryFieldDataPayloadFragment\n }\n richTextData {\n ..._RichTextFieldDataPayloadFragment\n }\n textData {\n ..._TextFieldDataPayloadFragment\n }\n videoData {\n ..._VideoFieldDataPayloadFragment\n }\n }\n}\n\nfragment _BylineFieldDataPayloadFragment on BylineFieldData {\n authorName\n}\n\nfragment _ImageFieldDataPayloadFragment on ImageFieldData {\n image {\n ...MediaItemPayloadFragment\n }\n preferredMediaFormat\n}\n\nfragment _MediaFieldDataPayloadFragment on MediaFieldData {\n media {\n ...MediaItemPayloadFragment\n }\n preferredMediaFormat\n}\n\nfragment _MediaGalleryFieldDataPayloadFragment on MediaGalleryFieldData {\n media {\n ...MediaItemPayloadFragment\n }\n galleryMode\n preferredMediaFormat\n}\n\nfragment _RichTextFieldDataPayloadFragment on RichTextFieldData {\n text\n textSize\n}\n\nfragment _TextFieldDataPayloadFragment on TextFieldData {\n text\n textMode\n textSize\n textWeight\n}\n\nfragment _VideoFieldDataPayloadFragment on VideoFieldData {\n video {\n ...MediaItemPayloadFragment\n }\n preferredMediaFormat\n}\n\nfragment MediaItemPayloadFragment on MediaItem {\n url(scale: ORIGINAL_ENCODED)\n thumbnailUrl(scale: ORIGINAL_ENCODED)\n type\n metadata {\n ...MediaItemMetadataPayloadFragment\n }\n}\n\nfragment MediaItemMetadataPayloadFragment on MediaItemMetadata {\n fileName\n width\n height\n durationSec\n}\n";
|
|
2
|
-
|
|
3
|
-
export { SiteArticleQuery as default };
|
package/dist/components/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DataType, ParameterType } from './types.js';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import type { ComponentData } from '../components-data';
|
|
2
|
-
export declare const DataType: {
|
|
3
|
-
Stream: string;
|
|
4
|
-
ShortVideo: string;
|
|
5
|
-
};
|
|
6
|
-
export declare const ParameterType: {
|
|
7
|
-
String: string;
|
|
8
|
-
Text: string;
|
|
9
|
-
Number: string;
|
|
10
|
-
Color: string;
|
|
11
|
-
};
|
|
12
|
-
export type ParameterValue = unknown;
|
|
13
|
-
export type Parameters = {
|
|
14
|
-
[key: string]: ParameterValue;
|
|
15
|
-
};
|
|
16
|
-
export type ComponentProps = {
|
|
17
|
-
parameters?: Parameters;
|
|
18
|
-
data?: ComponentData;
|
|
19
|
-
};
|
package/dist/components/types.js
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import type { ComponentData, ComponentDataProvider, ComponentsData, DataParameters } from './types';
|
|
2
|
-
export declare const createComponentDataProvider: (componentsData?: ComponentsData, preserveOriginalData?: boolean) => ComponentDataProvider;
|
|
3
|
-
export declare const getComponentData: (componentsData?: ComponentsData, parameters?: DataParameters) => ComponentData;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
const createComponentDataProvider = (componentsData, preserveOriginalData = false) => {
|
|
2
|
-
if (preserveOriginalData) {
|
|
3
|
-
componentsData = structuredClone(componentsData);
|
|
4
|
-
}
|
|
5
|
-
return {
|
|
6
|
-
getData: (parameters) => getComponentData(componentsData, parameters)
|
|
7
|
-
};
|
|
8
|
-
};
|
|
9
|
-
const getComponentData = (componentsData, parameters) => {
|
|
10
|
-
const result = {};
|
|
11
|
-
if (!componentsData) {
|
|
12
|
-
return result;
|
|
13
|
-
}
|
|
14
|
-
if (!parameters) {
|
|
15
|
-
return result;
|
|
16
|
-
}
|
|
17
|
-
for (const [dataType, params] of Object.entries(parameters)) {
|
|
18
|
-
if (!params) {
|
|
19
|
-
continue;
|
|
20
|
-
}
|
|
21
|
-
const data = componentsData[dataType];
|
|
22
|
-
if (!data) {
|
|
23
|
-
continue;
|
|
24
|
-
}
|
|
25
|
-
result[dataType] = getModels(data, params);
|
|
26
|
-
}
|
|
27
|
-
return result;
|
|
28
|
-
};
|
|
29
|
-
const getModels = (content, ids) => ids.length
|
|
30
|
-
? content
|
|
31
|
-
.filter((x) => ids.includes(x.id))
|
|
32
|
-
.sort((a, b) => ids.indexOf(a.id) - ids.indexOf(b.id))
|
|
33
|
-
: [];
|
|
34
|
-
|
|
35
|
-
export { createComponentDataProvider, getComponentData };
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { EmbedContentApiClient } from '../services';
|
|
2
|
-
import { ComponentsData, ComponentsDataParameters } from './types';
|
|
3
|
-
export declare const createComponentsDataFetcher: (client: EmbedContentApiClient) => {
|
|
4
|
-
fetch: (dataParameters: ComponentsDataParameters) => Promise<ComponentsData>;
|
|
5
|
-
};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { getShortVideosDataLoader } from '../data-loaders/short-videos-data-loader/loader.js';
|
|
2
|
-
import { getStreamsDataLoader } from '../data-loaders/streams-data-loader/loader.js';
|
|
3
|
-
import { DataType } from './types.js';
|
|
4
|
-
|
|
5
|
-
const createComponentsDataFetcher = (client) => {
|
|
6
|
-
const loadersMap = new Map([
|
|
7
|
-
[DataType.ShortVideo, getShortVideosDataLoader(client)],
|
|
8
|
-
[DataType.Stream, getStreamsDataLoader(client)]
|
|
9
|
-
]);
|
|
10
|
-
return {
|
|
11
|
-
fetch: async (dataParameters) => {
|
|
12
|
-
const result = {};
|
|
13
|
-
const fetchActions = [];
|
|
14
|
-
for (const [dataType, params] of Object.entries(dataParameters)) {
|
|
15
|
-
if (!params) {
|
|
16
|
-
continue;
|
|
17
|
-
}
|
|
18
|
-
const loader = loadersMap.get(dataType);
|
|
19
|
-
if (!loader) {
|
|
20
|
-
continue;
|
|
21
|
-
}
|
|
22
|
-
fetchActions.push((async () => {
|
|
23
|
-
result[dataType] = await loadContent(loader, params);
|
|
24
|
-
})());
|
|
25
|
-
}
|
|
26
|
-
await Promise.all(fetchActions);
|
|
27
|
-
return result;
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
|
-
const loadContent = async (dataLoader, contentParameters) => {
|
|
32
|
-
return contentParameters.ids.length ? await dataLoader.load(contentParameters.ids) : [];
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
export { createComponentsDataFetcher };
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
const getComponentsDataParameters = (parameters) => {
|
|
2
|
-
const result = {};
|
|
3
|
-
const params = parameters
|
|
4
|
-
.flatMap((x) => Object.entries(x).filter(([_, v]) => Array.isArray(v)).map(([t, v]) => ({ type: t, value: v })));
|
|
5
|
-
const dataTypes = [...new Set(params.map(x => x.type))];
|
|
6
|
-
for (const dataType of dataTypes) {
|
|
7
|
-
result[dataType] = {
|
|
8
|
-
ids: getIds(params, dataType),
|
|
9
|
-
};
|
|
10
|
-
}
|
|
11
|
-
return result;
|
|
12
|
-
};
|
|
13
|
-
const getIds = (parameters, dataType) => [
|
|
14
|
-
...new Set(parameters
|
|
15
|
-
.filter((x) => x.type === dataType && typeof Array.isArray(x.value))
|
|
16
|
-
.map((x) => x.value)
|
|
17
|
-
.flatMap((x) => x))
|
|
18
|
-
];
|
|
19
|
-
|
|
20
|
-
export { getComponentsDataParameters };
|