Google Analytics Event Tracking in Google Tag Manager

Question

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

Answer 1

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
       });
     });
   </script>
   

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.

Answer 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.

Answer 3

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>