Quick Start

👋 Hi there. Here’s a quick instruction on how to install Logger and track events on your website:

Add script tag into the page

To start logging you’ll need to insert scripts on the page:

index.html - Remote files importing
<body>
    ...
    <!--
        Import JavaScript file.
        Prefered location is in the bottom of the body tag following by initialization script.
    -->
    <script src="https://code.yesplz.ai/stylefilter/<RETAILER CODE>/<VERSION>/stylefilter.js"></script>
    <script>
        // Initialize Logger in the global area
        window.yesplz.Logger.init();
    </script>
</body>

<VERSION> can be latest or staging.

Initialize

This module requires initialization to track events.
Call it from a global area that applies to all pages.

// Option 1, initialize without user ID and profile
window.yesplz.Logger.init();

// Option 2, initialize with user ID and profile if it's already known
window.yesplz.Logger.init({
   user_id: 'USER_ID', // unique identifier
   user_pfopertires: { // optional user properties
       name: 'USER_NAME', // user name,
       custom_property1: '', // any custom propertires that you want to pass
       custom_property2: '',
       ...
   } 
});

Identify User

If your application has a login system that you want to track users with, call setUser to update the user's identifier.

// When user logs in
window.yesplz.Logger.setUser('USER_ID', { // optional user properties
    name: 'USER_NAME', // user name,
    custom_property1: '', // any custom propertires that you want to pass
    custom_property2: '',
    ...
});

ㅤ
Call reset() to clear data attributed to a user when that user logs out and the session is expired.

// When user logs out or session is expired
window.yesplz.Logger.reset();

Track Events

Add this code snippet to events like “Purchase” and any additional events that may track the core features of your product.
Events represent how users interact with your e-commerce site.

Track events using defined event types

Replace Purchase with an event type that makes sense for the situation. Check the below Event Types.

All events sent from the JavaScript library will be sent over HTTPS. ㅤ

Event Types

The following events are based on the GA E-commerce standard.

Event Type	Description	Required Properties
`ViewItem`	User views a product detail page (Previously `ViewProduct`)	`currency`: string `value`: number `items`: object[]
`FavoriteProduct`	User marks a product as a favorite	`id`: string (Product ID)
`UnFavoriteProduct`	User removes a product from their favorites	`id`: string (Product ID)
`AddToCart`	User adds a product to their shopping cart	`currency`: string `value`: number `items`: object[] `id`: string (Deprecated)
`RemoveFromCart`	User removes a product from their shopping cart	`currency`: string `value`: number `items`: object[] `id`: string (Deprecated)
`Purchase`	User completes a purchase of a product	`currency`: string `value`: number `transaction_id`: string `items`: object[] `id`: string (Deprecated)
`ViewBrand`	User views a brand page	`id`: string (Brand name)
`FavoriteBrand`	User marks a brand as a favorite	`id`: string (Brand name)
`UnFavoriteBrand`	User removes a brand from their favorites	`id`: string (Brand name)

Event Parameters Details

info

Our event tracking follows the Google Analytics 4 E-commerce events standard for consistent data collection and reporting.

Common E-commerce Event Parameters

The following parameters are used across multiple e-commerce events (ViewItem, AddToCart, RemoveFromCart, Purchase):

Name	Type	Required	Example value	Description
`currency`	string	Yes*	`USD`	Currency of the items associated with the event, in 3-letter ISO 4217 format. *If you set `value` then `currency` is required for revenue metrics to be computed accurately.
`value`	number	Yes*	`30.03`	The monetary value of the event. Set `value` to the sum of (price × quantity) for all items in `items`. Don't include shipping or tax. `value` is typically required for meaningful reporting. If you mark the event as a key event then it's recommended you set `value`. *`currency` is required if you set `value`.
`items`	`Array<Item>`	Yes	See below	The items for the event. See `items` object schema below for details.
`transaction_id`	string	Yes*	`T_12345`	The unique identifier of a transaction. *Required only for `Purchase` event.

items, items_USD object schema

