There are specific needs of JS integration or HTML changes requirements. Everything refers tothe platform running in the browser:
- JS is needed for events integration, custom selectors or on page variables
- HTML is needed for changes in interaction campaigns (and maybe emails)
Solution overview
The pixel script is loaded on every page. It’s is a Javascript library built to manage all aspects of the integration:
- manage users and sessions
- send events to the platform
- manage users unique identifiers
- embed interaction and recommendations campaigns
- provide utilities for the above features
Javascript SDK
The JS library (called VT pixel) is loaded on every page. Depending on page type or various other custom conditions we are able to send specific standard events to the system or custom events based on our needs.
Default library method is based on 3 main variables available in the page:
- _vtsdk → the whole SDK exposed as a dictionary (class)
- _vteq → list of values that the SDK is periodically checking it and act on the data
- _vtshop → custom lists of values usually needed by specific platforms integrations
What you need to understand: JSON data structures
SDK Helpers
We expose and provide the following Helper methods to be used when doing on site integration. All are accessible under _vtsdk.Helpers
Those are utilities methods that you might use for integration.
Read more about SDK Helpers: https://help.vtcdn.net/knowledge-base/javascript-sdk-helper-methods/
Javascript Events
Events represents Javascript objects (JSON data) pushed to the _vteq variables. This is continuously checked for new values and gets the values to send events to the server or manage on page variables:
The format for events is:
{"event_name":{"attribute": "value", "attribute2": 7}}Events examples:
Standard Pages: product, category, search, confirmation, checkout have predefined events structures and format: https://help.vtcdn.net/knowledge-base/standard-ecommerce-events-with-javascript/
_vteq.push(event_object)Custom events: for special needs, like lead generation. Those custom events have all data in “generic” attribute https://help.vtcdn.net/knowledge-base/add-new-custom-event-type-into-the-system/
_vteq.push({"event_name":{"generic": {"attribute_name": "value" }}})Javascript variables
Variables are used for interaction campaigns segmentation (conditions to display campaigns) and also for content. Using Page Variables in Javascript
The most important JS variables used in segmentation are cartValue and cartCount. Those variables are set using code below and are almost always found in every page:
- cartValue – total value of items in the cart
- cartCount – total number of items in the cart
_vteq.push(["setVar", "cartValue", parseFloat(jQuery('#cart_box span.total').text())]);Concepts
Understanding the above concepts will cover the following needs:
- can do a Javascript standard integration, as in the below example
- customize an integration with specific business needs
In the below example:
- object is the variable name used inside our SDK. You can either use “object” or “_vtsdk” (which calls it as global name)
- based on various page / URL conditions we generate the events automatically
- JS code succession comes in a waterfall method, based on IF … ELSE because this way we are safe to go to next code by excluding previous positive conditions
Example of a Custom JS code for one of our customers. Using this code, customer only requires to embed the main Web Pixel and add this to the Custom Code inside account settings. The code is evaluated using eval method on each page.
object.tasks.addReadyListener(function() {
// we have search variable defined in url params, so we push a search event
if (_vtsdk.User.context.session.urlparams.search) {
_vteq.push({'search':{'query':_vtsdk.User.context.session.urlparams.search}});
} else if (document.forms.cartadd) {
// cartadd form is defined, so we know it's a product page
var idInShop = jQuery('#product-complementary').data('products')[0];
_vteq.push({'viewitem':{'itemId':idInShop}});
}
else if (jQuery('#AddToCart').length && jQuery('.added-to-basket').length) {
var idInShop = JSON.parse(jQuery('#PageView').text().match(/content_ids:(.*),/)[1].trim().replace(/\'/g,''))[0];
_vteq.push({'addtocart':{'itemId':idInShop}});
}
else if (jQuery('h1.category-headline').length) {
// because we found the element h1 with specific class name we know it's a category page
_vteq.push({'viewcategory':{'category':jQuery('h1.category-headline').text()}});
}
else if (_vtsdk.User.context.session.pathname.indexOf('/kurv/') === 0) {
// here we know it's a checkout page based on url path
var cItems = [];
var items = jQuery('.clerk[data-after-render=\'clerkProductsLoaded\']').data('products');
_vteq.push({'checkout':{'step': 'cart', 'items': items}});
}
else if (_vtsdk.User.context.session.pathname.indexOf('/bestilling/') === 0 && _vtsdk.User.context.session.pathname.indexOf('approved')<0) {
//checkout step just before order confirmation to save the items from the cart (and push them with the event) on the confirmation page
var items = JSON.parse(jQuery('#Purchase').text().match(/content_ids:(.*),/)[1].trim().replace(/\'/g,''));
_vteq.push({'checkout':{'step': 'checkout', 'items': items}});
var cItems = [];
jQuery('#orderLines .orderLine').each(function(index){
var qty = parseInt(jQuery(this).find('.amount').text());
cItems.push({'id': items[index], 'quantity': qty});
});
_vtsdk.Helpers.setCookie('cartItems', cItems);
}
else if (_vtsdk.User.context.session.pathname.indexOf('/bestilling/') === 0 && _vtsdk.User.context.session.pathname.indexOf('approved')>0) {
// approved is also found in the pathname so we know it's a confirmation
var items = [];
jQuery('.w-product-item').each(function(index){
items.push({'id': jQuery(this).attr('class').split('item-')[1], 'quantity':parseInt(jQuery(this).find('.w-product-unit-title').text())});
});
_vteq.push({'confirmation':{'items': items, generic:{'orderId': _vtsdk.User.context.session.urlparams.orderid, 'email': jQuery('.w-userinformation .w-email').text().split(': ')[1], 'total': parseFloat(_vtsdk.User.context.session.urlparams.amount) / 100}}});
}
}, 'runjs2');