Отслеживать событие в Google Analytics при нажатии кнопки отправить

Ответ 1

Есть только 2 способа гарантировать, что 100%, что все формы представления (среди пользователей, которые имеют JS включен и которые не блокируют GA), следующие:

• Вы можете сделать AJAX submit, а затем не беспокоиться о смене страницы и, таким образом, иметь все время в мире для GA, чтобы обрабатывать И ваша новая страница загружалась вместо старой.
• Вы можете заставить форму открыть свое действие в новом окне, оставив все фоновые процессы на главной странице и предотвращая состояние гонки, о которой вы беспокоитесь.

Причиной этого является то, что в Google Analytics нет функции обратного вызова, поэтому вы никогда не можете быть уверены в том, что вы захватываете все отправлений, даже если вы поставили 10-секундный лаг.

В качестве альтернативы вы можете просто передать значение GET на представленную страницу и настроить проверку этой страницы для значения. Если его набор, вы можете отправить вызов trackEvent.

Ответ 2

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

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

_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 - Хит-обратный вызов (спасибо superacuo )

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

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

return !window.ga;

Ответ 3

Для тех, кто имеет дело с универсальной аналитикой google и делает какой-то трюк с hitCallback (событие fx track после проверки, но до отправки формы), имейте в виду, что 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)

Ответ 4

Этот вопрос сейчас несколько лет, и похоже, что Google Analytics предоставила возможность сделать это без хакеров, приведенных выше.

Из документов Google Analytics:

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

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

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

Ответ 5

Если вы не слишком обеспокоены точностью 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);
});

Ответ 6

Если решение 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();
}

Ответ 7

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

Более сложным примером является отслеживание покупок. Вы хотите отключить 5 различных тегов, когда пользователь совершает покупку. Условия гонки и немедленное перенаправление на какую-либо страницу приветствия затрудняют использование простого отслеживания onSubmit. Поэтому я устанавливаю файл cookie со всеми данными, связанными с покупкой, и на любой странице, которую пользователь заканчивает на GTM, распознает куки файл, сработает тэг "точка входа", который будет анализировать файл cookie, нажимать все значения на dataLayer, удалять файлы cookie и то сам тег будет толкать события в dataLayer, тем самым вызывая 5 тегов, которые требуют данных покупки (которые уже находятся в dataLayer).

Ответ 8

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

GTM:

Отслеживать событие в Google Analytics при нажатии кнопки submit довольно просто, используя GTM.

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

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

Ответ 9

Вот как вы выполняете обратные вызовы событий в 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