Name	Type	Required	Example value	Description
`item_id`	string	Yes*	`PRODUCT_SKU_7890`	The ID of the item. *One of `item_id` or `item_name` is required.
`item_name`	string	Yes*	`Awesome T-Shirt`	The name of the item. *One of `item_id` or `item_name` is required.
`price`	number	No	`25.99`	The monetary unit price of the item, in units of the specified currency parameter. If a discount applies to the item, set price to the discounted unit price and specify the unit price discount in the discount parameter.
`quantity`	number	No	`2`	Item quantity. If not set, quantity is set to 1.
`affiliation`	string	No	`My Online Store`	A product affiliation to designate a supplying company or brick and mortar store location. Note: `affiliation` is only available at the item-scope.
`coupon`	string	No	`SAVE20`	The coupon name/code associated with the item. Event-level and item-level coupon parameters are independent.
`discount`	number	No	`5.00`	The unit monetary discount value associated with the item.
`index`	number	No	`1`	The index/position of the item in a list.
`item_brand`	string	No	`BrandX`	The brand of the item.
`item_category`	string	No	`Electronics`	The category of the item. If used as part of a category hierarchy or taxonomy then this will be the first category.
`item_category2`	string	No	`Smartphones`	The second category hierarchy or additional taxonomy for the item.
`item_category3`	string	No	`Android`	The third category hierarchy or additional taxonomy for the item.
`item_category4`	string	No	`Flagship`	The fourth category hierarchy or additional taxonomy for the item.
`item_category5`	string	No	`Large Screen`	The fifth category hierarchy or additional taxonomy for the item.
`item_list_id`	string	No	`homepage_carousel`	The ID of the list in which the item was presented to the user. If set, event-level `item_list_id` is ignored. If not set, event-level `item_list_id` is used, if present.
`item_list_name`	string	No	`Homepage Carousel`	The name of the list in which the item was presented to the user. If set, event-level `item_list_name` is ignored. If not set, event-level `item_list_name` is used, if present.
`item_variant`	string	No	`blue-large`	The item variant or unique code or description for additional item details/options.

Usage Example

You can use the event types as follows:

// Example
const { ViewItem, AddToCart, Purchase } = window.yesplz.Logger.EventType;

// Track when user views a product detail page
window.yesplz.Logger.track(ViewItem, {
    currency: 'USD',
    value: 123.45,
    items: [
        {
            item_id: 'SKU_12345',
            item_name: 'Stan and Friends Tee',
            price: 123.45,
            quantity: 1
        }
    ],
    items_USD: [
      {
        item_id: 'SKU_12345',
        item_name: 'Stan and Friends Tee',
        price: 123.45,
        quantity: 1
      }
    ]
});

// Track when user adds item to cart
window.yesplz.Logger.track(AddToCart, {
    currency: 'USD',
    value: 123.45,
    items: [
        {
            item_id: 'SKU_12345',
            item_name: 'Stan and Friends Tee',
            price: 123.45,
            quantity: 1
        }
    ],
    items_USD: [
        {
          item_id: 'SKU_12345',
          item_name: 'Stan and Friends Tee',
          price: 123.45,
          quantity: 1
        }
    ]
});

// Track when user completes a purchase
window.yesplz.Logger.track(Purchase, {
    currency: 'USD',
    value: 123.45,
    transaction_id: 'T_12345',
    items: [
        {
            item_id: 'SKU_12345',
            item_name: 'Stan and Friends Tee',
            price: 123.45,
            quantity: 1
        }
    ],
    items_USD: [
      {
        item_id: 'SKU_12345',
        item_name: 'Stan and Friends Tee',
        price: 123.45,
        quantity: 1
      }
    ]
});

Track events using custom event types

Replace click_some_button with a unique identifier for the event.

// Option 1, track a custom event
window.yesplz.Logger.track('click_some_button');

// Option 2, track a custom event with optional properties
window.yesplz.Logger.track('click_some_button', {
    custom_property1: '',
    custom_property2: '',
    ...
});

ㅤ
🥳 You’re ready to start using Logger! Should have any questions, let us know at hello@yesplz.ai

Add script tag into the page​

Initialize​

Identify User​

Track Events​

Track events using defined event types​

Event Parameters Details​

Common E-commerce Event Parameters​

Usage Example​

Track events using custom event types​