web-dev-qa-db-fra.com

Suivre l'événement dans google analytics en cliquant sur soumettre le formulaire

J'ai besoin de suivre un événement dans Google Analytics lorsque quelqu'un remplit un formulaire et clique sur Envoyer. La page résultante qui apparaît est une page de type tableau de bord standard, donc pour suivre l'événement sur cette page, je devrais passer l'événement dans l'url, puis lire l'url et sortir le code javascript de suivi des événements google analytics basé sur elle. Il s'agit cependant d'une page fréquemment mise en signet et d'une page qui est rechargée, sur laquelle vous avez cliqué, etc. Je préfère donc ne pas passer les événements de suivi dans l'URL et bousiller l'analyse.

Au lieu de cela, je préfère de loin faire quelque chose comme le code jQuery suivant sur la page avec le formulaire:

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

Le problème que je crains avec ce qui précède est que je vais manquer certains événements suivis car immédiatement après avoir appelé ce javascript, le navigateur va soumettre le formulaire et aller sur une autre page Web. Si l'image de suivi utm.gif n'est pas chargée à temps, l'événement me manque :(.

Ma peur est-elle justifiée? Comment puis-je m'assurer de ne pas manquer les événements suivis?

javascriptjquerygoogle-analyticsanalytics
62
at.

Il n'y a que 2 façons de garantir, à 100%, que toutes les soumissions de formulaires (parmi les utilisateurs qui ont activé JS et qui ne bloquent pas GA) sont les suivantes:

  • Vous pouvez faire un AJAX soumettre, puis ne pas avoir à vous soucier du changement de page, et ainsi avoir tout le temps du monde pour GA à traiter ET votre nouvelle page à charger à la place de l'ancienne.
  • Vous pouvez forcer le formulaire à ouvrir son action dans une nouvelle fenêtre, laissant ainsi tous les processus d'arrière-plan sur la page principale fonctionner, et éviter les conditions de concurrence qui vous inquiètent.

La raison en est que Google Analytics n'a pas de fonction de rappel, vous ne pouvez donc jamais être certain de capturer tous des soumissions, même si vous mettez un délai de 10 secondes.

Alternativement, vous pouvez simplement passer une valeur GET à la page soumise et configurer une vérification sur cette page pour la valeur. S'il est défini, vous pouvez envoyer un appel trackEvent.

17
Yahel

Utilisez Google Analytics hitCallback

Vous pouvez spécifier une fonction de rappel personnalisée sur l'objet de suivi.

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

Le rappel est appelé après que le "hit a été envoyé avec succès".

Si vous souhaitez suivre un clic sur un bouton d'envoi et envoyer le formulaire par la suite, vous pouvez utiliser le code suivant (utilise jQuery) pour votre événement:

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

Ou comme onclickune doublure pour votre <input type="submit"> élément:

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

Qu'est-ce qu'il fait qu'il suit l'événement My category/My action, utilise jQuery pour rechercher l'élément de formulaire sous-jacent du bouton d'envoi que vous venez d'appuyer, puis soumet le formulaire entier.

Voir: Google Analytics - Envoi de données à Google Analytics - Hit Callback (merci supervacuo)

[~ # ~] update [~ # ~] Si vous utilisez du code analytics.js moderne avec la fonction ga () définie, vous pouvez écrire ceci comme suit:

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

return !window.ga;
144
flu

Pour ceux qui traitent avec google analytics universal et font quelques trucs avec hitCallback (événement de suivi fx après validation mais avant de soumettre le formulaire) gardez à l'esprit que google-analytics.js pourrait potentiellement être bloqué, cependant la fonction ga sera toujours définie, donc soumettez ça n'arrivera pas.

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

Peut être corrigé avec une validation qui vérifie si ga est chargé

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

Cette question remonte à quelques années maintenant, et il semble que google analytics ait fourni un moyen de le faire sans les hacks donnés ci-dessus.

Depuis les documents Google Analytics :

En plus des tableaux de commandes, vous pouvez également pousser des objets de fonction dans la file d'attente _gaq. Les fonctions peuvent contenir n'importe quel tableau arbitraire JavaScript et comme les tableaux de commandes, ils sont exécutés dans l'ordre dans lequel ils sont poussés sur _gaq.

Vous pouvez combiner cela avec des poussées à commandes multiples pour vous assurer qu'elles sont ajoutées dans l'ordre (et enregistrer un appel).

$('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();
        }
    );
});
7
epocsquadron

Bien que la solution hitCallback soit bonne, je préfère créer un cookie et déclencher l'événement à partir de la page suivante. De cette façon, un échec dans GA n'arrêtera pas mon site:

// 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();
}
6
jsalvata

Si vous n'êtes pas trop gêné par une précision de 100%, vous pouvez simplement coller un délai d'une seconde.

$('#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);
});
6
lonesomeday

Voici comment vous effectuez des rappels d'événements dans gtag.js, pour vous assurer que les données Google Analytics sont envoyées avant de modifier l'URL de la page:

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

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

2
Tom Söderlund

D'accord, puisque nous sommes passés à Universal Analytics, je voudrais répondre de la même manière en utilisant GTM et UA.

[~ # ~] gtm [~ # ~] :

Suivre l'événement dans google analytics en cliquant sur soumettre le formulaire est assez facile à utiliser GTM.

  • Créez une balise UA et définissez le type sur event dans GTM.
  • Remplissez l'action d'événement, la catégorie et le libellé souhaités
  • Créez le déclencheur de type Soumission de formulaire.
  • Mettez plus de conditions pour cibler le bouton que vous désirez

Il s'agit de la meilleure approche, optimale et facile à vivre pour le PO.

enter image description here

1
Tushar

Lorsqu'il est crucial que chaque soumission soit suivie, je place généralement un cookie sur le backend avec toutes les données requises. Ensuite, configurez une règle dans GTM pour déclencher une balise en fonction de l'existence de ce cookie tiers. La balise analyse le cookie pour les valeurs requises et fait tout ce qui est nécessaire avec eux et supprime le cookie.

Un exemple plus complexe est le suivi des achats. Vous souhaitez déclencher 5 balises différentes lorsque l'utilisateur effectue un achat. Les conditions de course et la redirection immédiate vers une page d'accueil rendent difficile le recours à un suivi "onSubmit" simple. J'ai donc mis un cookie avec toutes les données liées à l'achat et sur n'importe quelle page que l'utilisateur finit sur GTM reconnaîtra le cookie, déclenchera une balise "point d'entrée" qui analysera le cookie, poussera toutes les valeurs vers dataLayer, supprimera le cookie et alors la balise elle-même poussera les événements vers dataLayer, déclenchant ainsi les 5 balises qui nécessitent les données d'achat (qui sont déjà dans dataLayer).

0
Alexander Filatov