Как отслеживать отправку форм на Ajax в Google Analytics и Яндекс Метрике на примере плагина Simple Secure Contact Form

Расскажу на примере моего плагина Simple Secure Contact Form, как же отслеживать отправку форм на Ajax в Google Analytics и Яндекс Метрике. На самом деле это очень просто. Если ваша форма отправляется с помощью Ajax, то для каждой системы аналитики нужно вызвать в случае успеха определенный метод, например:

1. Для Google Analytics используем метод ga:

ga('send', 'event', gaEventCategory, gaEventAction, gaEventLabel);

где gaEventCategory — категория события, gaEventAction — действие, а gaEventLabel — ярлык (описание) события.
Подробнее об отслеживании событий в Google Analytics.

2. Для Яндекс Метрики — reachGoal:

yaCounterXXXXXXXX.reachGoal(ymTargetName);

где XXXXXXXX — ID счетчика в Яндекс Метрике, а ymTargetName — имя цели.
Предполагается, что для обоих систем код уже включен на странице в соответствии с рекомендациями. Подробнее о настройке целей в Яндекс Метрике.

Естественно, перед тем, как отправлять цели в аналитику, их нужно создать.

1. В Google Analytics нужно войти в аккаунт, открыть счетчик из списка и в меню пройти по цепочке: Администратор -> Управление -> Цели представлений. Там нажать «+Цель» и выбрать тип цели «Собственная», потом «Событие».
2. В Яндекс Метрике примерно также: нужно войти в аккаунт, открыть счетчик, нажать на «Настройка» и во вкладке выбрать «Цели». Потом «Добавить цель» и выбрать «Javascript-событие».

Полностью код из плагина:

		$.ajax({
			type: "post",
			dataType: "json",
			url: myAjax.ajaxurl,
			data: form_data,
			success: function(response){
				$parent.addClass('mode-send');
				$parent.children('.after-send-text').css('display', 'block');
				$buttonSpinner.css('display', 'none');
				if (response != 0) {
					// google analytics
					if (gaEventCategory != '' && gaEventAction != '') {
						ga('send', 'event', gaEventCategory, gaEventAction, gaEventLabel);
					}
					// yandex metrika
					if (ymCounterID != '' && ymTargetName != '') {
						window[yaCounter].reachGoal(ymTargetName);
					}
				}
			}
		});

Такая конструкция:

window[yaCounter].reachGoal(ymTargetName);

нужна только для моего плагина, так как я не знаю, какой будет идентификатор счетчика, мне приходится задавать его через переменную yaCounter. Благодаря этому, при использовании моего плагина не нужно ничего настраивать в JavaScript, достаточно добавить данные из аналитики в настройки виджета.

Добавить комментарий