Google Tag Manager: Tracking "Select" Drop Down Menu "Option" tag value

Question

I am having trouble tracking the value of the "option" tag in the "select" tag. I currently have a drop down menu for Google Translator Widget where user can click on it and select the language. When you click on the "Select Language" drop down, you will be able to see German as the option. See the attached screenshots. I have created a Macro call "JS - Google Translate - Select Option" in the Google Tag Manager.

Here is the code for "JS - Google Translate - Select Option":

function() {
  var list = document.querySelector('select.goog-te-combo');
  return list ? list.options[list.selectedIndex].value : undefined;
}

Above code, will find the drop down menu, which has "goog-te-combo" as a class name for "select" tag. Then, it will see if the option tags are available in the select tag and get the value of the selected option tag.

I also have created a tag call "GA - Event - Google Translate Clicks" and trigger call "Click - Google Translate".

When I test this out, I see that my "GA - Event - Google Translate Clicks" get triggered when I click on the drop down menu on my page. However, when I check the "variables" tab in the Google Tag Manager and check the variable "JS - Google Translate - Select Option", I see it empty.

Google Translator Widget Drop down menu option

Google Tag Manager "JS - Google Translate - Select Option" empty

Answer 1

Problem is that you need to trigger tag when onchange event happens.

Full guide how to track page translations, if you are using Google Website translator

First of all you need to set up custom event trigger for onchange event (original article about that you can find here):

Setup custom event listener

Go to Triggers-> New -> Custom Event

• Event name: gtm.js
• Trigger name: gtm.js

Setup event handler JS variable

Go to Variable -> User-Defined variables -> New -> Type -> Custom JavaScript

function() {
    return function(e) {
        window.dataLayer.push({
            'event': 'gtm.'+e.type,
            'gtm.element': e.target,
            'gtm.elementClasses': e.target.className || '',
            'gtm.elementId': e.target.id || '',
            'gtm.elementTarget': e.target.target || '',
            'gtm.elementUrl': e.target.href || e.target.action || '',
            'gtm.originalEvent': e
        });
    }
}

Variable name: generic event handler

Setup tag

Go to Tags-> New -> Type -> Custom HTML

HTML:

<script>
    var eventType = 'change'; // Modify this to reflect the event type you want to listen for
    if (document.addEventListener) {
        document.addEventListener(eventType, {{generic event handler}}, false);
    } else if (document.attachEvent) {
        document.attachEvent('on' + eventType, {{generic event handler}});
    }
</script>

Tag name: onchange listener

Trigger: gtm.js

---

Now, you created everything what you need for tracking onchange events. Next steps is for exact your case, when you want to fire tag when someone translated the page

Enable built-in variable for Click element

Go to Variables-> Built-In variables-> Configure -> Click Element

Create variable for selected language

Go to Variables-> User-Defined variables -> New-> Custom JavaScript

function() {
    var list = document.querySelector('select.goog-te-combo');
    return list ? list.options[list.selectedIndex].value : undefined;
}

Variable name: Selected language

Create trigger for your tag

Go to Triggers -> New -> Type -> Custom Event

Event type: gtm.change

Fires on: Some Custom Events

Click Element - Matches CSS selector - select.goog-te-combo

Trigger name: Page translated

Create final tag, which will fire event, when someone translated the page

This step might be different. It depends, what tag type do you want to fire. In this example i will send event to GA

Go to Tags-> New -> Type -> Universal Analytics

Type: Event

Category: Translate

Action: Translate

Label: {{Selected language}}

Trigger: Page translated

DONE

After this steps you will have working solution

Answer 2

I believe what may be happening is that your trigger is firing before the variable has had time to evaluate.

A neater way to do this would be to define to use the onchange handler of the <select> tag to push an event onto the GTM dataLayer along with the value that was selected. This may look something like this:

<select id="language" onChange="languageSelected(this.selectedIndex);>

Your languageSelected function might look something like this:

function languageSelected(index) {
   dataLayer = dataLayer || [];
   dataLayer.push({'event' : 'languageSelected', 'language' : 'German'});
}

You would then define a dataLayer variable in GTM that reads the language attribute from the dataLayer and then you would define a trigger of type Custom Event where the event name is languageSelected.