Búsqueda de sitios web

javascript - Google Tag Manager: Seguimiento del valor de etiqueta "Opción" del menú desplegable "Seleccionar"

Estoy teniendo problemas para rastrear el valor de la etiqueta "option" en la etiqueta "select". Actualmente tengo un menú desplegable para el Widget de Traductor de Google donde el usuario puede hacer clic y seleccionar el idioma. Cuando haces clic en el menú desplegable "Seleccionar idioma", podrás ver alemán como opción. Mira las capturas de pantalla adjuntas. He creado un Macro llamado "JS - Google Translate - Select Option" en Google Tag Manager.

Aquí está el código para "JS - Google Translate - Seleccionar opción":

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

El código anterior encontrará el menú desplegable, que tiene "goog-te-combo" como nombre de clase para la etiqueta "select". Luego, verificará si las etiquetas option están disponibles en la etiqueta select y obtendrá el valor de la etiqueta option seleccionada.

También he creado una etiqueta llamada "GA - Event - Google Translate Clicks" y un activador llamado "Click - Google Translate".

Cuando pruebo esto, veo que mi "GA - Evento - Clics de Google Translate" se activa cuando hago clic en el menú desplegable en mi página. Sin embargo, cuando reviso la pestaña "variables" en Google Tag Manager y verifico la variable "JS - Google Translate - Seleccionar Opción", la veo vacía.

Opción de menú desplegable del widget de Google Translator

Google Tag Manager "JS - Google Translate - Seleccionar opción" vacío

Respuesta #1

El problema es que necesitas activar la etiqueta cuando ocurre el evento onchange.

Guía completa sobre cómo rastrear traducciones de páginas, si estás usando el traductor de sitios web de Google

Primero que nada, necesitas configurar un disparador de evento personalizado para el evento onchange (el artículo original sobre eso lo puedes encontrar aquí):

Configurar un oyente de eventos personalizado

Ir a Disparadores-> Nuevo -> Evento Personalizado

  • Nombre del evento: gtm.js
  • Nombre del activador: gtm.js

Configurar variable JS del controlador de eventos

Ir a Variable -> Variables definidas por el usuario -> Nuevo -> Tipo -> JavaScript personalizado

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

Nombre de la variable: manejador de eventos genérico

Etiqueta de configuración

Ve a Etiquetas-> Nuevo -> Tipo -> HTML personalizado

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>

Nombre de la etiqueta: escuchador onchange

Disparador: gtm.js

Ahora, has creado todo lo que necesitas para rastrear los eventos onchange. El siguiente paso es para tu caso exacto, cuando quieras activar una etiqueta cuando alguien traduzca la página

Habilitar variable integrada para hacer clic en el elemento

Ve a Variables-> Variables incorporadas-> Configurar -> Hacer clic en Elemento

Crear variable para el idioma seleccionado

Ir a Variables -> Variables definidas por el usuario -> Nuevo -> JavaScript personalizado

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

Nombre de la variable: Idioma seleccionado

Crear disparador para tu etiqueta

Ir a Disparadores -> Nuevo -> Tipo -> Evento Personalizado

Tipo de evento: gtm.change

Se dispara en: Algunos eventos personalizados

Hacer clic en elemento - Coincide con el selector CSS - select.goog-te-combo

Nombre del desencadenante: Página traducida

Crear etiqueta final, que activará un evento cuando alguien traduzca la página

Este paso podría ser diferente. Depende, qué tipo de etiqueta quieres activar. En este ejemplo enviaré un evento a GA

Ve a Etiquetas-> Nuevo -> Tipo -> Universal Analytics

Tipo: Evento

Categoría: Traducir

Acción: Traducir

Etiqueta: {{Selected language}}

Disparador: Página traducida

HECHO

Después de estos pasos tendrás una solución funcionando

Respuesta #2

Creo que lo que puede estar ocurriendo es que su disparador se activa antes de que la variable haya tenido tiempo de evaluarse.

Una forma más ordenada de hacer esto sería definir el uso del manejador onchange de la etiqueta <select> para enviar un evento al dataLayer de GTM junto con el valor que se seleccionó. Esto puede verse algo así:

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

Tu función languageSelected podría verse algo así:

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

Luego definirías una variable dataLayer en GTM que lea el atributo language del dataLayer y luego definirías un activador de tipo Evento Personalizado donde el nombre del evento sea languageSelected.