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-bo');
  return list ? list.options[list.selectedIndex].value : undefined;
}

Above code, will find the drop down menu, which has "goog-te-bo" 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

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-bo');
  return list ? list.options[list.selectedIndex].value : undefined;
}

Above code, will find the drop down menu, which has "goog-te-bo" 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

• javascript
• google-analytics
• event-handling
• google-tag-manager
• dom-events

Share Improve this question Follow edited Sep 14, 2019 at 14:57 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jul 21, 2017 at 20:22 EunicornEunicorn 62166 gold badges1717 silver badges2929 bronze badges 3

• Can you please add information how did you define "Click - Google Translate"? I guess your goal is to fire tag, when someone translated the page. Right? – Victor Leontyev Commented Jul 22, 2017 at 8:53
• @VictorLeontyev For "Click - Google Translate", I chose "Click - All Elements" for "Trigger Type", "Some Clicks" for "This trigger fires on", and "Click Element, matches CSS selector, select.goog-te-bo" for "Fire this trigger when an event occurs and all of these conditions are true". Yes, that is right, my goal is to fire tag when someone translated the page. – Eunicorn Commented Jul 22, 2017 at 22:05
• See the article simoahava./gtm-tips/track-selection-drop-list – Michael Freidgeim Commented Jun 17, 2020 at 23:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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-bo');
    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-bo

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

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.

It's working perfectly fine but gtm.change dropdown class select.goog-te-bo fired in 3 times.