We Keep Coding

Google Analytics Event Tracking in Google Tag Manager

I'm relatively new to Analytics Event tracking etc.
I'm just wondering what is Google Tag Manager equivalent to Google Analytics (onchange="ga('send', 'event', 'Category', 'Change', 'Value');") ?
I know I can use onlayer but I'm not 100% sure on how to do use it, tried looking up online few articles but nothing that could help me.
Basically what I have is a styled select element that I want to track when it changes its value. There is no submit button and its not inside a form element.
Google Tag Manager only let me do on click which returns wrong values because its a select element and needs onchange rather than onclick.
My question is can I use Google Analytics Event Tracking code inside Google Tag Manager if that makes sense? My Google Analytics are inserted through Google Tag Manager, so is tracking.
Your reply is appreciated, thanks

If I were implementing this I would create a custom HTML tag containing a function that binds to the onchange event fo your select element. The function would fire a custom event into the dataLayer which also contains pertinent information. You would then create a UA event tracking tag that uses the correct information and is fired by a custom trigger that is fired by the custom event name.
So, as follows:
Create Custom HTML tag with some similar functionality to this, fire it on DOM ready of all pages you want to bind to a select element:
<script>
$('#myselect').on('change', function(){
dataLayer.push({
'event':'select_change',
'select_val':this.value
});
});
</script>
Create a trigger of type custom event where event value = select_change
Create a Universal Analytics tag which is an event tag and fill in the the required details (category, action, label, value). If this was me I'd use something like
category = user interaction
action = select change
label = {{select_val}}
This tag shoudl be fired by the trigger you created in 2.

Personally I've adopted the "generic event tag" approach recommended by Simo Ahava. All credit goes to him for this, but I'll try to summarize it here.
Rather than cluttering your GTM container with a bunch of specialist tags for various GA events you can create a generic tag that will handle any event. Using the code below you can just push events to the dataLayer, and they'll automatically get passed into GA.
dataLayer.push({
'event' : 'GAEvent',
'eventCategory' : value_for_Event_Category,
'eventAction' : value_for_Event_Action,
'eventLabel' : value_for_Event_Label,
'eventValue' : value_for_Event_Value
});
Since all events consist of a category, action, label, and value create a dataLayer variable for each of them. Then create a custom event trigger that will fire on all custom events, and look for an event name that you set (Simo uses the name "GAEvent"). Finally create a new GA tag. Set the tag type to event, and map category, action, label, and value to your dataLayer variables. Use the trigger you just created to fire this tag. That's it from the GTM side of things.
Note: you don't need to set label and value for every event. You can simply omit them if unneeded, or manually set them to 'undefined'. Also if you have many non-interaction events you may want to create non-interaction versions of the trigger and tag so that you can push those generically as well.

If I were implementing this I would create a custom HTML tag containing a >function that binds to the onchange event fo your select element. The >function would fire a custom event into the dataLayer which also contains >pertinent information. You would then create a UA event tracking tag that >uses the correct information and is fired by a custom trigger that is fired >by the custom event name.
So, as follows:
1.Create Custom HTML tag with some similar functionality to this, fire it >on DOM ready of all pages you want to bind to a select element:
<script>
$('#myselect').on('change', function(){
dataLayer.push({
'event':'select_change',
'select_val':this.value
});
});
2.Create a trigger of type custom event where event value = select_change
3.Create a Universal Analytics tag which is an event tag and fill in the >the required details (category, action, label, value). If this was me I'd >use something like
-category = user interaction
-action = select change
-label = {{select_val}}
This tag shoudl be fired by the trigger you created in 2.
I was looking for a solution to the exact same issue and the solution by dmpg_tom worked great.
I had a issue though as the values of my dropdown were set to 1,2,3,4 etc and I needed to extract the Text. I tried this.Text and this.HTML and both didn't work.
I edited the code as follows with some help from here:
<script>
$('#myselect').on('change', function(){
var mySelect = document.getElementById("myselect");
var selectedText = mySelect.options[mySelect.selectedIndex].text;
dataLayer.push({
'event':'select_change',
'select_val':selectedText
});
});
</script>
In this example it would now return 'Hello' instead of '1'.
<option value="1">Hello</option>

