Thu. Dec 5th, 2024

Seguimiento de búsquedas de autocompletado en Google Tag Supervisor


La búsqueda de autocompletado es algo complicado de rastrear. La lógica subyacente es que cuando el usuario comienza a introducir caracteres en un formulario de búsqueda, la búsqueda sugiere resultados basados ​​en una entrada limitada. Si el usuario no está satisfecho con los resultados, puede seguir añadiendo caracteres a la búsqueda, aumentando así la precisión. A menudo, también existe la opción de volver a una búsqueda regular con lo que ya ha escrito. El seguimiento de esta lógica en herramientas como Google Analítico Es difícil, porque realmente no hay forma de saberlo. Si la búsqueda fue exitosa.

Tomemos como ejemplo la captura de pantalla anterior. El usuario ha escrito ban en el campo de búsqueda y han recibido una lista de elementos de búsqueda con los que proceder. Si ahora eligen cualquier elemento de esa lista, ¿Se consideraría exitosa la búsqueda?

Sí. Y (tal vez) no. Sí, sería una búsqueda exitosa porque el usuario hizo clic en un elemento de la lista, lo que valida la sugerencia. Y (tal vez) no, porque no tenemos thought de si ese es el elemento que el usuario estaba buscando. buscando en primer lugarSi el objetivo de nuestra búsqueda es hacer coincidir una respuesta con una consulta, entonces cualquier clic en los resultados de búsqueda es un éxito. Si el objetivo de nuestra búsqueda es hacer coincidir una respuesta con la intención authentic de la consulta, entonces solo un determinado tipo de clic en el resultado de búsqueda es un éxito.

Esto es adentrarse demasiado en la ontología de la búsqueda y la intención, así que voy a detenerme aquí en la filosofía. Sin embargo, lo que sí quiero mostrarles es una forma bastante sencilla de realizar un seguimiento de lo que buscan los usuarios en el campo de búsqueda de autocompletado, utilizando Administrador de etiquetas de GoogleDe todas formas, depende de usted descifrar si las búsquedas tienen éxito.


incógnita


El boletín informativo de Simmer

Suscríbete a la Boletín informativo de Simmer ¡Para recibir las últimas noticias y contenidos de Simo Ahava en tu bandeja de entrada de correo electrónico!

Cómo funciona

La configuración es básicamente solo una Etiqueta HTML personalizadaEn esta etiqueta, escribiremos un detector personalizado para el keydown Evento del navegador que se registra cuando el usuario presiona una tecla. Debe proporcionar una duración mínima de búsqueda para este controlador, así como el tiempo de espera que desea que espere el navegador antes de enviar un término de búsqueda a Google Analytics (o cualquier plataforma con la que desee utilizarlo).

Por ejemplo, si configura minLength = 3 y timeout = 2000El controlador solo enviará búsquedas que tengan al menos tres caracteres de longitud y hayan transcurrido 2 segundos desde que se escribió el último carácter. Esto es necesario para eliminar las pulsaciones de teclas accidentales y los términos de búsqueda con muy poca información para ser útiles.

El evento de búsqueda ocurre entonces cuando han pasado dos segundos desde que se escribió el último carácter O cuando el usuario presiona la tecla Enter O cuando el foco abandona el campo de búsqueda.

El código está todo contenido en un solo Etiqueta HTML personalizada que dispara en el DOM listo disparador. Entonces necesitarás un Activador de evento personalizado para disparar cuando se registra una búsqueda válida, así como un Variable de capa de datos para capturar ese término de búsqueda.

1. La etiqueta HTML personalizada

Aquí está el código que ejecuta todo:

<script>
  (operate() {
    // Set searchField to the search enter area.
    // Set timeout to the time you need to wait after the final character in milliseconds.
    // Set minLength to the minimal variety of characters that constitutes a legitimate search.
    var searchField = doc.querySelector('enter#search-field'),
        timeout = 2000,
        minLength = 3;

    var textEntered = false;

    var timer, searchText;
    
    var handleInput = operate() {
      searchText = searchField ? searchField.worth : '';
      if (searchText.size < minLength) {
        return;
      }
      window.dataLayer.push({
        occasion: 'customSearch',
        customSearchInput: searchText
      });
      textEntered = false;
    };
    
    var startTimer = operate(e) {
      textEntered = true;
      window.clearTimeout(timer);
      if (e.keyCode === 13) {
        handleInput();
        return;
      }
      timer = setTimeout(handleInput, timeout);
    };
    
    if (searchField !== null) {
      searchField.addEventListener('keydown', startTimer, true);
      searchField.addEventListener('blur', operate() {
        if (textEntered) {
          window.clearTimeout(timer);
          handleInput();
        }
      }, true);
    }
  })();
