Explanation of Web Pixel Integration

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 Vibetrace 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

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

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() {
	if (_vtsdk.User.context.session.urlparams.search) {
		_vteq.push({'search':{'query':_vtsdk.User.context.session.urlparams.search}});
	} else if (document.forms.cartadd) {
		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) {
		_vteq.push({'viewcategory':{'category':jQuery('h1.category-headline').text()}});
	} 
	else if (_vtsdk.User.context.session.pathname.indexOf('/kurv/') === 0) {
		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) {
		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) {
		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');

Related Articles