Looping through table to return transaction information for _addItem() in Google Analytics Ecommerce

Question

I am trying to set up an ecommerce site's receipt page to push ecommerce data back to Google Analytics. I'm stuck on populating the _addItem() method with sku, name, price, and quantity for each item purchased.

I need the following for each item on the receipt:

_addItem(transactionId, sku, name, price, quantity)

My receipt page generates the table below with the product data. How can I loop through this table using Javascript or jQuery to return the following for each item? There is no limit to the number of items that can be on a receipt.

<div id="receipt_detail">
   <table class="list_container" width="98%" cellspacing="0" cellpadding="4" >
     <tr class="list_heading">
        <td align="left"  nowrap >SKU</td>
        <td align="left"  nowrap >Description</td>
        <td align="left"  nowrap >Qty</td>
        <td align="right"  nowrap >Price</td>
        <td align="right"  nowrap >Extended</td>
     </tr>
     <tr class="list">
        <td align="left"  nowrap >1234</td>
        <td align="left"  nowrap >Widget 1</td>
        <td align="left"  nowrap >1</td>
        <td align="right"  nowrap > $            0.25</td>
        <td align="right"  nowrap > $            0.25</td>
     </tr>
     <tr class="listodd">
        <td align="left"  nowrap >5678</td>
        <td align="left"  nowrap >Widget 2</td>
        <td align="left"  nowrap >1</td>
        <td align="right"  nowrap > $            0.10</td>
        <td align="right"  nowrap > $            0.10</td>
     </tr>
   </table>
</div>

I've got transcationId covered (that's easy). The rest has got me stumped. I'm new to Javascript, so any and all help is much appreciated.

Google's developer documentaion on ecommerce tracking code is here .

Answer 1

You're gonna have to fill in some blanks, but here is some code to pull the values from your table and populate the GA code:

<script language="JavaScript" type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11111-1']); // your account # here

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

/* you proved no details or examples of where to get any of this, so this is
   the GA manual example */
_gaq.push(['_addTrans',
  '1234',           // transaction ID - required
  'Womens Apparel', // affiliation or store name
  '28.28',          // total - required
  '1.29',           // tax
  '15.00',          // shipping
  'San Jose',       // city
  'California',     // state or province
  'USA'             // country
]);

/* scrape the html you provided and add values to _addItem */
$(document).ready(function() {
  $('div#receipt_detail tr.list,.listodd').each(function() {
    var info = [];
    $(this).find('td').each(function() {
      info.push($(this).html().replace(/^\s*\$\s*/,''));      
    });
    _gaq.push(['_addItem',
      '1234',                // transaction ID 
      info[0]||'no sku',     // SKU/code - required
      info[1]||'no product', // product name
      'category',            // category or variation
      info[3]||'0',          // unit price - required
      info[2]||'1'           // quantity - required
    ]);
  });
  _gaq.push(['_trackTrans']);
});

</script>

NOTE: This isn't really a good way to go about tracking your transactions. Instead of trying to scrape your page for values your system is obviously already dynamically outputting, you should instead use server-side code to expose the necessary values more directly to js, preferably just dynamically populating the GA code w/ server-side code.