Variable values on event tracking on a dynamic button with dropdown form

Question

I am wanting to track the option chosen in 2 dropdown lists within a form. Below I have placed an example of the HTML that controls the form. The page the form is on is a dynamic secure page. After filling out one form, it changes to another without the URL changing.

I read on stackoverflow you can't use onClick on option fields. So I am wondering how I would set up event tracking in my scenario.

List 1

<div>
<p>What is your favorite fruit?</p>
<select id="list1">
  <option value="a">apple</option>
  <option value="b">banana</option>
  <option value="c">cherry</option>
</select>
</div>
<a href="#"> <!-- Click here first to see the next dropdown menu, URL won't change -->

List 2

<div>
<p>What is your 2nd favorite fruit?</p>
<select id="list2">
  <option value="a">apple</option>
  <option value="b">banana</option>
  <option value="c">cherry</option>
</select>
</div>
<a href="#"> <!-- This is the second time the same button is clicked. -->

If I could I would add each option tag with an onClick, but can't. Learned that on stackoverflow. So the disguised as a button is all I have. I just don't know how to post the dynamic selections to Google.

<a onClick="_gaq.push(['_trackEvent', 'listId', 'optionValue']);"

Since I click twice on the dynamic tag that is a button, how can I grab the value and the select ID each time? How do I post to google a variable based on ID for the list and the value for the option.

Is setting up in the dynamically used a tag, a smart way of doing the event tracking. Is there a cleaner way of setting up event tracking on my site for this form?

Answer 1

Presumably (since the form changes after selection) there is a javascript callback that does the changing. So you would place you analytics tracking call into that callback and read the selected value before the form changes. This requires control over the js code.

If the form is changed via an ajax call you might want to look if the setup of your page allows you to hook into the ajax success event. Jquery has global ajax event handlers, in prototype.js the same thing is called ajax responders and I'm sure other frameworks have something similar.

Another, and possibly the easiest way is to attach the onclick event to the link that changes the form and write a function that selects the value for the selected option.

Using jquery it could look like this:

$('#list1').find(":selected").value();

In plain javascript it should look like this (untested):

var list = document.getElementById("list1");
var selection = list.options[list.selectedIndex].value;

So your complete callback would look something like:

function getSelection(element) {
   var list = document.getElementById(element);
   var selection = list.options[list.selectedIndex].value;
   _gaq.push(['_trackEvent', element , selection);

}

You'd need to attach this to the onclick event of the link and pass the id of the combobox as parameter.