script>

Primero, necesitas definir algunas variables de utilidad.

  • Colocar searchField para capturar el elemento HTML del campo de búsqueda. Este es el elemento al que se adjuntarán los controladores.

  • Colocar timeout al tiempo en milisegundos Desea que el script espere después de que se haya escrito el último carácter en el campo. Esto es para evitar que el evento de búsqueda se realice con demasiada frecuencia, especialmente cuando la gente escribe lentamente.

  • Colocar minLength hasta el número mínimo de caracteres que constituye una búsqueda. Si la longitud de la búsqueda es inferior a este número, no se registrará.

El handleInput El método comprueba si la búsqueda es lo suficientemente larga. Si lo es, se envía un objeto a dataLayer con los siguientes pares clave-valor:

  • occasion: 'customSearch'que usaremos para crear el disparador de evento personalizado que activa cualquier etiqueta que desee cuando se registra una búsqueda.

  • customSearchInput: searchTextque captura el texto que el usuario escribió en el campo de búsqueda.

El startTimer El método se ejecuta cada vez que el usuario escribe algo en el campo de búsqueda. Primero, detiene el temporizador precise (que está contando el tiempo hasta el closing). timeout límite), porque queremos reiniciar el temporizador con cada pulsación de tecla.

A continuación, verifica si la tecla presionada fue la tecla Enter (keyCode === 13). Si así fuera, entonces lo interpretamos como una búsqueda válida y ejecutamos el handleInput método. Finalmente, el cronómetro se pone en marcha de nuevo y, una vez que el cronómetro alcanza el timeout límite, handleInput se llama.

Las filas finales del script agregan el keydown y blur oyentes del campo de búsqueda para rastrear las pulsaciones de teclas y si el foco abandona el campo de búsqueda, respectivamente.

2. Los detonantes

Para despedir al Etiqueta HTML personalizada arriba, usa un DOM listo Tiene sentido activar el activador solo en páginas donde se encuentra el formulario de búsqueda, por lo que agregar una condición de variable DOM al activador no es una mala thought.

De esta manera, su detector de búsqueda solo se activará en páginas con el campo de búsqueda (¡sensato!).

A continuación, necesitarás un Activador de evento personalizado Para activar sus etiquetas cuando se registra una búsqueda exitosa:

Como puedes ver, también estoy comprobando si el campo de búsqueda tenía algún texto. Esto es, nuevamente, una precaución sensata para evitar falsos positivos si algo sale mal con el script.

3. La variable de la capa de datos

La variable de capa de datos que necesitará para capturar el término de búsqueda es easy:

Esta variable de capa de datos extrae el valor de la clave customSearchInputimpulsado por el script después de una búsqueda grabada exitosamente.

Poniéndolo todo junto

Ahora que ya tienes los componentes, es hora de juntarlos todos. A continuación, se muestra un ejemplo en el que utilizo una etiqueta de Common Analytics para enviar el término de búsqueda a Google Analytics mediante un parámetro de consulta personalizado.

La clave es la web page campo, que se sobrescribe con:

/search/?q={{DLV – entrada de búsqueda personalizada}}

Por lo tanto, cuando Common Analytics se activa con el Evento – Búsqueda personalizada gatillo, el web page El campo se envía con la ruta personalizada /search/?q=término de búsqueda. Entonces si escribiera uunilohi En el campo de búsqueda, la ruta de la página enviada a GA sería /buscar/?q=uunilohi.

Después de esto, todo lo que necesitas hacer es ir a Ver configuración en Google Analytics y configure el parámetro q ser el parámetro de búsqueda del sitio que utiliza Google Analytics para crear los informes de búsqueda del sitio.

Resumen

El seguimiento de la búsqueda de autocompletar es difícil no solo por las restricciones técnicas, sino porque es difícil determinar la intención authentic con solo unos pocos caracteres con los que trabajar.

Se puede argumentar que CUALQUIER búsqueda que precede a un clic en los resultados de búsqueda o incluso a una conversión es exitosa, y tiendo a estar de acuerdo con esto. Sin embargo, especialmente para los creadores de contenido, es importante alinear las búsquedas con importante Resultados, no cualquier resultado que el usuario encuentre atractivo. Por este motivo, es importante realizar un seguimiento de las búsquedas parciales, así como de las búsquedas con entradas refinadas.

¿Cómo ha solucionado el problema de la búsqueda de autocompletado? ¿Confía en los informes de búsqueda del sitio cuando solo ve búsquedas parciales? ¿Le resulta útil esta información al optimizar el sitio para que responda mejor a búsquedas complejas?

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *