Отследить событие в Google Analytics после нажатия на кнопку отправить - PullRequest
62 голосов
/ 03 ноября 2010

Мне нужно отслеживать событие в Google Analytics, когда кто-то заполняет форму и нажимает кнопку "Отправить".Получающаяся в результате страница представляет собой стандартную страницу типа панели инструментов, поэтому для отслеживания события на этой странице мне нужно было бы передать событие в URL, а затем прочитать URL-адрес и вывести код JavaScript отслеживания событий Google Analytics.основываясь на этом.Это часто добавляемая в закладки страница, и страница, которая перезагружается, переходит по ссылке и т. Д. Поэтому я бы действительно не хотел пропустить отслеживание событий в URL-адресе и не испортить аналитику.

Вместо этого, я бы сильноскорее сделайте что-то вроде следующего кода jQuery на странице с формой:

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

Проблема, которую я боюсь из-за вышеизложенного, заключается в том, что я пропущу отслеживание некоторых событий, потому что сразу после вызова этого javascriptбраузер собирается отправить форму и перейти на другую веб-страницу.Если изображение отслеживания utm.gif не загружается вовремя, я пропускаю событие: (.

Оправдан ли мой страх? Как я могу не пропустить отслеживание событий?

Ответы [ 9 ]

143 голосов
/ 17 сентября 2012

Использование 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 - Обратный вызов Hit (спасибо supervacuo)

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

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

return !window.ga;
17 голосов
/ 13 ноября 2010

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

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

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

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

12 голосов
/ 07 июля 2014

Для тех, кто имеет дело с универсальной аналитикой google и выполняет некоторые хитрости с hitCallback (событие отслеживания fx после проверки, но перед отправкой формы), имейте в виду, что google-analytics.js потенциально может быть заблокирован, однако функция ga все равно будет определена так что отправлять не получится.

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)
7 голосов
/ 01 ноября 2012

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

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

В дополнение к массивам команд вы также можете помещать функциональные объекты в очередь _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();
        }
    );
});
6 голосов
/ 16 мая 2013

Когда решение 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();
}
6 голосов
/ 03 ноября 2010

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

2 голосов
/ 02 ноября 2017

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

1 голос
/ 23 мая 2017

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


GTM :

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

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

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

enter image description here

0 голосов
/ 27 ноября 2014

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

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

...