How do I dynamically assign IDs to form fields with event listeners?

I am allowing for the user to click a link, which will add a field to the page. The user can click the link to add as many fields to the page as they like. When the field is clicked, a calendar appears, because it is a date field. I am using the Any+Time calendar. The jQuery waits for a click event from the field with a specific id. Here is the code:
$('#start_date').click(
function(e) {
$('#start_date').AnyTime_noPicker().AnyTime_picker().focus();
} );
The id is start_date. The problem is that the user can click the link to add a new field called start_date and since the id is the same, the jQuery event listener cannot uniquely identify each field. Is there a known solution for this kind of a scenario?

I'm not clear: does appending the unique number not work for you? If you're OK creating the field but it's not attaching the click handlers, then try adding a class="pickerField" to the elements when you create them, and change your handler to:
$('.pickerField').click(
function(e) {
$(this).AnyTime_noPicker().AnyTime_picker().focus();
} );
I believe that should work with jQuery 1.7.2. If for some reason it doesn't, then try the following instead:
$('.pickerField').on('click',
function(e) {
$(this).AnyTime_noPicker().AnyTime_picker().focus();
} );
If you're using an older version of jQuery, try using live instead of on.

How can i apply java script to access the client id or a control placed in the grid view?

I want to access a dropdown asp control client id placed in the gridview.
function validate(){
var ddl = document.getElementById("ctl00_ContentPlaceHolder1_grdProducts_ctl02_ddlSelectSize");
}
I want a generalized way to access above id on a rowcommand event click of a gridview that holds a button.
And onButton click i am calling method onclientClick(return validate());

try this code,will work fine
var grid = document.getElementById(gridID);
var ddl= grid.rows[1].cells[1].getElementsByTagName('input');

You can add a marker css class to you dropdown. Than you can search for all inputs which have this class and attach to click event.
Attached event handler method has the information about sender so that you do not have to hardcode anything.
If you can use jQuery it gets really simple. I can provide you a sample code if you need

Submit form when contents of MVC3 Html.TextBoxFor changes

This should be fairly easy but I've tried a few things with no luck.
I have a series of Html.TextBoxFor fields on a page, each inside their own Ajax.BeginRouteForm. Next to each box I have a submit button, and this, when clicked, performs the Ajax update as desired.
I'd like to automate this so that when the user changes a value in a field (the onchange event) the form is submitted the same way it currently using using the submit button.
I tried using the htmlattributes to assign a JavaScript function to the onchange event (as shown below) and this causes the form to submit, but it redirects the page instead of working in the ajax fashion (as opposed to clicking the submit button which works correctly).
#(Html.TextBoxFor(model => answer.Value, new { onchange = "document.forms[" + answer.AnswerID + "].submit()" }));
(fortunately my answer.AnswerID is numeric and matches up with the numeric position of the appropriate form in the forms collection; I was referencing them by name but Razor (or something) was htmlencoding my JavaScript code...)
My only guess is that I'm breaking something by attaching code directly to the onchange event, but I'm at a loss as to the "right" way to hook into that event chain.

If you're willing to use JQuery, it's very simple to do:
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Calling submit() on a form will ignore any submit event handlers, as seen here. You can either
call the event handler directly, or
call click() on the submit button for the form.
The former works best if you use onsubmit and return false instead of using the event argument to the callback, because otherwise you need to pass another messy object or something.

onchange not getting triggered

I have a calendar which comprise of an input tag and an image on click of image calendar popups comes and sets the value for input tag using javascript.
now i have added onchange event on input tag which doesnt gets triggered since m changing the value using javascript, so what should be done to trigger it i dont want to trigger it explcitly
i tried focusing on input on click of image and focus out on setting the data(into input element) but it didnt worked any workaround?

You can call the onchange handler manually.
Example: http://jsfiddle.net/NQCy7/
element.value = 'new value';
element.onchange();

just tested what you described, it's the same problem here.
a simple workaround would be to call the onchange-method directly (where you're doing the .focus()/.blur() now)