Śledź wydarzenie w google analytics po kliknięciu formularza wyślij

Użyj Google Analytics hitCallback

Możesz określić niestandardową funkcję wywołania zwrotnego w obiekcie trackera.

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

Wywołanie zwrotne jest wywoływane po pomyślnym wysłaniu "hit"."

Jeśli chcesz śledzić kliknięcie przycisku Wyślij i wysłać formularz, możesz użyć następującego kodu (używa jQuery) dla Twojego wydarzenia:

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

Lub jako onclick jedna linijka dla Twojego <input type="submit"> elementu:

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

Co to robi, że śledzi Zdarzenie My category/My action, używa jQuery, aby znaleźć element formularza podstawowego przycisku Wyślij, po prostu nacisnął, a następnie przesyła cały formularz.

Zobacz: Google Analytics-wysyłanie danych do Google Analytics-Hit Callback (dzięki supervacuo)

Aktualizacja Jeśli korzystasz z nowoczesnej analityki.kod js z zdefiniowaną funkcją ga () można zapisać w następujący sposób:

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

return !window.ga;

Dla tych, którzy mają do czynienia z Google analytics universal i robi jakąś sztuczkę z hitCallback (f. X. track zdarzenia po walidacji, ale przed przesłaniem formularza) należy pamiętać, że google-analytics.js potencjalnie może zostać zablokowany, jednak funkcja ga będzie nadal zdefiniowana, więc submit nie nastąpi.

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

Można naprawić za pomocą walidacji, która sprawdza, czy ga jest załadowana

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

To pytanie ma już kilka lat i wydaje się, że google analytics dostarczył sposób, aby to zrobić bez hacków podanych powyżej.

Z google analytics docs :

Oprócz tablic poleceń, można również wepchnąć obiekty funkcji do kolejki _gaq. Funkcje mogą zawierać dowolny JavaScript i podobnie jak tablice komend, są wykonywane w kolejności, w jakiej są wypychane na _gaq.

Możesz połączyć to z multiple-command push to make aboslute sure that they are added in order (and save a call).

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

Jeśli nie przejmujesz się 100% dokładnością, możesz po prostu włożyć 1-sekundowe opóźnienie.

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

Chociaż rozwiązanie hitCallback jest dobre, wolę ustawienie pliku cookie i wyzwalanie zdarzenia z następnej strony. W ten sposób awaria w GA nie zatrzyma mojej strony:

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

Tak się robi wywołania zdarzeń w gtag.js, aby upewnić się, że dane Google Analytics są wysyłane przed zmianą adresu URL strony:

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

Źródło: https://developers.google.com/analytics/devguides/collection/gtagjs/sending-hits

Ok ponieważ przeszliśmy do Universal analytics, chciałbym odpowiedzieć na to samo za pomocą GTM i UA.

GTM:

Śledź Zdarzenie w google analytics po kliknięciu formularza wyślij jest dość łatwe za pomocą GTM.

• Utwórz znacznik UA i ustaw typ na event w GTM.
• wypełnij żądaną akcję wydarzenia, kategorię i Etykietę
• Utwórz WYZWALACZ wysyłania formularza typu.
• umieścić więcej warunków, aby celować przycisk ty desire

Kiedy ważne jest śledzenie każdego zgłoszenia, Zwykle umieszczam plik cookie w backendzie ze wszystkimi wymaganymi danymi. Następnie Ustaw regułę w GTM, aby odpalić tag na podstawie istnienia tego 1st party cookie. Tag przetwarza plik cookie dla wymaganych wartości i robi z nimi wszystko, co jest wymagane, i usuwa plik cookie.

Bardziej złożonym przykładem jest Śledzenie zakupów. Chcesz odpalić 5 różnych tagów, gdy użytkownik dokona zakupu. Warunki wyścigowe i natychmiastowe przekierowanie na jakieś mile widziane strona utrudnia poleganie na prostym śledzeniu "onSubmit". Tak więc ustawiłem plik cookie ze wszystkimi danymi związanymi z zakupem i na każdej stronie użytkownik kończy się na GTM rozpozna plik cookie, odpalić "entry point" tag, który będzie analizować plik cookie, push wszystkie wartości do dataLayer, usunąć plik cookie, a następnie sam tag będzie push zdarzeń do dataLayer tym samym wyzwalając 5 tagi, które wymagają danych zakupu (który jest już w dataLayer).