Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tracking Product id #1111

Merged
merged 2 commits into from
Jul 26, 2024
Merged

Tracking Product id #1111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5d4fea8
refactor(tracker): adding possibility of using `id` in events
korgon Jul 15, 2024
ce32d44
refactor(tracker): changing `id` -> `uid` adding support for supplyin…
korgon Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 26 additions & 6 deletions docs/INTEGRATION_TRACKING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,15 @@ searchspring.tracker.track.shopper.login({
```

### Product View
Tracks product page views. Should only be installed on product detail pages. A `sku` and/or `childSku` are required.
Tracks product page views. Should only be installed on product detail pages. A `uid` and/or `sku` and/or `childSku` and/or `childUid` are required (provide as many of these product identifiers that are available).

```html
<script type="searchspring/track/product/view">
item = {
uid: '123',
sku: 'product123',
childSku: 'product123_a',
childUid: '123_a',
childSku: 'product123_a'
};
</script>
```
Expand All @@ -34,28 +36,34 @@ Alternatively, this can also be integrated using the `searchspring.tracker.track

```typescript
searchspring.tracker.track.product.view({
uid: '123',
sku: 'product123',
childSku: 'product123_a',
childUid: '123_a',
childSku: 'product123_a'
});
```


### Cart View
Tracks cart contents. Should only be installed on a cart page. If the checkout process does not contain a dedicated cart page (ie. slideout cart) then this method should be invoked when the cart comes into view.

Each item object must contain a `qty`, `price`, (`sku` and/or `childSku`)
Each item object must contain a `qty`, `price`, (`uid` and/or `sku` and/or `childSku` and/or `childUid` - provide as many of these product identifiers that are available).

```html
<script type="searchspring/track/cart/view">
items = [
{
uid: '123',
sku: 'product123',
childUid: '123_a',
childSku: 'product123_a',
qty: '1',
price: '9.99',
},
{
uid: '456',
sku: 'product456',
childUid: '456_a',
childSku: 'product456_a',
qty: '2',
price: '10.99',
Expand All @@ -70,13 +78,17 @@ Alternatively, this can also be integrated using the `searchspring.tracker.track
searchspring.tracker.track.cart.view({
items: [
{
uid: '123',
sku: 'product123',
childUid: '123_a',
childSku: 'product123_a',
qty: '1',
price: '9.99',
},
{
uid: '456',
sku: 'product456',
childUid: '456_a',
childSku: 'product456_a',
qty: '2',
price: '10.99',
Expand Down Expand Up @@ -117,13 +129,17 @@ Tracks order transaction. Should be invoked from an order confirmation page. Exp
};
items = [
{
uid: '123',
sku: 'product123',
childUid: '123_a',
childSku: 'product123_a',
qty: '1',
price: '9.99'
},
{
uid: '456',
sku: 'product456',
childUid: '456_a',
childSku: 'product456_a',
qty: '2',
price: '10.99'
Expand All @@ -146,13 +162,17 @@ searchspring.tracker.track.order.transaction({
},
items: [
{
uid: '123',
sku: 'product123',
childUid: '123_a',
childSku: 'product123_a',
qty: '1',
price: '9.99'
},
{
uid: '456',
sku: 'product456',
childUid: '456_a',
childSku: 'product456_a',
qty: '2',
price: '10.99'
Expand Down Expand Up @@ -202,7 +222,7 @@ Adding the following attributes to clickable cart elements allows for real-time
If you are using multiple custom Tracker instances with a different tracker `config.id`, attributes are namespaced by the trackers `id` (Default: `'track'`, Example: `ss-track-cart-add`)

### Add to cart
Adds product `sku` (or `childSku`) to `ssCartProducts` cookie. Supports multiple skus using a comma delimiter.
Adds product `uid` or `sku` (or `childSku`/`childUid`) to `ssCartProducts` cookie. It is preferable to use the more specific variant `childSku` or `childUid` if available. Supports multiple products using a comma delimiter.

```html
<button ss-track-cart-add='product123'>Add to cart</button>
Expand All @@ -216,7 +236,7 @@ searchspring.tracker.cookies.cart.add(['product123'])


### Remove from cart
Removes product `sku` (or `childSku`) from `ssCartProducts` cookie. Supports multiple skus using a comma delimiter.
Removes product `uid` or `sku` (or `childSku`/`childUid`) to `ssCartProducts` cookie. It is preferable to use the more specific variant `childSku` or `childUid` if available. Supports multiple products using a comma delimiter.

```html
<button ss-track-cart-remove='product123'>Remove</button>
Expand Down
2 changes: 2 additions & 0 deletions packages/snap-preact-demo/public/cart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,11 +244,13 @@ <h3>Answer To Your Layers Butterscotch Yellow Top</h3>
<script type="searchspring/track/cart/view">
items = [
{
uid: "182146",
sku: "C-AD-W1-1869P",
qty: 1,
price: 48
},
{
uid: "174287",
sku: "C-AD-Y5-814MD",
qty: 1,
price: 36
Expand Down
2 changes: 2 additions & 0 deletions packages/snap-preact-demo/public/order.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,11 +210,13 @@ <h2>Order Confirmation</h2>
<script type="searchspring/track/order/transaction">
items = [
{
uid: "99688",
sku: "C-BP-G7-B1469",
qty: "1",
price: "22"
},
{
uid: "181655",
sku: "C-VJ-P2-32007",
qty: "1",
price: "39"
Expand Down
1 change: 1 addition & 0 deletions packages/snap-preact-demo/public/product.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,7 @@ <h2 id="name">Stripe Out Off-The-Shoulder Dress</h2>

<script type="searchspring/track/product/view">
item = {
uid: "182146",
sku: "C-AD-W1-1869P"
};
</script>
Expand Down
38 changes: 34 additions & 4 deletions packages/snap-preact-demo/tests/cypress/e2e/tracking/track.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,15 @@ import { BeaconType, BeaconCategory } from '@searchspring/snap-tracker';

describe('Tracking', () => {
beforeEach(() => {
cy.clearCookies();

cy.on('window:before:load', (win) => {
win.mergeSnapConfig = {
mode: 'production',
};
});

cy.wait(1000);
});
it('tracked shopper login', () => {
cy.visit('https://localhost:2222');
Expand Down Expand Up @@ -89,6 +93,7 @@ describe('Tracking', () => {
expect(beacon.category).to.equal(BeaconCategory.PAGEVIEW);

expect(beacon.event).to.be.an('object').to.include.all.keys(['sku']);
expect(beacon.event.uid).to.equal('182146');
expect(beacon.event.sku).to.equal('C-AD-W1-1869P');
});

Expand Down Expand Up @@ -122,8 +127,20 @@ describe('Tracking', () => {
expect(beacon.event).to.have.property('items');
expect(beacon.event.items).to.be.an('array').to.have.length(2);

expect(beacon.event.items[0]).to.be.an('object').include.all.keys(['sku', 'qty', 'price']);
expect(beacon.event.items[1]).to.be.an('object').include.all.keys(['sku', 'qty', 'price']);
expect(beacon.event.items[0]).to.be.an('object').include.all.keys(['uid', 'sku', 'qty', 'price']);
expect(beacon.event.items[1]).to.be.an('object').include.all.keys(['uid', 'sku', 'qty', 'price']);
expect(beacon.event.items[0]).to.deep.equal({
uid: '182146',
sku: 'C-AD-W1-1869P',
qty: '1',
price: '48',
});
expect(beacon.event.items[1]).to.deep.equal({
uid: '174287',
sku: 'C-AD-Y5-814MD',
qty: '1',
price: '36',
});
});

cy.wait('@pixel').should((interception) => {
Expand Down Expand Up @@ -159,8 +176,21 @@ describe('Tracking', () => {
expect(beacon.event).to.have.property('items');
expect(beacon.event.items).to.be.an('array').to.have.length(2);

expect(beacon.event.items[0]).to.be.an('object').include.all.keys(['sku', 'qty', 'price']);
expect(beacon.event.items[1]).to.be.an('object').include.all.keys(['sku', 'qty', 'price']);
expect(beacon.event.items[0]).to.be.an('object').include.all.keys(['uid', 'sku', 'qty', 'price']);
expect(beacon.event.items[1]).to.be.an('object').include.all.keys(['uid', 'sku', 'qty', 'price']);

expect(beacon.event.items[0]).to.deep.equal({
uid: '99688',
sku: 'C-BP-G7-B1469',
qty: '1',
price: '22',
});
expect(beacon.event.items[1]).to.deep.equal({
uid: '181655',
sku: 'C-VJ-P2-32007',
qty: '1',
price: '39',
});
});

cy.wait('@pixel').should((interception) => {
Expand Down
32 changes: 28 additions & 4 deletions packages/snap-tracker/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,9 @@ This method will call the `retarget` method on all `DomTargeters` set in the Tra
```html
<script type="searchspring/track/product/view">
item = {
uid: '123',
sku: 'product123',
childUid: '123_a',
childSku: 'product123_a',
};
</script>
Expand All @@ -95,13 +97,17 @@ This method will call the `retarget` method on all `DomTargeters` set in the Tra
<script type="searchspring/track/cart/view">
items = [
{
uid: '123',
sku: 'product123',
childUid: '123_a',
childSku: 'product123_a',
qty: '1',
price: '9.99',
},
{
uid: '456',
sku: 'product456',
childUid: '456_a',
childSku: 'product456_a',
qty: '2',
price: '10.99',
Expand All @@ -124,13 +130,17 @@ This method will call the `retarget` method on all `DomTargeters` set in the Tra
};
items = [
{
uid: '123',
sku: 'product123',
childUid: '123_a',
childSku: 'product123_a',
qty: '1',
price: '9.99'
},
{
uid: '456',
sku: 'product456',
childUid: '456_a',
childSku: 'product456_a',
qty: '2',
price: '10.99'
Expand All @@ -150,7 +160,9 @@ Each tracking method expects a data object which contains different attributes d

```typescript
tracker.track.product.view({
uid: '123',
sku: 'product123',
childUid: '123_a',
childSku: 'product123_a',
});
```
Expand All @@ -159,7 +171,9 @@ If a bundle is using multiple Snap Controllers with different `siteId`, an optio

```typescript
tracker.track.product.view({
uid: '123',
sku: 'product123',
childUid: '123_a',
childSku: 'product123_a',
}, 'abc123');
```
Expand Down Expand Up @@ -269,11 +283,13 @@ tracker.track.product.click({
```

### Product View `track.product.view`
Tracks product page views. Should be invoked from a product detail page. A `sku` and/or `childSku` are required.
Tracks product page views. Should be invoked from a product detail page. A `uid` and/or `sku` and/or `childUid` and/or `childSku` are required.

```typescript
tracker.track.product.view({
ud: '123',
sku: 'product123',
childUid: '123_a',
childSku: 'product123_a',
});
```
Expand All @@ -289,19 +305,23 @@ tracker.track.shopper.login({
```

### Cart View `track.cart.view`
Tracks cart contents. Should be invoked from a cart page. Each item object must contain a `qty`, `price`, (`sku` and/or `childSku`)
Tracks cart contents. Should be invoked from a cart page. Each item object must contain a `qty`, `price`, (`uid` and/or `sku` and/or `childUid` and/or `childSku`)

```typescript
tracker.track.cart.view({
items: [
{
uid: '123',
sku: 'product123',
childUid: '123_a',
childSku: 'product123_a',
qty: '1',
price: '9.99',
},
{
uid: '456',
sku: 'product456',
childUid: '456_a',
childSku: 'product456_a',
qty: '2',
price: '10.99',
Expand Down Expand Up @@ -341,13 +361,17 @@ tracker.track.order.transaction({
},
items: [
{
uid: '123',
sku: 'product123',
childUid: '123_a',
childSku: 'product123_a',
qty: '1',
price: '9.99'
},
{
uid: '456',
sku: 'product456',
childUid: '456_a',
childSku: 'product456_a',
qty: '2',
price: '10.99'
Expand Down Expand Up @@ -460,7 +484,7 @@ console.log(tracker.getShopperId())
The `cookies` property provides access to the `cart` and `viewed` tracking cookies.

#### `cookies.cart.get` method
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.
Returns an array of strings containing the `uids` and/or `skus` 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.

```typescript
const tracker = new Tracker();
Expand Down Expand Up @@ -515,7 +539,7 @@ tracker.cookies.cart.clear();
```

#### `cookies.viewed.get` method
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.
Returns an array of strings containing the `uids` and/or `skus` 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.

```typescript
const tracker = new Tracker();
Expand Down
Loading
Loading