#GTMTips: Track Selection In Drop-Down List

Tracking what a user selects in a drop-down (or select) list/menu can be very useful. This is particularly the case when the selection immediately does something, such as initiate a download or navigate the user to another page. But even if there is no immediate action, it’s still interesting to know what selections users might be doing, if only to uncover yet another piece of the engagement puzzle. Here’s the Google Tag Manager way to do it!

Tip 62: Listen for changes in a drop-down menu

The setup is somewhat complicated, and requires a Custom HTML Tag together with some variables. But the end result is that when a user makes a selection, the web page pushes an object into dataLayer, which you can then use to track the results.

Here’s what the Custom HTML Tag should look like:

<script>
  (function() {
    
    // Change the CSS selector in the parenthesis to match your select menu
    var selectMenu = document.querySelector('select#selectMenu');
    
    var callback = function(e) {
      var selectedOption = e.target.options[e.target.selectedIndex];
      window.dataLayer.push({
        event: 'selectionMade',
        selectedElement: selectedOption
      });
    };
    
    selectMenu.addEventListener('change', callback, true);
  })();
</script>

Set this tag to fire on a DOM Ready trigger.

You’ll need to modify the line which begins with var selectMenu = ..., so that the query selector matches the select HTML element you actually want to track. If CSS selectors are unfamiliar to you, you can read up on them here, or you can use some other DOM method like document.getElementById(). Regardless, you will need to store a reference to the select element in the selectMenu variable for this solution to work.

The code creates a custom 'change' listener, which is triggered when the value in the element being monitored changes. This is very useful with forms, since you can attach this type of listener to any form field to see if the user changed the value within.

Finally, when a 'change' event is detected, the callback pushes an object into dataLayer, which contains the custom event selectionMade as well as an object reference to the option the user selected.

When you want to fire your tag upon a selection, you will need a Custom Event Trigger that looks like this:

Then, depending on how the actual option element has been configured, you could use one of these Data Layer Variables to collect the information:

The first grabs the value attribute from the selected option, or if there is no value it grabs the text content. The second grabs the text content even if the option had a value attribute.

Put these all together, and you’ll be tracking those drop-down / select list selections in no time!