Extend jQuery Attribute with Object in element attribute

Extend jQuery Attribute with Object in element attribute

by Nirvanachain

HTML

<a href="#" title="Click Here" data-wt-options='{
  "\"WT.AC\"" : "\"Hero Feature Click\"",
  "\"WT.cg_n\"" : "\"Engagement Events\"",
  "\"WT.cg_s\"" : "\"Body Feature Position Click\" + document.title",
  "\"DCS.dcsuri\"" : "window.location.pathname+\"FeaturePositionClick\"",
  "\"WT.dl\"" : "\"99\""
  }' data-rel="something else"/>Tag Me!</a><br />

<a href="#" data-rel="woof">Don't Tag Me!</a><br />

<a href="#" title="Click Here" data-wt-options='{
  "WT.AC":"Testing 123",
  "WT.cg_n":"Other Events",
  "WT.cg_s":"click clack"
  }' data-rel="something else"/>Tag Me Too!</a>

<div id="result"></div>

CSS

#result {
    margin-top:10px;
    height:150px;
    font-size:.8em;
}

body {
    font-family:verdana, arial, sans-serif; font-size:.8em;
}

JavaScript

//select any element that has attribute of data-WT-Options
    $('a[data-wt-options]').click(function () {
      var el = $(this),
          wtTrackElements = '',
          output;
      $.each(el.data('wt-options'), function (key, value) {
          wtTrackElements +=  key + ', ' + value + ',';
      });
      output = 'dcsMultiTrack(' + wtTrackElements + ');'
      output = output.replace(/,(?=[^,]*$)/, ''); //remove the last comma.
      $('#result').append(output + '<br /><br />');
      return false;

    });