Javascript Tagging Library: Track Clicks

Owned by David Argüello Sánchez
Last updated: Feb 06, 2019 by Raquel Vidal Sigler
2 min read

Overview

Instructions to send clicks information using the Javascript Tagging Library.

Step-by-step guide

Clicks can be sent to the dashboard using the functions trackClick / trackClicks.

trackClick

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


Parameters

ParameterDescriptionData TypeMandatory
termsThe query typed by the userStringYes
pageThe page numberInteger

Yes

titleThe product or result titleString

Yes

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 options object should contains the following content:

{
    lang: LANGUAGUE,
	productId: PRODUCT_IDENTIFIER
}


The callback function receives an object with the following content:

{
    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.

Code samples

<a href="http://MY_PRODUCT_URL.com" title="My product title" class="myLink">My Test Link</a>
/**
* 1 -> Capture click on the desired product
* 2 -> Avoid default action (redirect to destination url)
* 3 -> Execute trackClick function with the desired callback (including url redirection)
*/
jQuery('a#myLink').click(function(){
   event.preventDefault();
   var myURL = this.href;
   var title = this.title;
   empathyTAG.trackClick('test',1,this.title,this.href,'testscope',{lang:'en', productId: 'PRODUCT_IDENTIFIER'},function(){
   		//Add your code here
   		document.location.href = myURL;
   });
});


trackClicks

Same behavior as trackClick but this function allow to execute the tagging over a set of elements using DOM selectors.

trackClicks(selectors, terms, page, scope, options, callback)

Parameters

ParameterDescriptionData TypeMandatory
selectorsOne or more selectors (using any framework you want) pointing to the html elements to be trackedArray of DOM selectorsYes
termsThe query typed by the userStringYes
pageThe page numberInteger

Yes

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 receives an object with the following content:

{
    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.

Code samples

<a href="http://MY_PRODUCT_URL.com" title="My product title" class="myLink">My Test Link</a>
<a href="http://MY_PRODUCT_URL_2.com" title="Other product title" class="myLink2">Other test link</a>


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

var selectors = [jQuery('a.myLink'),jQuery('a.myLink2')];
empathyTAG.trackClicks(selectors, 'test', 1, 'testscope',{lang:'en'}, function(responseData){});