Setting up giosg BASKET

Giosg BASKET

Giosg BASKET is an additional product for Giosg Live. With basket you can monitor and analyze visitor's shopping carts in real time and generate different kinds of reports afterwards.

How to setup basket tracking

• Use giosg javascript API.

Implementing giosg Basket

Implementing giosg Basket requires site owners to make changes to their website's code but the changes are trivial and can be easily placed next to the code that tracks e-commerce events to other analytics platforms. This way the developers of the site can decide what to track and can make sure that the data submitted to giosg is same as submitted to other analytics services.

Setup using javascript API

Warning

If you are converting old basket integration to use the javascript api, please notify support@giosg.com to possibly remove the legacy basket settings which could conflict with the javascript api.

// Wait for giosg to be ready
_giosg(function () {
  // On page: http://myshop.com/products/bunnies/
  // Use the currency you want (The currency codes are from ISO 4217 standard)
  giosg.api.shoppingCart.setCurrency("EUR");
  // Add one product to cart and submit data to server
  var products = [
    {
      name: "Fluffy Bunny",
      price: "20.50",
      quantity: 1,
    },
  ];
  giosg.api.shoppingCart.submit(products).then(function () {
    console.log("Shopping cart data submitted!", products);
  });

  // On page: http://myshop.com/products/new/
  // Add new products and remove Fluffy Bunny
  products = [
    {
      name: "Pink Bear",
      price: "100.50",
      quantity: 1,
    },
    {
      name: "Brown Hamster",
      price: "5.50",
      quantity: 2,
    },
  ];
  giosg.api.shoppingCart.submit(products).then(function () {
    // Visitor has 3 product in cart. One Pink Bear and
    // two Brown Hamsters.
    console.log("Shopping cart data submitted!", products);
  });

  // On page: http://myshop.com/cart/
  // Visitor removed all products from cart so empty giosg cart also
  giosg.api.shoppingCart.clearCart().then(function () {
    console.log("Cart cleared!");
  });

  // On page: http://myshop.com/products/bears/
  // Add new product
  products = [
    {
      name: "Pink Bear",
      price: "100.50",
      quantity: 1,
    },
  ];
  giosg.api.shoppingCart.submit(products).then(function () {
    // Visitor has 1 Pink Bear product in cart.
    console.log("Shopping cart data submitted!", products);
  });

  // On page: http://myshop.com/cart/success/
  // Mark cart as purchased
  giosg.api.shoppingCart.freeze().then(function () {
    // Visitor purchased one Pink Bear product.
    console.log("Shopping cart was successfully purchased!");
  });
});

Configuring basket tracking with javascript API is the recommended method.

You can submit cart data by passing Array of Products to giosg.api.shoppingCart.submit method.

Giosg automatically tracks the state of the cart on the server and removes products from cart that are not present on the latest data set that was submitted to server. This means that you don't need to manually keep track which products to remove and which products to add to cart.

It is recommended you to set the currency before using the basket api through the setCurrency api. By default the api uses currency from the company settings.

There is also Visitor JavaScript API-page where you can read documentation about rest of the javascript apis.

Marking cart as purchased

Info

NOTE: Giosg sales tracking requires carts to be marked as purchased. Tracked sales will not show up in reporting until the cart has been marked purchased.

When visitor makes a payment, navigates to success page or does some other action which causes the cart to be purchased giosg.api.shoppingCart.freeze() method to mark cart purchased.

This method doesn't need any parameters as the current cart contents should have been already submitted with submit method. If the cart data does not exists or freezing failed for some reason then this method will reject the promise.

See usage examples on the right side.

// Wait for giosg to be ready
_giosg(function () {
  // After visitor has purchased
  // Mark cart as purchased
  giosg.api.shoppingCart.freeze().then(function () {
    // Previously submitted cart data
    // has now been marked as purchased
    console.log("Shopping cart successfully purchased!");
  });
});

Removing products from cart

_giosg(function () {
  // First add single product to cart
  var products = [
    {
      name: "Fluffy Bunny",
      price: "20.50",
      quantity: 1,
    },
  ];
  giosg.api.shoppingCart.submit(products).then(function () {
    // Visitor has 1 product in cart, Fluffy Bunny.
    console.log("Shopping cart data submitted!", products);
  });

  products = [
    {
      name: "Pink Bear",
      price: "100.50",
      quantity: 1,
    },
  ];
  giosg.api.shoppingCart.submit(products).then(function () {
    // Visitor has 1 product in cart, Pink Bear.
    // Fluffy Bunny was removed as it wasn't present in the
    // products array.
    console.log("Shopping cart data submitted!", products);
  });
});

Giosg automatically tracks the state of the cart on the server and removes products from cart that are not present on the latest data set that was submitted to server. So to remove products from cart you can just submit new set of products that still are on visitors cart. If the visitors cart is completely empty then you should use giosg.api.shoppingCart.clearCart() to remove all products from the cart.

Emptying cart

// Wait for giosg to be ready and remove all products from cart
_giosg(function () {
  giosg.api.shoppingCart.clearCart();
});

To remove all products from cart use giosg.api.shoppingCart.clearCart(). This removes all the products from the cart on the server.

Supported fields on Product object

Supported fields on Product

Field	Type	Required	Description
name	string	required	Name of the product
price	string	required	Price of the product in decimal format, for example "10.50". Max 2 decimals is supported
quantity	integer	required	Count of this kind of product in cart.
description	string	optional	Longer description of the product
monthly_price	string	optional	Monthly billable price of the product in decimal format, for example "9.90". Max 2 decimals is supported
monthly_quantity	integer	optional	Monthly plan length (Deprecated: Use monthly_plan_length instead).
monthly_plan_length	integer	optional	Monthly plan length
category	string	optional	Category of the product
product_number	string	optional	Product number or code. For example "313" or "SKU-234"

Checklist for integration

• Check that all pages contain giosg javascript tag. It's quite common that customers forgot to add giosg tag to payment pages and purchases will not be logged.
• After you have done the setup
• Check from browser's console that there is not any Javascript errors.
• Check that cart information is shown correctly on giosg Live chat dialog.
• Wait a couple of days and compare that store's actual sale and giosg's reports match.

Collected cart data does not match actual sales?

This can happen for number of reasons. Giosg cannot ensure that the data is always correct and matches with actual shop database or other analytics services. Neither can other analytics services ensure that.

Most common reason however when data doesn't match is usually on basket configuration. Please check that the basket is configured correctly and carts are marked as purchased on success page.

This is due to fact that the data is transmitted from client (browser) which may block the request for number of reasons. Also it is possible that there is network errors or outages in which case giosg will retry until succeeded but success cannot be verified.

Also make sure that the data submitted takes discounts and delivery fees into account if you are comparing it to report that also takes these factors into account.