Suivre un événement dans Google Analytics en cliquant sur soumettre un formulaire

Question

J'ai besoin de suivre un événement dans google analytics lorsque quelqu'un remplit un formulaire et clique sur le bouton envoyer. La page de résultat est un tableau de bord standard-type de page, afin de suivre l'événement sur cette page, je serais obligé de passer dans l'événement dans l'url, puis de lire l'url et la sortie de la google analytics suivi des événements du code javascript. C'est l'un des plus fréquemment page marquée d'un signet, toutefois, et la page est rechargée, cliqué, etc. Donc j'aurais vraiment préféré ne pas passer de suivi des événements dans l'URL et la vis de l'analytics.

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

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

Le problème que j'ai peur avec ce qui précède est que je vais manquer de certains événements, suivi parce que, immédiatement après l'appel que le javascript, le navigateur va envoyer le formulaire et accédez à une autre page web. Si l'utm.gif le suivi de l'image n'est pas chargée dans le temps, je m'ennuie de l'événement :(.

Est ma crainte est-elle justifiée? Comment puis-je m'assurer de ne pas manquer les événements de suivi?

Answer 1

L'Utilisation De Google Analytics hitCallback

Vous pouvez définir une fonction de rappel personnalisée sur l'objet de suivi à l'aide d'un hitCallback fonction

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

La fonction de rappel est appelée par l'objet de suivi après l'événement est suivi.

Si vous souhaitez suivre un clic sur un bouton de soumission et d'envoyer le formulaire par la suite, vous pouvez utiliser le code suivant (qui 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 onclickun liner 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;"

Ce qu'il fait c'qu'il fait le suivi de l'événement My category/My action, utilise jQuery pour trouver la forme sous-jacente de l'élément de la soumettre le bouton enfoncé, puis envoie le formulaire.

Voir: Google Analytics - Configuration Avancée - Hit de Rappel (merci supervacuo)

Mise à JOUR Si vous utilisez moderne analytics.js code avec ga() la fonction 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;

Answer 2

Il y a que 2 façons de s'assurer, à 100%, que toutes les soumissions de formulaire (parmi les utilisateurs qui ont le JS activé et qui ne bloquent pas la GA) est comme suit:

• Vous pouvez faire une requête AJAX soumettre, et puis ne pas avoir à vous soucier de la page d'évolution, et donc avoir tout le temps dans le monde pour les GA de processus ET de votre nouvelle page se charge en lieu et place de l'ancien.
• Vous pouvez forcer le formulaire pour ouvrir son action dans une nouvelle fenêtre, laissant ainsi tous les processus d'arrière-plan sur la page principale de travail, et la prévention de la condition de la course vous êtes inquiet au sujet de.

La raison pour cela est que Google Analytics ne dispose pas d'une fonction de rappel, de sorte que vous ne pouvez jamais être certain que vous êtes à la capture de tous les soumet, même si vous mettez un 10 secondes de retard.

Alternativement, vous pouvez simplement passer une valeur de la soumise et de la page de configuration pour vérifier que la page de la valeur. Si son ensemble, vous pouvez envoyer un trackEvent appel.

Answer 3

Pour ceux qui traitent avec google analytics universal et font quelque chose avec hitCallback (événement de piste fx après validation mais avant de soumettre le formulaire), gardez à l’esprit que google-analytics.js pourrait potentiellement être bloqué, mais une fonction ga sera toujours définie, alors envoyez ç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)
 

Answer 4

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

À partir du google analytics docs:

En plus de tableaux de commande, vous pouvez aussi appuyer sur la fonction des objets sur le _gaq file d'attente. Les fonctions peuvent contenir n'importe quel code JavaScript et comme la commande des tableaux, elles sont exécutées dans l'ordre dans lequel ils sont poussés dans _gaq.

Vous pouvez combiner cela avec plusieurs de commande en poussant à faire aboslute assurer qu'ils sont ajoutés 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();
        }
    );
});

Answer 5

Tant que la solution hitCallback est bonne, je préfère créer un cookie et déclencher l'événement à partir de la page suivante. De cette manière, un échec de 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();
}