JavaScript Custom Tracker

Question

I would like to build a tracking system for a Web-based Application built in CakePHP 2.x. The idea is to have all the tracked link having written as below:

<a 
 href="#" 
 class="track-click" 
 data-tracking='{ 
 "trackers": [
 {
 "tracker": "----", 
 "eventId": "---",
 "tracking_options": { 
 "eventTargetUrl": "---", 
 "props": [{ 
 "key": "----", 
 "value": "---" 
 }]
 } 
 } 
 ]
 }'
/>

The javascript that handles the track requests should be able to gather the information that resides inside the data-tracking attribute. This would be done by attaching a click event on the "track-click" class onClick event.

Below is how I use the link above:

$('.track-click').click(function(e){
 //Lets grab the data thats within the data-tracking attribute and do something with it
 var data = $(this).attr('data-tracking');
 alert(data.trackers);
 e.preventDefault();
});

At this present moment if I alert the above I get undefined. If I put $(this).attr('data-tracking').val() on my code I get the error below:

TypeError: $(...).attr(...).val is not a function

What is the best way of manipulating links that have a json data as shown above?

• javifm: Did you try closing in HTML the last attribute (data-tracking) with single quote, ' ? It seems not to be closed.
• Sumit: Close your a tag and put single quote at the end of this string.

Answer 1

You need to use

var data = JSON.parse($(this).attr('data-tracking'));

This will return you the object.

Else you must use

 var data = $(this).data('tracking');

.data() will return you the object. whereas .attr() will stringify and return that object.

DEMO

• scruffycoder86: Thanks dude this is exactly what I wanted. I could see [object Object] being alerted i my browser which is a good sign.... :-)
• mohamedrias: Great. you can console.log and see the entire object in console :)
• scruffycoder86: Yes, I wqas able to see the whole data rather than the [object Object] notation with the alert. Thanks a lot. I am now trying to build the implementation for my custom tracking... :-)