Javascript Tagging Library: Track Add2Cart Clicks

Owned by David Argüello Sánchez
Last updated: Aug 13, 2018 by Edgar Herrero Uría
2 min read

Overview

Instructions to send "Add to Cart" clicks information using the Javascript Tagging Library.

Step-by-step guide

Clicks on "Add to Basket" can be tracked the functions trackAdd2Cart / trackAdds2Cart.

trackAdd2Cart

Use this function to send information when a user clicks on an "Add to Cart" button.

trackAdd2Cart(terms, page, title, url, scope, options, callback)

Parameters

ParameterDescriptionData TypeMandatory
termsThe query typed by the userStringYes
pageThe page numberIntegerYes
titleThe product or result titleStringYes
urlDestination URL, for example product detail pageStringYes
scopeThis parameter is used for separate analytic data between two or more different scenariosStringNo*
optionsObject that may contain information about filters and other required dataObjectNo
callbackFunction that will be executed after sending dataFunctionNo
*This parameters are not mandatory for the service but necessary for the statistics

The callback function will receive an object with the following contents:

{
    page: page,
	q: terms,
	title:title,
    url:url,
    scope: scope,
    follow: false
}

The callback also receives the parameter lang, user, session and the other params sent in options.

NOTE: The values for scope and options parameters will be provided by the EmpathyBroker Team.

NOTE: If you are setting up the trackAdd2Cart function into the product detail page, terms and page values will be relative to the product situation into the results grid before being clicked by the user.

Code samples

Selectors using jQuery (you could use other frameworks to build the selectors)

empathyTAG.trackAdd2Cart('test',1,'My product title','http://MY_PRODUCT_URL.com','testscope',{lang:'en'},function(){});

trackAdds2Cart

Same behaviour as trackAdd2Cart but allowing to track more than one "Add to cart" button.

trackAdds2Cart(selectors, terms, page, title, scope, options, callback)

Parameters

ParameterDescriptionData TypeMandatory
selectorsOne or more selectors (using any framework you want) pointing to the html to be trackedArray of DOM selectorsYes
termsThe query typed by the userStringYes
pageThe page numberIntegerYes
scopeThis parameter is used for separate analytic data between two or more different scenariosStringNo*
optionsObject that may contain information about filters and other required dataObjectNo
callbackFunction that will be executed after sending dataFunctionNo
*This parameters are not mandatory for the service but necessary for the statistics

The callback function will receive an object with the following contents:

{
    terms : terms,
    page : page,
    title : title,
    url : url,
    scope : scope,
    options: options
}

The callback also receives the parameter lang, user, session and the other params sent in options.

NOTE: The values for scope and options parameters will be provided by the EmpathyBroker Team.

Code samples

<input id="send" name="send" class="btn02_add" type="submit" value="Add to basket"/>

If your "Add to basket" button doesn't contain attributes like title or href you should you should modify your html code to store the title and the url of the product, you should add a sb-title and sb-url attributes to the "Add to basket" button.

<input id="send" name="send" class="btn02_add" sb-title="Your title here" sb-url="YourURLHere" type="submit" value="Add to basket"/>

Selectors using jQuery (you could use other frameworks to build the selectors)

var selectors = [jQuery('#send')];
empathyTAG.trackAdds2Cart(selectors,'test',1,'testscope',{lang:'en'},function(responseData){});