Ecommerce Events with Javascript

Make sure you first added the main script loader. That is required and nothing below will work without the main script..

The article covers integrations of the following codes:

1. Add ViewItem Event
2. Add ViewCategory Event
3. Add Search Event
4. Add AddToCart Event
5. Add AddToWishlist Event
6. Add Checkout Event
7. Add Confirm Order Event
8. Add Login Event

Things to know:

• These events allow us to handle all tracking/segmentation/personalization
• Before creating site events, it’s recommended to create the product feed. Some elements are required to be indentical in both (product_id, category_id).
• Important: Please change red text with exemplified values.
• For product_id and category_id, make sure they are sent as lowercase and all spaces are replaced with underscore.
• A product with id “FLV-GV 12” becomes “flv-gv_12” in our system.
• A category with id “Photo & Video accessories-extra” becomes “photo_&_video accessories-extra”
• All events support a generic object param:
  • Example: _vteq.push({“viewitem”:{“itemId”:”123″, “generic”:{“type”:”mobile”}}})
  • More details about generic can be found in this article.

Add ViewItem Event

• Needed to tell us when a user lands on a product page
• File to modify. Product Page (the product display page)
• * Mandatory

Note: please change ‘unique-product-id’ with each product id on product page, the same from product feed

<script>
window._vteq = window._vteq || [];
window._vteq.push({
"viewitem": {
itemId: "unique_product-id"
}
});
</script>

 

Add ViewCategory Event

• Needed to tell us when a user lands on a category page
• File to modify: Category Page (the category listing page)
• * Mandatory

Note: please change ‘unique-category-id’ with each category id on product page, the same from product feed

<script>
window._vteq = window._vteq || [];
window._vteq.push({
"viewcategory": {
category: "unique_category-id"
}
});
</script>

 

Add Search Event

• Needed to tell us when a user does a search
• File to modify: Search Page (the search listing results page)
• * Mandatory for emailing personalization

Note: please change ‘search-query’ with the query string of user.

<script>
window._vteq = window._vteq || [];
window._vteq.push({
"search": {
query: "search-query"
}
});
</script>

 

Add AddToCart Event

• Needed to tell us when a product is successfully added to the Cart
• It should be called from all possible locations of the user event
• * Mandatory for emailing personalization

Note: please change ‘unique-product-id’ with each product id

Note: please change ‘unique-cart-id’ with an unique identifier for the cart. If you have one, we can restore/recreate the cart later by passing back this param

<script>
window._vteq = window._vteq || [];
window._vteq.push({
addtocart: {
itemId: "unique-product-id",
cartId: "unique-cart-id"
}
});
</script>

 

Add AddToWishlist Event

• Needed to tell us when a product is added to wishlist (optional)
• It should be called from all possible locations of the user event, javascript or loaded pages
• * Mandatory for emailing personalization

Note: please change ‘unique-product-id’ with each product id

<script>
window._vteq = window._vteq || [];
window._vteq.push({
addtowishlist: {
itemId: "unique-product-id"
}
});
</script>

 

Add Checkout Event

• Needed to tell us when a user starts the checkout process, or enters another step of the checkout
• Please fill the step parameter with a string value to define the current step name
• * Mandatory for emailing personalization

Note: please change ‘current-checkout-step’ with name of the checkout step if you have a multi-step checkout

<script>
window._vteq = window._vteq || [];
window._vteq.push({
checkout: {
step: "current-checkout-step",
items: ["prod1", "prod2", "prod3" … ] //list of product id’s
}
});
</script>

 

Add Confirm Order Event

• Needed to tell us when a user confirmed an order (is on the Thank You page)
• File to modify: THANK YOU PAGE
• * Mandatory

Note: please change ‘unique-order-id’ with order id, used to identify transactions later. Also order_total is required when items are missing or you do not use a product feed.

<script>
var items = [{id:"unique-product-id", quantity:1}, {...}, {...}];
window._vteq = window._vteq || [];
window._vteq.push({
confirmation: {
items: items,
orderId: "unique-order-id",
total: order_total
}
});
</script>

Having all these set will allow you to create some amazing marketing campaigns.

Option, for onsite campaigns you can make use of Page Variables