@searchspring/snap-tracker 0.20.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/LICENSE +21 -0
- package/README.md +474 -0
- package/dist/cjs/BeaconEvent.d.ts +12 -0
- package/dist/cjs/BeaconEvent.d.ts.map +1 -0
- package/dist/cjs/BeaconEvent.js +22 -0
- package/dist/cjs/PixelEvent.d.ts +9 -0
- package/dist/cjs/PixelEvent.d.ts.map +1 -0
- package/dist/cjs/PixelEvent.js +63 -0
- package/dist/cjs/TrackEvent.d.ts +11 -0
- package/dist/cjs/TrackEvent.d.ts.map +1 -0
- package/dist/cjs/TrackEvent.js +31 -0
- package/dist/cjs/Tracker.d.ts +31 -0
- package/dist/cjs/Tracker.d.ts.map +1 -0
- package/dist/cjs/Tracker.js +491 -0
- package/dist/cjs/index.d.ts +4 -0
- package/dist/cjs/index.d.ts.map +1 -0
- package/dist/cjs/index.js +16 -0
- package/dist/cjs/types.d.ts +144 -0
- package/dist/cjs/types.d.ts.map +1 -0
- package/dist/cjs/types.js +30 -0
- package/dist/esm/BeaconEvent.d.ts +12 -0
- package/dist/esm/BeaconEvent.d.ts.map +1 -0
- package/dist/esm/BeaconEvent.js +16 -0
- package/dist/esm/PixelEvent.d.ts +9 -0
- package/dist/esm/PixelEvent.d.ts.map +1 -0
- package/dist/esm/PixelEvent.js +57 -0
- package/dist/esm/TrackEvent.d.ts +11 -0
- package/dist/esm/TrackEvent.d.ts.map +1 -0
- package/dist/esm/TrackEvent.js +25 -0
- package/dist/esm/Tracker.d.ts +31 -0
- package/dist/esm/Tracker.d.ts.map +1 -0
- package/dist/esm/Tracker.js +462 -0
- package/dist/esm/index.d.ts +4 -0
- package/dist/esm/index.d.ts.map +1 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/types.d.ts +144 -0
- package/dist/esm/types.d.ts.map +1 -0
- package/dist/esm/types.js +27 -0
- package/package.json +33 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 Searchspring
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,474 @@
|
|
|
1
|
+
# Snap Tracker
|
|
2
|
+
|
|
3
|
+
<a href="https://www.npmjs.com/package/@searchspring/snap-tracker"><img alt="NPM Status" src="https://img.shields.io/npm/v/@searchspring/snap-tracker.svg?style=flat"></a>
|
|
4
|
+
|
|
5
|
+
The Snap Tracker service is responsible for sending beacon events.
|
|
6
|
+
|
|
7
|
+
## Dependencies
|
|
8
|
+
|
|
9
|
+
Snap Tracker is a dependency of [@searchspring/snap-controller](https://github.com/searchspring/snap/tree/main/packages/snap-controller) <a href="https://www.npmjs.com/package/@searchspring/snap-controller"><img alt="NPM Status" src="https://img.shields.io/npm/v/@searchspring/snap-controller.svg?style=flat"></a>
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install --save @searchspring/snap-tracker
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Import
|
|
18
|
+
```typescript
|
|
19
|
+
import { Tracker } from '@searchspring/snap-tracker';
|
|
20
|
+
```
|
|
21
|
+
## Controller usage
|
|
22
|
+
Snap Tracker is a dependency of Snap Controller and Tracker events can be invoked via the `tracker` reference of any Snap Controller.
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
const globals = { siteId: 'abc123' };
|
|
26
|
+
const tracker = new Tracker(globals);
|
|
27
|
+
const controller = new SearchController(config, {
|
|
28
|
+
...
|
|
29
|
+
tracker,
|
|
30
|
+
...
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
console.log(tracker.track.product.click === controller.tracker.track.product.click) // true
|
|
34
|
+
console.log(tracker.track.product.click === window.searchspring.tracker.track.product.click) // true
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Standalone usage
|
|
38
|
+
Snap Tracker can also be used without a Snap Controller. Typically used to send events before an integration has gone live.
|
|
39
|
+
|
|
40
|
+
```typescript
|
|
41
|
+
const tracker = new Tracker();
|
|
42
|
+
const payload = {
|
|
43
|
+
type: BeaconType.CLICK,
|
|
44
|
+
category: BeaconCategory.INTERACTION,
|
|
45
|
+
event: {
|
|
46
|
+
intellisuggestData: '37d5578e1d1646ac97701a063ba84777',
|
|
47
|
+
intellisuggestSignature: '5739a2596d3b4161b041ce1764ffa04d',
|
|
48
|
+
href: '/product123'
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
tracker.track.event(payload)
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Tracking Events with DomTargeter
|
|
55
|
+
As an alternative method for tracking events, the Tracker utilizes the `DomTargeter` to look for script tags on the current page. These script tags must have a specific `type` attribute and data contents for the tracking to be used. These tracking script blocks ensure tracking events are sent when using asynchronous script execution and must be on the page prior to the `DOMContentLoaded` event to be picked up by initial targeting. If the script blocks are added after this event, the `retarget` method must be invoked.
|
|
56
|
+
|
|
57
|
+
### `retarget` method
|
|
58
|
+
This method will call the `retarget` method on all `DomTargeters` set in the Tracker. Typically this would be used when new tracking script blocks have been added to the page after initial targeting.
|
|
59
|
+
|
|
60
|
+
### Shopper Login Script Block
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<script type="searchspring/track/shopper/login">
|
|
64
|
+
id = 'snapdev';
|
|
65
|
+
</script>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Product View Script Block
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<script type="searchspring/track/product/view">
|
|
72
|
+
item = {
|
|
73
|
+
sku: 'product123',
|
|
74
|
+
childSku: 'product123_a',
|
|
75
|
+
};
|
|
76
|
+
</script>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Cart View Script Block
|
|
80
|
+
|
|
81
|
+
```html
|
|
82
|
+
<script type="searchspring/track/cart/view">
|
|
83
|
+
items = [
|
|
84
|
+
{
|
|
85
|
+
sku: 'product123',
|
|
86
|
+
childSku: 'product123_a',
|
|
87
|
+
qty: '1',
|
|
88
|
+
price: '9.99',
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
sku: 'product456',
|
|
92
|
+
childSku: 'product456_a',
|
|
93
|
+
qty: '2',
|
|
94
|
+
price: '10.99',
|
|
95
|
+
},
|
|
96
|
+
];
|
|
97
|
+
</script>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Order Transaction Script Block
|
|
101
|
+
|
|
102
|
+
```html
|
|
103
|
+
<script type="searchspring/track/order/transaction">
|
|
104
|
+
order = {
|
|
105
|
+
id: '123456',
|
|
106
|
+
total: '31.97',
|
|
107
|
+
city: 'Los Angeles',
|
|
108
|
+
state: 'CA',
|
|
109
|
+
country: 'US',
|
|
110
|
+
};
|
|
111
|
+
items = [
|
|
112
|
+
{
|
|
113
|
+
sku: 'product123',
|
|
114
|
+
childSku: 'product123_a',
|
|
115
|
+
qty: '1',
|
|
116
|
+
price: '9.99'
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
sku: 'product456',
|
|
120
|
+
childSku: 'product456_a',
|
|
121
|
+
qty: '2',
|
|
122
|
+
price: '10.99'
|
|
123
|
+
},
|
|
124
|
+
];
|
|
125
|
+
</script>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
## `track` methods
|
|
129
|
+
The Tracker object is exposed to the browser's `window` via the first Snap Controller that has been instantiated. This will use the `siteId` that has been provided to the Snap Tracker instance of the respective Controller Services. The Tracker contains various tracking methods available on the `track` object within it.
|
|
130
|
+
|
|
131
|
+
```typescript
|
|
132
|
+
window.searchspring.tracker.track
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
Each tracking method expects a data object which contains different attributes depending on the method.
|
|
136
|
+
|
|
137
|
+
```typescript
|
|
138
|
+
tracker.track.product.view({
|
|
139
|
+
sku: 'product123',
|
|
140
|
+
childSku: 'product123_a',
|
|
141
|
+
});
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
If a bundle is using multiple Snap Controllers with different `siteId`, an optional `siteId` parameter can be specified to overwrite any event `siteId`
|
|
145
|
+
|
|
146
|
+
```typescript
|
|
147
|
+
tracker.track.product.view({
|
|
148
|
+
sku: 'product123',
|
|
149
|
+
childSku: 'product123_a',
|
|
150
|
+
}, 'abc123');
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### Generic Event `track.event`
|
|
154
|
+
Creates and sends a generic beacon event. Parameter expects an Event Payload object.
|
|
155
|
+
If a `type` or `category` is not provided, a value of `'custom'` will be used.
|
|
156
|
+
|
|
157
|
+
```typescript
|
|
158
|
+
const payload = {
|
|
159
|
+
type: BeaconType.CLICK,
|
|
160
|
+
category: BeaconCategory.INTERACTION,
|
|
161
|
+
event: {
|
|
162
|
+
intellisuggestData: '37d5578e1d1646ac97701a063ba84777',
|
|
163
|
+
intellisuggestSignature: '5739a2596d3b4161b041ce1764ffa04d',
|
|
164
|
+
href: '/product123'
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
tracker.track.event(payload)
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
#### Event Payload
|
|
171
|
+
|
|
172
|
+
A beacon event payload object provided to the `track.event` method may contain the following:
|
|
173
|
+
|
|
174
|
+
`type` - BeaconType enum value or custom event type value. If not specified, `'custom'` will be used.
|
|
175
|
+
|
|
176
|
+
`category` - BeaconCategory enum value or custom event type value. If not specified, `'custom'` will be used.
|
|
177
|
+
|
|
178
|
+
`event` - object containing event data
|
|
179
|
+
|
|
180
|
+
`context.website.trackingCode` - optional `context` object that will be merged with constructed context object. Can be used to specify a different `siteId` value.
|
|
181
|
+
|
|
182
|
+
```typescript
|
|
183
|
+
const payload = {
|
|
184
|
+
type: BeaconType.CLICK,
|
|
185
|
+
category: BeaconCategory.INTERACTION,
|
|
186
|
+
event: {
|
|
187
|
+
intellisuggestData: '37d5578e1d1646ac97701a063ba84777',
|
|
188
|
+
intellisuggestSignature: '5739a2596d3b4161b041ce1764ffa04d',
|
|
189
|
+
href: '/product123',
|
|
190
|
+
},
|
|
191
|
+
context: {
|
|
192
|
+
website: {
|
|
193
|
+
trackingCode: 'abc123',
|
|
194
|
+
},
|
|
195
|
+
},
|
|
196
|
+
};
|
|
197
|
+
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
### Product Click `track.product.click`
|
|
201
|
+
Tracks product click events. It is reccomended to invoke on each product `onmousedown` event via the `result.track.click()` method. Various Snap controllers will expose these tracking events differently, see the controller documentation for details.
|
|
202
|
+
|
|
203
|
+
```jsx
|
|
204
|
+
searchController.store.results.map(result)=>{(
|
|
205
|
+
<a href={core.url} onMouseDown={(e)=>{result.track.click(e)}}>
|
|
206
|
+
)}
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
If invoking directly, the `intellisuggestData` and `intellisuggestSignature` values are returned from SearchSpring's Search API on each `result.attributes` object. An optional `href` value can also be provided.
|
|
210
|
+
|
|
211
|
+
```typescript
|
|
212
|
+
import { SearchController } from '@searchspring/snap-controller';
|
|
213
|
+
import { Tracker } from '@searchspring/snap-tracker';
|
|
214
|
+
const searchController = new SearchController({
|
|
215
|
+
...
|
|
216
|
+
tracker: new Tracker(),
|
|
217
|
+
...
|
|
218
|
+
}):
|
|
219
|
+
|
|
220
|
+
tracker.track.product.click({
|
|
221
|
+
intellisuggestData: '37d5578e1d1646ac97701a063ba84777',
|
|
222
|
+
intellisuggestSignature: '5739a2596d3b4161b041ce1764ffa04d',
|
|
223
|
+
href: '/product123',
|
|
224
|
+
});
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
### Product View `track.product.view`
|
|
228
|
+
Tracks product page views. Should be invoked from a product detail page. A `sku` and/or `childSku` are required.
|
|
229
|
+
|
|
230
|
+
```typescript
|
|
231
|
+
tracker.track.product.view({
|
|
232
|
+
sku: 'product123',
|
|
233
|
+
childSku: 'product123_a',
|
|
234
|
+
});
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
### Shopper Login `track.shopper.login`
|
|
238
|
+
Tracks user login and sets `context.shopperId` value. Should be invoked when a user has logged into their account.
|
|
239
|
+
|
|
240
|
+
```typescript
|
|
241
|
+
const shopperId = "snapdev"
|
|
242
|
+
tracker.track.shopper.login({
|
|
243
|
+
id: shopperId
|
|
244
|
+
});
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
### Cart View `track.cart.view`
|
|
248
|
+
Tracks cart contents. Should be invoked from a cart page. Each item object must contain a `qty`, `price`, (`sku` and/or `childSku`)
|
|
249
|
+
|
|
250
|
+
```typescript
|
|
251
|
+
tracker.track.cart.view({
|
|
252
|
+
items: [
|
|
253
|
+
{
|
|
254
|
+
sku: 'product123',
|
|
255
|
+
childSku: 'product123_a',
|
|
256
|
+
qty: '1',
|
|
257
|
+
price: '9.99',
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
sku: 'product456',
|
|
261
|
+
childSku: 'product456_a',
|
|
262
|
+
qty: '2',
|
|
263
|
+
price: '10.99',
|
|
264
|
+
},
|
|
265
|
+
]
|
|
266
|
+
});
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
### Order Transaction `track.order.transaction`
|
|
270
|
+
Tracks order transaction. Should be invoked from an order confirmation page. Expects an object with the following:
|
|
271
|
+
|
|
272
|
+
`order` - (optional) object containing the following
|
|
273
|
+
|
|
274
|
+
`order.id` - (optional) order id
|
|
275
|
+
|
|
276
|
+
`order.otal` - (optional) sub total of all items
|
|
277
|
+
|
|
278
|
+
`order.city` - (optional) city name
|
|
279
|
+
|
|
280
|
+
`order.state` - (optional) 2 digit state abbreviation (US only)
|
|
281
|
+
|
|
282
|
+
`order.country` - (optional) 2 digit country abbreviation (ie. 'US', 'CA', 'MX', 'PL', 'JP')
|
|
283
|
+
|
|
284
|
+
`order.items` - required array of items - same object provided to `track.cart.view` event
|
|
285
|
+
|
|
286
|
+
```typescript
|
|
287
|
+
tracker.track.order.transaction({
|
|
288
|
+
order: {
|
|
289
|
+
id: '123456',
|
|
290
|
+
total: '31.97',
|
|
291
|
+
city: 'Los Angeles',
|
|
292
|
+
state: 'CA',
|
|
293
|
+
country: 'US',
|
|
294
|
+
},
|
|
295
|
+
items: [
|
|
296
|
+
{
|
|
297
|
+
sku: 'product123',
|
|
298
|
+
childSku: 'product123_a',
|
|
299
|
+
qty: '1',
|
|
300
|
+
price: '9.99'
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
sku: 'product456',
|
|
304
|
+
childSku: 'product456_a',
|
|
305
|
+
qty: '2',
|
|
306
|
+
price: '10.99'
|
|
307
|
+
},
|
|
308
|
+
]
|
|
309
|
+
});
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
## Tracker properties
|
|
313
|
+
|
|
314
|
+
### `globals` property
|
|
315
|
+
When constructing an instance of `Tracker`, a globals object is required to be constructed. This object contains a `siteId` key and value.
|
|
316
|
+
|
|
317
|
+
```typescript
|
|
318
|
+
const globals = { siteId: 'abc123' };
|
|
319
|
+
const tracker = new Tracker(globals);
|
|
320
|
+
console.log(tracker.globals === globals) // true
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
### `localStorage` property
|
|
324
|
+
A reference to the StorageStore object for accessing Tracker local storage.
|
|
325
|
+
|
|
326
|
+
```typescript
|
|
327
|
+
const tracker = new Tracker();
|
|
328
|
+
tracker.localStorage.set('key', 'value')
|
|
329
|
+
tracker.localStorage.get('key') // 'value'
|
|
330
|
+
```
|
|
331
|
+
|
|
332
|
+
|
|
333
|
+
### `context` property
|
|
334
|
+
The `context` property is generated at the time of instantiating Tracker. It is part of each event payload and provides context of the event.
|
|
335
|
+
|
|
336
|
+
`userId` - unique ID to identify the user, persisted in a cookie/local storage fallback
|
|
337
|
+
|
|
338
|
+
`pageLoadId` - unique ID generated at the time of instantiating Tracker
|
|
339
|
+
|
|
340
|
+
`sessionId` - unique ID generated at the start of a new browser session, persisted in session storage/cookie fallback
|
|
341
|
+
|
|
342
|
+
`shopperId` - unique ID provided set via the SearchController `SearchController.tracker.track.shopper.login` event and then persisted in a cookie
|
|
343
|
+
|
|
344
|
+
`website.trackingCode` - the `siteId` specified in the globals object
|
|
345
|
+
|
|
346
|
+
```typescript
|
|
347
|
+
context: {
|
|
348
|
+
userId: '0560d7e7-148a-4b1d-b12c-924f164d3d00',
|
|
349
|
+
pageLoadId: 'cfb75606-c15b-4f25-a711-9de2c5d22660',
|
|
350
|
+
sessionId: 'f4b25c96-9ca1-4ac6-ad04-f5ce933f8b61',
|
|
351
|
+
shopperId: 'shopper0001',
|
|
352
|
+
website: {
|
|
353
|
+
trackingCode: 'abc123',
|
|
354
|
+
},
|
|
355
|
+
}
|
|
356
|
+
```
|
|
357
|
+
|
|
358
|
+
### `isSending` property
|
|
359
|
+
The `isSending` property contains the return value from `setTimeout` and when defined, signifys that an event is being sent to the beacon endpoint. If subsequent events are invoked and `isSending` is still defined, the incoming event will be added to the event queue to be sent at a later time.
|
|
360
|
+
|
|
361
|
+
### `namespace` property
|
|
362
|
+
The `namespace` property contains the Tracker namespace. Invoking this method is only required if a bundle contains multiple Tracker instances.
|
|
363
|
+
|
|
364
|
+
### `track` property
|
|
365
|
+
The `track` property contains various tracking events. See `track` methods section above.
|
|
366
|
+
|
|
367
|
+
### `getUserId` method
|
|
368
|
+
Returns an object containing the `userId` stored in the `ssUserId` cookie (with a fallback to localstorage.) If key doesn't exist, a new ID will be generated, saved to cookie/localstorage, and returned.
|
|
369
|
+
|
|
370
|
+
```typescript
|
|
371
|
+
const tracker = new Tracker();
|
|
372
|
+
|
|
373
|
+
console.log(tracker.getUserId())
|
|
374
|
+
// { userId: '0560d7e7-148a-4b1d-b12c-924f164d3d00' }
|
|
375
|
+
```
|
|
376
|
+
|
|
377
|
+
### `getSessionId` method
|
|
378
|
+
Returns an object containing the `sessionId` stored in the `ssSessionIdNamespace` session storage (with a fallback to cookies.) If key doesn't exist, a new ID will be generated, saved to session storage/cookie, and returned.
|
|
379
|
+
|
|
380
|
+
```typescript
|
|
381
|
+
const tracker = new Tracker();
|
|
382
|
+
|
|
383
|
+
console.log(tracker.getSessionId())
|
|
384
|
+
// { sessionId: 'f4b25c96-9ca1-4ac6-ad04-f5ce933f8b61' }
|
|
385
|
+
```
|
|
386
|
+
|
|
387
|
+
### `getShopperId` method
|
|
388
|
+
Returns an object containing the `shopperId` stored in the `ssShopperId` cookie. This value is set via the SearchController `SearchController.tracker.track.shopper.login` event
|
|
389
|
+
|
|
390
|
+
```typescript
|
|
391
|
+
const tracker = new Tracker();
|
|
392
|
+
|
|
393
|
+
console.log(tracker.getShopperId())
|
|
394
|
+
// { shopperId: 'shopper0001' }
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
### `cookies` property
|
|
398
|
+
The `cookies` property provides access to the `cart` and `viewed` tracking cookies.
|
|
399
|
+
|
|
400
|
+
#### `cookies.cart.get` method
|
|
401
|
+
Returns an array of strings containing the `sku` of each item last registered as being in the shopping cart. This value is stored in the `ssCartProducts` cookie and is set via the calls to the `tracker.track.cart.view` event.
|
|
402
|
+
|
|
403
|
+
```typescript
|
|
404
|
+
const tracker = new Tracker();
|
|
405
|
+
|
|
406
|
+
console.log(tracker.cookies.cart.get())
|
|
407
|
+
// ['sku1', 'sku2']
|
|
408
|
+
```
|
|
409
|
+
|
|
410
|
+
#### `cookies.cart.add` method
|
|
411
|
+
Provides a means of adding cart products to the `ssCartProducts` cookie.
|
|
412
|
+
|
|
413
|
+
```typescript
|
|
414
|
+
const tracker = new Tracker();
|
|
415
|
+
|
|
416
|
+
console.log(tracker.cookies.cart.get());
|
|
417
|
+
// ['sku1', 'sku2']
|
|
418
|
+
|
|
419
|
+
console.log(tracker.cookies.cart.add(['sku3']));
|
|
420
|
+
// ['sku1', 'sku2', 'sku3']
|
|
421
|
+
```
|
|
422
|
+
|
|
423
|
+
#### `cookies.cart.remove` method
|
|
424
|
+
Provides a means for removing `skus` from the `ssCartProducts` cookie.
|
|
425
|
+
|
|
426
|
+
```typescript
|
|
427
|
+
const tracker = new Tracker();
|
|
428
|
+
|
|
429
|
+
console.log(tracker.cookies.cart.get());
|
|
430
|
+
// ['sku1', 'sku2']
|
|
431
|
+
|
|
432
|
+
tracker.cookies.cart.remove(['sku1']);
|
|
433
|
+
// ['sku2']
|
|
434
|
+
```
|
|
435
|
+
|
|
436
|
+
#### `cookies.cart.set` method
|
|
437
|
+
Provides a means of setting the `ssCartProducts` cookie via an array of product `skus`.
|
|
438
|
+
|
|
439
|
+
```typescript
|
|
440
|
+
const tracker = new Tracker();
|
|
441
|
+
|
|
442
|
+
tracker.cookies.cart.set(['sku1', 'sku2']);
|
|
443
|
+
// ['sku1', 'sku2']
|
|
444
|
+
```
|
|
445
|
+
|
|
446
|
+
#### `cookies.cart.clear` method
|
|
447
|
+
Empties the `ssCartProducts` cookie.
|
|
448
|
+
|
|
449
|
+
```typescript
|
|
450
|
+
const tracker = new Tracker();
|
|
451
|
+
|
|
452
|
+
tracker.cookies.cart.clear();
|
|
453
|
+
```
|
|
454
|
+
|
|
455
|
+
#### `cookies.viewed.get` method
|
|
456
|
+
Returns an array of strings containing the `sku` of items which have been viewed. This value is stored in the `ssViewedProducts` cookie and is set via the calls to the `tracker.track.product.view` event.
|
|
457
|
+
|
|
458
|
+
```typescript
|
|
459
|
+
const tracker = new Tracker();
|
|
460
|
+
|
|
461
|
+
console.log(tracker.cookies.viewed.get());
|
|
462
|
+
// ['sku1', 'sku2']
|
|
463
|
+
```
|
|
464
|
+
|
|
465
|
+
### `sendEvents` method
|
|
466
|
+
Sends event(s) to beacon (and various legacy) endpoint(s).
|
|
467
|
+
|
|
468
|
+
```typescript
|
|
469
|
+
const tracker = new Tracker();
|
|
470
|
+
const event1 = new BeaconEvent();
|
|
471
|
+
const event2 = new BeaconEvent();
|
|
472
|
+
tracker.sendEvents([event1, event2])
|
|
473
|
+
```
|
|
474
|
+
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { BeaconPayload } from './types';
|
|
2
|
+
export declare class BeaconEvent implements BeaconPayload {
|
|
3
|
+
type: any;
|
|
4
|
+
category: any;
|
|
5
|
+
context: any;
|
|
6
|
+
event: any;
|
|
7
|
+
meta: any;
|
|
8
|
+
id: any;
|
|
9
|
+
pid?: any;
|
|
10
|
+
constructor(payload: BeaconPayload);
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=BeaconEvent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BeaconEvent.d.ts","sourceRoot":"","sources":["../../src/BeaconEvent.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,qBAAa,WAAY,YAAW,aAAa;IAChD,IAAI,MAAC;IACL,QAAQ,MAAC;IACT,OAAO,MAAC;IACR,KAAK,MAAC;IACN,IAAI,MAAC;IACL,EAAE,MAAC;IACH,GAAG,CAAC,MAAC;gBAEO,OAAO,EAAE,aAAa;CAYlC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.BeaconEvent = void 0;
|
|
4
|
+
var uuid_1 = require("uuid");
|
|
5
|
+
var snap_toolbox_1 = require("@searchspring/snap-toolbox");
|
|
6
|
+
var BeaconEvent = /** @class */ (function () {
|
|
7
|
+
function BeaconEvent(payload) {
|
|
8
|
+
var _this = this;
|
|
9
|
+
Object.keys(payload).forEach(function (key) {
|
|
10
|
+
_this[key] = payload[key];
|
|
11
|
+
});
|
|
12
|
+
this.meta = {
|
|
13
|
+
initiator: {
|
|
14
|
+
lib: 'searchspring/snap',
|
|
15
|
+
'lib.version': snap_toolbox_1.version,
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
this.id = (0, uuid_1.v4)();
|
|
19
|
+
}
|
|
20
|
+
return BeaconEvent;
|
|
21
|
+
}());
|
|
22
|
+
exports.BeaconEvent = BeaconEvent;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ProductViewEvent, OrderTransactionEvent, BeaconPayload, CartViewEvent } from './types';
|
|
2
|
+
export declare class PixelEvent {
|
|
3
|
+
endpoint: string;
|
|
4
|
+
src: string;
|
|
5
|
+
img: HTMLImageElement;
|
|
6
|
+
event: ProductViewEvent | CartViewEvent | OrderTransactionEvent;
|
|
7
|
+
constructor(payload: BeaconPayload);
|
|
8
|
+
}
|
|
9
|
+
//# sourceMappingURL=PixelEvent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PixelEvent.d.ts","sourceRoot":"","sources":["../../src/PixelEvent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,aAAa,EAAE,aAAa,EAAkB,MAAM,SAAS,CAAC;AAEhH,qBAAa,UAAU;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,gBAAgB,CAAC;IACtB,KAAK,EAAE,gBAAgB,GAAG,aAAa,GAAG,qBAAqB,CAAC;gBAEpD,OAAO,EAAE,aAAa;CAkDlC"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PixelEvent = void 0;
|
|
4
|
+
var snap_toolbox_1 = require("@searchspring/snap-toolbox");
|
|
5
|
+
var types_1 = require("./types");
|
|
6
|
+
var PixelEvent = /** @class */ (function () {
|
|
7
|
+
function PixelEvent(payload) {
|
|
8
|
+
var _this = this;
|
|
9
|
+
this.endpoint = "https://d3cgm8py10hi0z.cloudfront.net/is.gif";
|
|
10
|
+
this.src =
|
|
11
|
+
this.endpoint +
|
|
12
|
+
"?s=".concat(encodeURIComponent(payload.context.website.trackingCode)) +
|
|
13
|
+
"&u=".concat(encodeURIComponent(payload.context.userId)) +
|
|
14
|
+
"&ce=".concat(snap_toolbox_1.featureFlags.cookies ? '1' : '0') +
|
|
15
|
+
"&pt=".concat(encodeURIComponent(document.title)) +
|
|
16
|
+
"&v=1" + // version always '1'? or set to snap package version?
|
|
17
|
+
"&x=".concat(Math.floor(Math.random() * 2147483647)) +
|
|
18
|
+
"".concat(window.document.referrer ? "&r=".concat(encodeURIComponent(window.document.referrer)) : '');
|
|
19
|
+
switch (payload.category) {
|
|
20
|
+
case types_1.BeaconCategory.PAGEVIEW:
|
|
21
|
+
this.event = payload.event;
|
|
22
|
+
this.src += '&a=viewItem';
|
|
23
|
+
if (this.event.sku) {
|
|
24
|
+
this.src += "&sku=".concat(encodeURIComponent(this.event.sku));
|
|
25
|
+
}
|
|
26
|
+
break;
|
|
27
|
+
case types_1.BeaconCategory.CARTVIEW:
|
|
28
|
+
this.event = payload.event;
|
|
29
|
+
this.src += '&a=basket';
|
|
30
|
+
this.event.items.forEach(function (item) {
|
|
31
|
+
if (item.sku) {
|
|
32
|
+
_this.src += "&item=".concat(encodeURIComponent(item.sku), ";").concat(encodeURIComponent((item === null || item === void 0 ? void 0 : item.qty) || ''), ";").concat(encodeURIComponent((item === null || item === void 0 ? void 0 : item.price) || ''), ";");
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
break;
|
|
36
|
+
case types_1.BeaconCategory.ORDERVIEW:
|
|
37
|
+
var _a = (this.event = payload.event), orderId = _a.orderId, total = _a.total, city = _a.city, state = _a.state, country = _a.country, items = _a.items;
|
|
38
|
+
this.src += "&a=sale";
|
|
39
|
+
if (orderId)
|
|
40
|
+
this.src += "&orderId=".concat(encodeURIComponent(orderId));
|
|
41
|
+
if (total)
|
|
42
|
+
this.src += "&total=".concat(encodeURIComponent(total));
|
|
43
|
+
if (city)
|
|
44
|
+
this.src += "&city=".concat(encodeURIComponent(city));
|
|
45
|
+
if (state)
|
|
46
|
+
this.src += "&state=".concat(encodeURIComponent(state));
|
|
47
|
+
if (country)
|
|
48
|
+
this.src += "&country=".concat(encodeURIComponent(country));
|
|
49
|
+
items.forEach(function (item) {
|
|
50
|
+
if (item.sku) {
|
|
51
|
+
_this.src += "&item=".concat(encodeURIComponent(item.sku), ";").concat(encodeURIComponent((item === null || item === void 0 ? void 0 : item.qty) || ''), ";").concat(encodeURIComponent((item === null || item === void 0 ? void 0 : item.price) || ''), ";");
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
break;
|
|
55
|
+
}
|
|
56
|
+
if (this.src.includes('&a=')) {
|
|
57
|
+
this.img = new Image(1, 1);
|
|
58
|
+
this.img.src = this.src; // setting src immediately invokes a request
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
return PixelEvent;
|
|
62
|
+
}());
|
|
63
|
+
exports.PixelEvent = PixelEvent;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { BeaconPayload } from './types';
|
|
2
|
+
export declare class TrackEvent {
|
|
3
|
+
intellisuggestData: string;
|
|
4
|
+
intellisuggestSignature: string;
|
|
5
|
+
href?: string;
|
|
6
|
+
endpoint: string;
|
|
7
|
+
src: string;
|
|
8
|
+
img: HTMLImageElement;
|
|
9
|
+
constructor(payload: BeaconPayload);
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=TrackEvent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TrackEvent.d.ts","sourceRoot":"","sources":["../../src/TrackEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,aAAa,EAAE,MAAM,SAAS,CAAC;AAE3D,qBAAa,UAAU;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,uBAAuB,EAAE,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,gBAAgB,CAAC;gBAEV,OAAO,EAAE,aAAa;CA6BlC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.TrackEvent = void 0;
|
|
4
|
+
var TrackEvent = /** @class */ (function () {
|
|
5
|
+
function TrackEvent(payload) {
|
|
6
|
+
var _a, _b, _c;
|
|
7
|
+
payload.event = payload.event;
|
|
8
|
+
if (!payload.context || !payload.event) {
|
|
9
|
+
throw 'TrackEvent: object parameter required a valid `context` BeaconContext and `event` ProductClickEvent objects';
|
|
10
|
+
}
|
|
11
|
+
if (!((_a = payload.event) === null || _a === void 0 ? void 0 : _a.intellisuggestData) || !((_b = payload.event) === null || _b === void 0 ? void 0 : _b.intellisuggestSignature)) {
|
|
12
|
+
throw 'TrackEvent: object parameter `event` ProductClickEvent object requires valid intellisuggestData and intellisuggestSignature values. These are the corresponding attributes in the Searchspring API response.';
|
|
13
|
+
}
|
|
14
|
+
this.intellisuggestData = payload.event.intellisuggestData;
|
|
15
|
+
this.intellisuggestSignature = payload.event.intellisuggestSignature;
|
|
16
|
+
this.href = ((_c = payload.event) === null || _c === void 0 ? void 0 : _c.href) || '';
|
|
17
|
+
this.endpoint = "https://".concat(payload.context.website.trackingCode, ".a.searchspring.io/api/track/track.json");
|
|
18
|
+
this.src =
|
|
19
|
+
this.endpoint +
|
|
20
|
+
"?d=".concat(encodeURIComponent(this.intellisuggestData)) +
|
|
21
|
+
"&s=".concat(encodeURIComponent(this.intellisuggestSignature)) +
|
|
22
|
+
"&u=".concat(encodeURIComponent(this.href));
|
|
23
|
+
if (window.document.referrer) {
|
|
24
|
+
this.src += "&r=".concat(encodeURIComponent(window.document.referrer));
|
|
25
|
+
}
|
|
26
|
+
this.img = new Image(1, 1);
|
|
27
|
+
this.img.src = this.src; // setting src immediately invokes a request
|
|
28
|
+
}
|
|
29
|
+
return TrackEvent;
|
|
30
|
+
}());
|
|
31
|
+
exports.TrackEvent = TrackEvent;
|