Technical Information

introduction sparklayer is designed to be as lightweight as possible and uses modern javascript technology to power the frontend how sparklayer is loaded all elements of sparklayer are fully hosted using a best of breed server infrastructure, meaning there's no code for you to self manage, host, or maintain going forward for performance, sparklayer frontend only loads when a customer successfully logs into a website; all loading of the interfaces is asynchronous which means a negligible impact on page load times and performance even though sparklayer is a hosted third party solution the result is the end customer will have a rapid experience browsing products and placing orders browser support we currently support the latest two versions of the following major browsers google chrome mozilla firefox apple safari microsoft edge apple safari for ios google chrome for android and ios please note, sparklayer may not work fully with beta or pre release versions of these browsers mobile support the frontend interfaces docid\ ccz1vnh0o6d 722w35xpa work across all devices (e g desktop, tablet, mobile), ensuring customers can easily browse your website no matter which device they are using building custom interfaces it's possible to extend the frontend of sparklayer to create more custom layouts please refer to javascript sdk & headless docid\ b blqyloc3qnkrit7xlgw event tracking for analytics (google analytics, ga4) please note this integration requires some technical setup, so please ensure a developer is available to assist for full instructions, consult our javascript sdk docid\ nrnplhclct3sljt c 9pf integrating google analytics with sparklayer if you're looking to track key events in google analytics (ga4) or google tag manager (gtm) through sparklayer, you can set this up directly in your integration this will help you capture valuable b2b events like "add to cart" "checkout," and "purchase" actions key details to note supports ga4, gtm, and custom analytics configuration is done using sparkoptions detailed code examples and setup steps are available in javascript sdk available events (expand to see) event name description addtocart triggered when a product is added to the cart cartupdate fired when the cart is updated (e g , quantity changes) shoppinglistsave occurs when a shopping list is saved shoppinglistload occurs when a shopping list is loaded shoppinglistdelete occurs when a shopping list is deleted csvupload triggered when a csv file is uploaded quickadd fired during quick add actions finalstagecheckout occurs at the final stage of the checkout process shippingupdate fired when shipping details are updated during checkout begincheckout triggered when the checkout process begins purchase occurs upon successful purchase completion viewcart fired when the cart is viewed 	 sample code to add (expand to see) updating sparkoptions and text you can enable this feature by adding some special code to your frontend integration guide docid\ qwxsym9x5 pviogutekcp window\ sparkoptions = { // other sparklayer options analytics { providers \[ { handler 'ga', // use 'ga' for google analytics events { addtocart true, cartupdate true, shoppinglistsave true, shoppinglistload true, shoppinglistdelete true, csvupload true, quickadd true, finalstagecheckout true, shippingupdate true, begincheckout true, purchase true, viewcart true } }, { handler 'gtm', // use 'gtm' for google tag manager events { addtocart true, cartupdate true, shoppinglistsave true, shoppinglistload true, shoppinglistdelete true, csvupload true, quickadd true, finalstagecheckout true, shippingupdate true, begincheckout true, purchase true, viewcart true } }, { handler function(eventname, eventparam) { console log('event fired to custom provider ', eventname, eventparam); // implement your custom analytics logic here }, events { addtocart true, cartupdate true, shoppinglistsave true, shoppinglistload true, shoppinglistdelete true, csvupload true, quickadd true, finalstagecheckout true, shippingupdate true, begincheckout true, purchase true, viewcart true } } ] } };