Отслеживание событий в google analytics после нажатия кнопки отправить форму

использовать Google Analytics hitCallback

вы можете указать пользовательскую функцию обратного вызова на объекте tracker.

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

обратный вызов вызывается после того, как " хит успешно отправлен."

если вы хотите отслеживать нажатие на кнопку "Отправить" и отправить форму после этого вы можете использовать следующий код (используется jQuery) для вашего мероприятия:

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

или onclickодин вкладыш для <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;"

что он делает, что он отслеживает событие My category/My action, использует jQuery для поиска Базового элемента формы только что нажатой кнопки отправки, а затем отправляет всю форму.

посмотреть: Google Analytics-отправка данных в Google Analytics-хит обратного вызова (спасибо supervacuo)

обновление Если вы используете современную аналитику.код js с определенной функцией ga (), вы можете написать это следующим образом:

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

return !window.ga;

для тех, кто имеет дело с Google analytics universal и делает какой-то трюк с hitCallback (f.x. отслеживать событие после проверки, но до отправки формы) имейте в виду, что google-analytics.JS потенциально может быть заблокирован, однако функция ga все равно будет определена, поэтому submit не произойдет.

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

может быть исправлена с проверкой, что проверить, если ga загружен

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

этот вопрос уже несколько лет, и кажется, что google analytics предоставил способ сделать это без хаков, приведенных выше.

С Google analytics docs:

в дополнение к командным массивам вы также можете помещать объекты функций в очередь _gaq. Функции могут содержать любые произвольные JavaScript и подобные массивы команд, они выполняются в том порядке, в котором они помещаются на _gaq.

вы можно объединить это с нажатием нескольких команд, чтобы убедиться, что они добавлены по порядку (и сохранить вызов).

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

Если вы не слишком беспокоитесь о 100% точности,вы можете просто вставить 1-секундную задержку.

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

хотя решение hitCallback хорошее, я предпочитаю устанавливать cookie и запускать событие со следующей страницы. Таким образом, сбой в GA не остановит мой сайт:

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

вот как вы делаете обратные вызовы событий в gtag.js, чтобы убедиться, что данные Google Analytics отправляются перед изменением URL страницы:

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

Источник: https://developers.google.com/analytics/devguides/collection/gtagjs/sending-hits

хорошо, так как мы перешли к Universal analytics, я хотел бы ответить на то же самое с помощью GTM и UA.

---

GTM:

отслеживать события в google analytics при нажатии на форму отправки довольно легко с помощью GTM.

• создайте тег UA и установите тип в event в GTM.
• заполните нужное действие события, категорию и метку
• создать триггер типа форма представления.
• поставить больше условия для целевой кнопки вы хотите

Это лучший, оптимальный и легкий подход для OP.

когда важно, чтобы каждая отправка отслеживалась, я обычно устанавливаю файл cookie на бэкэнд со всеми необходимыми данными. Затем установите правило в GTM, чтобы запустить тег, основанный на существовании этого куки-файла 1-й партии. Тег анализирует куки для требуемых значений и делает все, что требуется с ними, и удаляет куки.

более сложным примером является отслеживание покупок. Вы хотите, чтобы уволить 5 различных тегов, когда пользователь выполняет покупку. Условия гонки и немедленное перенаправление на некоторые страницы приветствия затрудняют использование простого отслеживания "onSubmit". Так что я установить cookie с все покупки, связанные с данными и на какой странице пользователь попадает на ГТМ будет распознавать печенье, огонь от "точки входа" тег, который будет парсить куки, нажимаем все значения для уровня данных, удалить файлы cookie, а затем тег сам будет подталкивать события для уровня данных, тем самым запустив 5 теги, которые требуют приобретения данных (которые уже в уровень данных).