javascript - total - Seguimiento del evento en Google Analytics al hacer clic en enviar formulario

total de eventos google analytics

Question

Necesito seguir un evento en Google Analytics cuando alguien completa un formulario y hace clic en enviar. La página resultante que aparece es una página tipo tablero de instrumentos estándar, por lo que para seguir el evento en esa página tendría que pasar el evento en la url y luego leer la url y generar el evento google analytics que rastrea el código javascript basado en eso Esta es una página frecuentemente marcada y una página que se vuelve a cargar, se hace clic en ella, etc. Así que prefiero no pasar los eventos de seguimiento en la URL y arruinar los análisis.

En cambio, prefiero hacer algo como el siguiente código de jQuery en la página con el formulario:

$(''#form_id'').submit(function() {
  _gaq.push(''_trackEvent'', ''my category'', ''my action'');
});

El problema que me teme con lo anterior es que voy a perder algunos eventos que se están rastreando porque inmediatamente después de llamar a ese javascript, el navegador va a enviar el formulario e ir a otra página web. Si la imagen de seguimiento utm.gif no se carga a tiempo, echo de menos el evento :(.

¿Está justificado mi miedo? ¿Cómo me aseguro de que no me pierdo eventos rastreados?

Answer 1

Use Google Analytics hitCallback

Puede especificar una función de devolución de llamada personalizada en el objeto rastreador.

_gaq.push([''_set'', ''hitCallback'', function(){}]);

La devolución de llamada se invoca después de que el "hit se envía con éxito".

Si desea rastrear un clic en un botón de enviar y enviar el formulario después, puede usar el siguiente código (usa jQuery) para su evento:

var _this = this; // The form input element that was just clicked
_gaq.push([''_set'',''hitCallback'',function() {
    $(_this).parents(''form'').first().submit(); // Submit underlying form
}]);
_gaq.push([''_trackEvent'', ''My category'', ''My action'']);
return !window._gat; // Ensure that the event is bubbled if GA is not loaded

O bien, como onclick one liner para su elemento <input type="submit"> :

onclick="var _this=this;_gaq.push([''_set'',''hitCallback'',function(){$(_this).parents(''form'').first().submit();}]);_gaq.push([''_trackEvent'',''My category'',''My action'']);return !window._gat;"

Lo que hace es que rastree el evento My category/My action , usa jQuery para encontrar el elemento de formulario subyacente del botón de enviar que acaba de pulsar, y luego envía el formulario completo.

Ver: Google Analytics - Envío de datos a Google Analytics - Hit Callback (gracias supervacuo)

ACTUALIZACIÓN Si está utilizando el código analytics.js moderno con la función ga () definida, puede escribir esto de la siguiente manera:

var _this = this;
ga(''send'', ''event'', ''My category'', ''My action'', {
    ''hitCallback'': function() {
        $(_this).parents(''form'').first().submit();
    }
});

return !window.ga;

Answer 2

Así es como se realizan devoluciones de llamadas de eventos en gtag.js , para garantizar que los datos de Google Analytics se envíen antes de cambiar la URL de la página:

gtag(''event'', ''view_promotion'', { myParameter: myValue, event_callback: function () {
    console.log(''Done!'');
    // Now submit form or change location.href
} });

Fuente: https://developers.google.com/analytics/devguides/collection/gtagjs/sending-hits

Answer 3

Cuando es crucial que se realice un seguimiento de cada envío, generalmente establezco una cookie en el back-end con todos los datos requeridos. A continuación, configure una regla en GTM para activar una etiqueta basada en la existencia de esta cookie de 1ª parte. La etiqueta analiza la cookie para los valores requeridos y hace lo que se requiera con ellos y elimina la cookie.

Un ejemplo más complejo es el seguimiento de compras. Desea disparar 5 etiquetas diferentes cuando el usuario realiza una compra. Las condiciones de carrera y el redireccionamiento inmediato a alguna página de bienvenida hacen que sea difícil confiar en el simple seguimiento "onSubmit". Así que configuré una cookie con todos los datos relacionados con la compra y en cualquier página que el usuario termine en GTM reconocerá la cookie, lanzará una etiqueta de "punto de entrada" que analizará la cookie, enviará todos los valores a dataLayer, eliminará la cookie y a continuación, la etiqueta en sí introducirá los eventos en dataLayer y activará las 5 etiquetas que requieren los datos de compra (que ya están en dataLayer).

Answer 4

Está bien, ya que nos hemos mudado a Universal Analytics, me gustaría responder lo mismo usando GTM y UA.

GTM :

Hacer un seguimiento del evento en google analytics al hacer clic en enviar formulario es bastante fácil usando GTM.

• Crea una etiqueta UA y configura el tipo de event en GTM.
• Complete su Acción de Evento deseada, Categoría y Etiqueta
• Crea el disparador de tipo Presentación de formulario.
• Pon más condiciones para apuntar al botón que deseas

Este es el enfoque mejor, óptimo y fácil para el OP.

Answer 5

Esta pregunta tiene algunos años y parece que Google Analytics ha proporcionado una forma de hacerlo sin los hackeos dados anteriormente.

De los documentos de Google Analytics :

Además de las matrices de comando, también puede insertar objetos de función en la cola _gaq. Las funciones pueden contener cualquier JavaScript arbitrario y, al igual que las matrices de comandos, se ejecutan en el orden en que se insertan en _gaq.

Puede combinar esto con el comando de varios comandos para asegurarse de que se agreguen en orden (y guarde una llamada).

$(''input[type="submit"]'').click(function(e) {
    // Prevent the form being submitted just yet
    e.preventDefault();

    // Keep a reference to this dom element for the callback
    var _this = this;

    _gaq.push(
        // Queue the tracking event
        [''_trackEvent'', ''Your event'', ''Your action''],
        // Queue the callback function immediately after.
        // This will execute in order.
        function() {
            // Submit the parent form
            $(_this).parents(''form'').submit();
        }
    );
});

Answer 6

Mientras que la solución de hitCallback es buena, prefiero configurar una cookie y desencadenar el evento desde la página siguiente. De esta forma, una falla en GA no detendrá mi sitio:

// Function to set the event to be tracked:
function setDelayedEvent(category, action, label, value) {
  document.cookie=''ev=''+escape(category)+''!''+escape(action)+''!''+escape(label)+''!''+value
      +''; path=/; expires=''+new Date(new Date().getTime()+60000).toUTCString();
}

// Code run in every page, in case the previous page left an event to be tracked:
var formErrorCount= formErrorCount || 0;
var ev= document.cookie.match(''(?:;//s*|^)ev=([^!]*)!([^!]*)!([^!]+)!([^!]+)(?:;|/s*$)'');
if (ev && ev.length>2) {
  _gaq.push([''_trackEvent'', unescape(ev[1]), unescape(ev[2]),
     unescape(ev[3]), parseInt(ev[4])]);
  document.cookie=''ev=; path=/; expires=''+new Date(new Date().getTime()-1000).toUTCString();
}

Answer 7

Para aquellos que se ocupan de google analytics universal y hacen algún truco con hitCallback (evento de seguimiento de fx después de la validación pero antes de enviar el formulario), tenga en cuenta que google-analytics.js podría bloquearse, sin embargo, la función ga aún se definirá, por lo tanto, envíe No pasará.

ga(''send'', ''pageview'', event, {
  ''hitCallback'': function() {
    _this.submit();
  }
})
return !window.ga;

Se puede arreglar con la validación que verifica si ga está cargado

ga(''send'', ''pageview'', event, {
  ''hitCallback'': function() {
    _this.submit();
   }
})
return !(ga.hasOwnProperty(''loaded'') && ga.loaded === true)

Answer 8

Si no le molesta el 100% de precisión, puede simplemente retrasar 1 segundo en.

$(''#form_id'').submit(function(e) {
  var form = this;
  e.preventDefault(); // disable the default submit action

  _gaq.push(''_trackEvent'', ''my category'', ''my action'');

  $('':input'', this).attr(''disabled'', true); // disable all elements in the form, to avoid multiple clicks

  setTimeout(function() { // after 1 second, submit the form
    form.submit();
  }, 1000);
});

Answer 9

Solo hay 2 formas de garantizar, 100%, que todas las presentaciones de formularios (entre los usuarios que tienen JS habilitado y que no bloquean GA) son las siguientes:

• Puede hacer una presentación de AJAX, y luego no tener que preocuparse por el cambio de página, y así tener todo el tiempo del mundo para que GA procese Y su nueva página se cargue en lugar de la anterior.
• Puede forzar el formulario para abrir su acción en una nueva ventana, dejando así todos los procesos en segundo plano en la página principal funcionando, y evitando la condición de carrera que le preocupa.

La razón de esto es que Google Analytics no tiene una función de devolución de llamada, por lo que nunca puede estar seguro de que está capturando todos los envíos, incluso si pone un retraso de 10 segundos.

Alternativamente, puede pasar un valor GET a la página enviada y configurar un cheque en esa página para el valor. Si está configurado, puede enviar una llamada a trackEvent.