Zowie Ecommerce API

Business Context

Zowie Ecommerce Tracking API offers JS methods to track the following events:

Product page visited
Cart updated
Order purchased

Tracking Order Purchased

Call Zowie.trackPurchased(...) from Zowie SDK when a customer places an order (e.g., landed at the success page).

Zowie.trackPurchased(
  orderId,
  lineItems,
  totalAmount,
  currency
)

Please make sure that you provided values for all non-optional arguments with the below structure. Line items argument accepts a list of products from the placed order.

Parameter	Type	Description
orderId	string	The ID of an order placed by a customer.
lineItems.productId	string	Unique ID of product or SKU.
lineItems.variantId	string	A specific product’s variant added to a cart. If you don’t support this, simply pass “default” as value.
subtotalAmount	number (int no float point), optional	Sum of the line item values provided without no decimal places. Eg. $3.84 should be encoded as 384. To avoid float point, use `parseInt(...)` from JS.
discountAmount	number (int no float point), optional	Discount value provided without no decimal places. Eg. $3.84 should be encoded as 384. To avoid float point, use `parseInt(...)` from JS.
taxAmount	number (int no float point), optional	Tax value provided without no decimal places. Eg. $3.84 should be encoded as 384. To avoid float point, use `parseInt(...)` from JS.
shippingCostAmount	number (int no float point), optional	The value of shipping costs provided without no decimal places. Eg. $3.84 should be encoded as 384. To avoid float point, use `parseInt(...)` from JS.
totalAmount	number (int no float point)	Total value of placed order provided without no decimal places. Eg. $3.84 should be encoded as 384. To avoid float point, use `parseInt(...)` from JS.
currency	string (3 characters, capitalized letters)	Currency, provided in USD, EUR, GBP, etc. format

📘
How do I know if tracking works?
Place a test order and use Developer Tools to find API call to https://tr.chatbotize.com/webhook/purchased. Make sure that all parameters are properly passed in the request’s body.

Tracking Product Page Visited

Call Zowie.trackVisitedProduct(...) from Zowie SDK at each product page visited by your customers.

Zowie.trackVisitedProduct({
  productId: "",
  imageUrl: "",
  price: 0,
  currency: "",
  title: "",
  shopUrl: "",
  category: {
    id: "",
    name: ""
  }
});

Parameter	Type	Description
productId	string	Unique ID of product or SKU.
imageUrl	string	URL to main image of product which is publicly accessible.
price	number (int no float point)	Price of product provided without decimal places. Eg. $3.84 should be encoded as 384. To avoid float point, use `parseInt(...)` from JS.
currency	string (3 characters, capitalized letters)	Currency, provided in USD, EUR, GBP, etc. format.
title	string	Title/name of product.
shopUrl	string	URL to product page, can be simply `window.location.href` of the current page.
category.id	string	ID of product’s category. If you don’t have an ID, please provide the category's name.
category.name	string	Name of product’s category.

📘
How do I know if tracking works?
Visit your ecommerce’s product page and use Developer Tools to find API call to https://tr.chatbotize.com/webhook/visited-product. Make sure that all parameters are properly passed in the request’s body.

Tracking Cart Updated

Call Zowie.trackCartUpdated(...) from Zowie SDK whenever a customer adds an item, removes an item, changes quantity, or clears out the cart.

Zowie.trackCartUpdated([{   
    productId: "",
    variantId: "",
    imageUrl: "",
    price: 0,
    currency: "",
    quantity: 0,
    title: "",
    shopUrl: ""
}])

Above method accepts a list of items within a cart with the following structure:

Parameter	Type	Description
productId	string	Unique ID of product or SKU.
variantId	string	A specific product’s variant added to a cart. If you don’t support this, simply pass “default” as value.
imageUrl	string	URL to main image of product which is publicly accessible.
price	number (int, no float point)	Price of product provided without no decimal places. Eg. $3.84 should be encoded as 384. To avoid float point, use parseInt(...) from JS.
currency	string (3 characters, capitalized letters)	Currency, provided in USD, EUR, GBP, etc. format.
quantity	number (int, no float point)	Quantity of product in a cart provided without no decimal places. To avoid float point, use parseInt(...) from JS.
title	string	Title/name of product.
shopUrl	string	URL to a product page.

📘
How do I know if tracking works?
Update a cart by adding/removing products and use Developer Tools to find API call to https://tr.chatbotize.com/webhook/cart-updated. Make sure that all parameters are properly passed in the request’s body.

Pushing Events to Google Analytics

Extend Zowie.init({...}) with the following configuration:

Zowie.init({
...

    onEcommercePurchased: function(total, currency) {
       gtag('event', 'zowie_purchased' , { 'total': total, 'currency': currency });
    },          
    onEcommerceProactiveChatSeen: function() {
       gtag('event', 'zowie_proactive_chat_seen');
    },
    onEcommerceProactiveChatClicked: function() {
       gtag('event', 'zowie_proactive_chat_clicked');
    },
    onEcommerceProductVisited: function() {
       gtag('event', 'zowie_proactive_product_visited');
    },
    onEcommerceConversationStarted: function() {
       gtag('event', 'zowie_conversation_started');
    }         

...
})