JavaScript: Безопасная отправка целей в Яндекс.Метрику (reachGoal)

Иногда Метрика не загружается (медленная сеть, ошибка на стороне скрипта, CSP), или её блокирует расширение (AdBlock/Privacy). В таком случае прямой вызов ym(...) может привести к ошибкам в консоли, а в худших случаях — сломать логику на странице.

Что решаем: отправляем цели так, чтобы сайт продолжал работать при любом раскладе — Метрика есть/нет, загрузилась позже/не загрузилась вообще.

Готовое решение (безопасная обёртка)

(function() {
	'use strict';

	/**
	 * Безопасная отправка цели в Яндекс.Метрику.
	 * - Не падает, если ym не определён
	 * - Не падает, если reachGoal выбрасывает исключение
	 * - Фильтрует параметры (только объект)
	 */
	function TrackMetrikaGoal(CounterId, GoalId, Params)
	{
		if (!CounterId || !GoalId) {
			return false;
		}

		try
		{
			if (typeof window.ym !== 'function') {
				return false;
			}

			var SafeParams = (Params && typeof Params === 'object') ? Params : undefined;

			window.ym(CounterId, 'reachGoal', GoalId, SafeParams);
			return true;
		}
		catch (e)
		{			
			// Для отладки можно раскомментировать:
			// console.warn('Metrika reachGoal error:', e);
			return false;
		}
	}

	// Экспорт в глобальную область
	window.TrackMetrikaGoal = TrackMetrikaGoal;
})();

Пример использования: делегирование кликов через data-атрибуты

Плюс подхода: не надо плодить обработчики на каждую кнопку. Один listener на документ — и всё.

(function() {
	'use strict';

	var CounterId = 12345678;

	document.addEventListener('click', function(e) {
		var Target = e.target;

		// Фолбэк для старых браузеров без closest()
		var Btn = Target;
		while (Btn && Btn !== document && (!Btn.getAttribute || !Btn.getAttribute('data-ym-goal'))) {
			Btn = Btn.parentNode;
		}

		if (!Btn || Btn === document) {
			return;
		}

		var GoalId = Btn.getAttribute('data-ym-goal');
		var LeadType = Btn.getAttribute('data-lead-type') || 'common';

		window.TrackMetrikaGoal(CounterId, GoalId, {
			lead_type: LeadType
		});
	});
})();

HTML-разметка элементов

<a href="#order" data-ym-goal="order_click" data-lead-type="order">Заказать</a>
<button type="button" data-ym-goal="invoice_click" data-lead-type="invoice">Запросить счёт</button>

Безопасность

• Не отправляй ПД в параметры цели (телефон, email, ФИО, адрес). Максимум: lead_type, тип формы, категория кнопки.
• Данные из data-* — это для аналитики, им нельзя доверять как бизнес-логике.