VBOUT
Introduction
Send Cart Items
Send Order Details
Track Product Visits
Track Category Visits
Track Product Search
View Documentation

Ecommerce Integration Examples

Introduction

This guide will show you examples for how to use VBOUT's E-commerce Tracking Integration in your e-commerce site.

Please refer to E-commerce Documentation for more details about the commands used in those examples.

Please note if your e-commerce site uses ajax requests, you may need to wait ajax's response before you fire VBOUT's track code.

Send Cart Items

  1. You need unique ID for each cart created in your e-commerce site. This ID will be used to attach the products to the cart and update the cart later.
  2. All products in the cart should be available as JS object.
  3. Products with same "productid" and same variation will be treat as duplicated products
  4. Products with same "productid" but different variation will be treat as different products

Once your e-commerce adds a new product to customer's cart, you should build transparent shopping cart object

HTML Markup

<a href="#" class="addToCart" id="addToCart">ADD THIS PRODUCT TO CART</a>

JavaScript Code

(function() {
	// Get the button by ID
	var element = document.getElementById('addToCart');
	// For this button's click, fire "sendCartToVbout()" function
	element.addEventListener('click', function(e){
		sendCartToVbout();
	});

	// Get the buttons by Class Name
	var elements = document.getElementsByClassName('addToCart');
	for(var i=0, len=elements.length; i < len; i++) {
		// For each button's click, fire "sendCartToVbout()" function
		elements[i].addEventListener('click', function(e){
			sendCartToVbout();
		});
	}

	function sendCartToVbout() {
		// This should contain the unique ID for your cart
		var cartid = "";
	
		// This should contain array of products in the cart
		var products = [];
	
		// This should contain the email address for the customer
		var customer = "";
		
		// Build the cart for VBOUT tracker
		var product;
		for(var i in products) {
			product = {
				"cartid": cartid, // required
				"productid": products[i].id, // required
				"name": products[i].name,
				"price": products[i].price,
				"quantity": products[i].quantity,
				"variation": products[i].variation
			};
	
			_vbset.push(["store.cart.item", product]);
		}
	
		// Send the cart to VBOUT
		var cart = {
			"cartid": cartid,
			"customer": customer
		};
		_vbset.push(["store.cart.send", cart]);
	}
})();

Send Order Details

  1. You need unique ID for each order created in your e-commerce site. This ID will identify the cart and the products in it.
  2. Order details (including billing and shipping details) should be available as JS object.

Once your e-commerce complete the checkout for the customer and create the order in your database, you should send those details to VBOUT to track them.

JavaScript Code

(function() {
	// Send the order to VBOUT (after order creation)
	sendOrderDetailsToVbout();
	
	function sendOrderDetailsToVbout() {
		// This should contain the unique ID for your cart
		var cartid = "";
	
		// This should contain the unique ID for your order
		var orderid = "";
	
		// This should contain order's details
		var orderDetails = [];
	
		// This should contain customer's details
		var customerDetails = {};
	
		// This should contain order's billing details
		var billingDetails = {};
	
		// This should contain order's shipping details
		var shippingDetails = {};
	
		var order = {
			"cartid": cartid, // required
			"orderid": orderid, // required
			"paymentmethod": orderDetails.paymentmethod, // required
			"grandtotal": orderDetails.grandtotal, // required
			"orderdate": orderDetails.orderdate,
			"shippingmethod": orderDetails.shippingmethod,
			"shippingcost": orderDetails.shippingcost,
			"subtotal": orderDetails.subtotal,
			"currency": orderDetails.currency,
			"status": orderDetails.status,
		
			"customerinfo": {},
			"billinginfo": {},
			"shippinginfo": {}
		};
	
		order.customerinfo = {
			"firstname": customerDetails.firstname,
			"lastname": customerDetails.lastname,
			"email": customerDetails.email, // required
			"phone": customerDetails.phone,
			"company": customerDetails.company
		};
	
		order.billinginfo = {
			"firstname": billingDetails.firstname,
			"lastname": billingDetails.lastname,
			"email": billingDetails.email,
			"phone": billingDetails.phone,
			"company": billingDetails.company,
			
			"address": billingDetails.address,
			"address2": billingDetails.address2,
			"city": billingDetails.city,
			"statename": billingDetails.statename,
			"statecode": billingDetails.statecode,
			"countryname": billingDetails.countryname,
			"countrycode": billingDetails.countrycode,
			"zipcode": billingDetails.zipcode
		};
	
		order.shippinginfo = {
			"firstname": shippingDetails.firstname,
			"lastname": shippingDetails.lastname,
			"email": shippingDetails.email,
			"phone": shippingDetails.phone,
			"company": shippingDetails.company,
			
			"address": shippingDetails.address,
			"address2": shippingDetails.address2,
			"city": shippingDetails.city,
			"statename": shippingDetails.statename,
			"statecode": shippingDetails.statecode,
			"countryname": shippingDetails.countryname,
			"countrycode": shippingDetails.countrycode,
			"zipcode": shippingDetails.zipcode
		};
	
		// Send the order to VBOUT
		_vbset.push(["store.order.send", order]);
	}
})();

Track Product's Visits

  1. You need unique ID for each product in your e-commerce site. This ID will identify the product will be used to track the visits for it.
  2. Product details should be available as JS object.

JavaScript Code

(function() {
	// Send product view track to VBOUT (after page load or ajax response)
	sendProductDetailsToVbout();
	
	function sendProductDetailsToVbout() {
		// This should contain product's details
		var productDetails = {};
	
		// This should contain the email address for the customer
		var customer = "";

		var product = {
			"customer": customer,

			"productid": productDetails.id, // required
			"name": productDetails.name, // required
			"price": productDetails.price, // required
			"currency": productDetails.currency, // required
			"sku": productDetails.sku,
			"link": productDetails.link,
			"image": productDetails.image
		};
	
		// Send the product to VBOUT
		_vbset.push(["store.product.view", product]);
	}
})();

Track Category's Visits

  1. You need unique ID for each category in your e-commerce site. This ID will identify the category will be used to track the visits for it.
  2. Category details should be available as JS object.

JavaScript Code

(function() {
	// Send category view track to VBOUT (after page load or ajax response)
	sendCategoryDetailsToVbout();
	
	function sendCategoryDetailsToVbout() {
		// This should contain category's details
		var categoryDetails = {};
	
		// This should contain the email address for the customer
		var customer = "";

		var category = {
			"customer": customer,

			"categoryid": categoryDetails.id, // required
			"name": categoryDetails.name, // required
			"link": categoryDetails.link,
			"image": categoryDetails.image
		};
	
		// Send the category to VBOUT
		_vbset.push(["store.category.view", category]);
	}
})();

Track Product's Search Queries

  1. Search details should be available as JS object.

JavaScript Code

(function() {
	// Send search track to VBOUT (when search triggered or after search result load)
	sendSearchTrackToVbout();
	
	function sendSearchTrackToVbout() {
		// This should contain the search query
		var query = "";
	
		// This should contain the email address for the customer
		var customer = "";

		var search = {
			"customer": customer,

			"query": query // required
		};

		// Send the category to VBOUT
		_vbset.push(["store.product.search", search]);
	}
})();