Решение: как повесить цели метрики на события открытия и закрытие окна fancybox

Яндекс метрика и Google аналитика — мощный инструмент для аналитики сайта, для анализа поведения пользователей, который активно используют сегодня. Те, кто связан с разработкой сайтов, наверняка сталкивались с установкой целей для определенных поведенческих событий — нажатие на кнопку, просмотр ролика, заказ заявки, добавление в корзину и т.п. Одна из задач, которую ставили перед нами заказчики — это события цели метрики на открытие формы fancybox и закрытие формы. Как это сделать?

Вешать события можно с помощью этих двух методов из API библиотеки fancybox: afterLoad - событие перед появлением окна и beforeClose - событие перед закрытием окна.

Сразу приводим код для примера:

$('.modal').on('click',function(){

	$.fancybox({
		type : 'inline',
		href : '.fancy',
		scrolling : 'visible',
		afterLoad : function(){
			yaCounter00000000.reachGoal('FANCY_OPEN');
		},
		beforeClose : function(){
			yaCounter00000000.reachGoal('FANCY_CLOSE');
		}
	});

});

В данном примере при вызове окна кликом на кнопку с классом .modal произойдет событие FANCY_OPEN. А когда Окно закроют — сработает событие FANCY_CLOSE.

Как проверить цель яндекс метрики

Чтобы проверить событие, добавьте к адресу страницы параметр ?_ym_debug=1. К примеру yandex.ru/?_ym_debug=1. Откройте консоль браузера и выполните действие. При успешной настройке вы увидите номер вашего счетчика и ID цели метрики.