Dynamic Google Analytics Event Label - Input ID Values

[jesse_kanclerz]

I'm looking to dynamically track the input ID value of navigation facets in the event label field in Google Analytics.

An extension is setup where the event label is set to this JS code:

jQuery(document).ready(function () { jQuery(":checkbox").change(function(){ jQuery('input[type="checkbox"]:checked').next('label').text(); }); });

Example Input:



However, the event label is returning [object Object] instead of the ID value Special Offers-New. What am I doing wrong?

[dave_milsom]

Jesse,
Your current code is looking for the text value of the first label following the first checked checkbox.

To grab the id of the checkbox changed, you would use:

jQuery(document).ready(function () { 
	jQuery(":checkbox").change(function(){             
		jQuery(this).attr('id'); 
	});     
});

If you only want the id when the box is checked (rather than unchecked), you can check for a checked status:

jQuery(document).ready(function () { 
	jQuery(":checkbox").change(function(){          
		if (jQuery(this).is(':checked')){ 
			jQuery(this).attr('id'); 
		}; 
	});     
});

[jesse_kanclerz]

Thanks for the quick reply Dave. I tried both code examples in the extension and am still receiving the [object Object] value in the event label.

The issue might be that once selected the input ID actually disappears on the page and is replaced by an <li>.

In my example:
<input type="checkbox" id="Special Offers-New" name="check" value="/browse/someurl/">

Changes to:
<li><label>Special Offers-New</label></li>

[dave_milsom]

Jesse,
You mentioned this is in a javascript extension. Are you manually calling utag.link()?

You will want to fire the manual event tracking using utag.link(), passing in the event-related values. The attributes below (event category, action and label) might be named differently in your profile. If you are not sure, you can check the Google Analytics mapped values in the tag config:

jQuery(":checkbox").change(function(){ 
    if (jQuery(this).is(':checked')){ 
    	utag.link({
        	'event_category' : 'Some Value',
        	'event_action' : 'Some Action',
    		'event_label' : jQuery(this).attr('id')
    	});
    }; 
});

If you wanted to capture all clicks, regardless of checkbox state, you could use Tealium's jQuery onHandler extension, like in the image I posted in the other reply.

[dave_milsom]