el inimitable Craig Sullivan Me dio una concept para una continuación de mi última publicación sobre seguimiento de abandono de formularios. En este breve tutorial, le mostraré cómo realizar un seguimiento del tiempo que los usuarios dedican a los campos de su formulario. vamos a utilizar el Horarios de usuario tipo de hit y le enviaremos los datos de un solo formulario. Con pequeñas modificaciones, puede ampliar el script para cubrir varios formularios en una página.
Esta sencilla solución rastrea el tiempo que el usuario pasa en cada campo del formulario midiendo la distancia entre los focus evento y el blur o change evento. El primero ocurre cuando se ingresa un campo de formulario, y el segundo depende de si se cambió un valor (change) o no se registró ningún cambio (blur).
El objeto de tiempo que se envía a GA tiene este aspecto:
Categoría de tiempo – Tiempo del campo del formulario de comentarios
Variable de tiempo – Campo de formulario identify valor del atributo
Etiqueta de sincronización – ‘desenfoque’ o ‘cambio’ dependiendo de cómo se salió del campo
Valor de tiempo – Tiempo pasado en el campo en milisegundos
¡Nota! Los tiempos se cuentan contra el 500 visitas/sesión límite en Google Analytics. Por eso hay que tener cuidado al implementar esto. Le sugiero que lo implemente solo en un formulario y por un corto tiempo, y luego vea si las sesiones de los usuarios se calculan mal debido a que superaron el límite de 500 visitas. hay algunos limitaciones adicionales por propiedad también, pero solo cuentan para los aciertos de tiempo y no para todos los aciertos de la sesión.
incógnita
El boletín a fuego lento
Suscríbete al Boletín a fuego lento para recibir las últimas noticias y contenido de Simo Ahava en su bandeja de entrada de correo electrónico.
La etiqueta HTML personalizada
La etiqueta HTML personalizada se ve así:
<script>
(operate() {
var type = doc.querySelector('#commentform');
var fields = {};
var enterField = operate(identify) {
fields(identify) = new Date().getTime();
}
var leaveField = operate(e) {
var timeSpent;
var fieldName = e.goal.identify;
var leaveType = e.sort;
if (fields.hasOwnProperty(fieldName)) {
timeSpent = new Date().getTime() - fields(fieldName);
if (timeSpent > 0 && timeSpent < 1800000) {
window.dataLayer.push({
'occasion' : 'fieldTiming',
'timingCategory' : 'Remark Kind Subject Timing',
'timingVariable' : fieldName,
'timingLabel' : leaveType,
'timingValue' : timeSpent
});
}
delete fields(fieldName);
}
}
if (type) {
type.addEventListener('focus', operate(e) { enterField(e.goal.identify); }, true);
type.addEventListener('blur', operate(e) { leaveField(e); }, true);
type.addEventListener('change', operate(e) { leaveField(e); }, true);
}
})();
script>Para activar esta etiqueta, le sugiero que cree una Activador de vista de página que solo activa esta etiqueta en las páginas donde existe su formulario.
A continuación, cambie la primera variable. var type = doc.querySelector('#commentform'); para seleccionar el formulario que desea rastrear. En mi sitio, esto resulta ser un formulario con ID #commentform.
Siempre que un focus Se detecta un evento, se actualiza una tabla hash con el nombre del campo del formulario y la hora en que se ingresó el campo.
Luego, cuando se sale del campo, y ya sea un blur o change Se registra, se calcula el tiempo transcurrido en el campo y luego el nombre del campo se elimina de la tabla hash. Si no elimina el campo, aparecerá un change El evento enviaría el tiempo dos veces, porque cuando el usuario edita el valor de un campo y lo abandona, aparece un change se envía primero y luego un blur.
De todos modos, siéntase libre de cambiar el valor de la variable ‘timingCategory’ en el dataLayer.push(). Utilizo ‘Sincronización del campo del formulario de comentarios’, ya que eso es lo que estoy haciendo aquí.
Finalmente, si el selector de formulario que usa en la primera declaración de variable del script funciona, los tres oyentes se adjuntan al formulario con sus respectivas devoluciones de llamada.
Este es el guión en sí. Concluiremos la configuración en el próximo capítulo.
Variables de etiqueta de tiempo, disparador y capa de datos
Para que la configuración funcione, necesitamos una etiqueta de tiempo, un activador de evento personalizado y cuatro variables de capa de datos.
Variables de capa de datos
Primero cree las variables de la capa de datos. necesitas cuatro Variables con la siguiente configuración:
Nombre: {{DLV – categoría de tiempo}}
Nombre de variable de capa de datos: sincronizaciónCategoría
Nombre: {{DLV – variable de tiempo}}
Nombre de variable de capa de datos: sincronizaciónVariable
Nombre: {{DLV – etiqueta de tiempo}}
Nombre de variable de capa de datos: sincronizaciónEtiqueta
Nombre: {{DLV – valor de tiempo}}
Nombre de variable de capa de datos: valor de tiempo
Activador de evento personalizado
El gatillo es un Activador de evento personalizado con las siguientes configuraciones:
Nombre: Evento – campoTiempo
Fuego encendido/nombre del evento: campoSincronización
Etiqueta de sincronización
Finalmente, necesitas crear la etiqueta de tiempo. Crear una nueva etiqueta de tipo Google Analyticsy establezca las siguientes configuraciones:
Nombre: UA – Cronometraje – Campo de formulario Cronometraje
ID de seguimiento: UA-XXXXXX-Y (sustituya con su identificación de propiedad)
Tipo de pista: Momento
Var: {{DLV – variable de tiempo}}
Categoría: {{DLV – categoría de tiempo}}
Valor: {{DLV – valor de tiempo}}
Etiqueta: {{DLV – etiqueta de tiempo}}
Adjunte el activador que creó en la sección anterior a esta etiqueta.
¡Y ahora estás listo para comenzar! Cada interacción con los campos de su formulario ahora debería enviar el hit de sincronización. Puedes encontrar los resultados en Google Analytics, accediendo a Comportamiento -> Velocidad del sitio -> Horarios de usuario.
Resumen
Como mencioné, esta es una solución muy easy. Simplemente mide el tiempo dedicado a cada campo del formulario y lo informa como un tiempo de usuario a Google Analytics. Es posible que quieras modificarlo un poco para que sea más robusto y debes tener en cuenta las 500 visitas/sesión limitación que GA impone a las sesiones.
Puedes hacer algunas cosas interesantes con los datos, como crear un histograma donde sea más fácil visualizar los campos problemáticos. También sería interesante ver si el tiempo pasado en un campo se correlaciona con abandono de formulario.