Настройка отслеживания целей типа reachGoal через iframe

Недавно в работе над одним из сайтов мне потребовалось разместить отслеживание цели типа reachGoal на кнопке оплаты.

При чем оплата была реализована в виде кода Яндекс.Кассы, который выглядит примерно вот так

<iframe src="https://money.yandex.ru/quickpay/button-widget?targets=Назначение платежа&amp;amp;default-sum=450&amp;amp;button-text=11&amp;amp;any-card-payment-type=on&amp;amp;button-size=s&amp;amp;button-color=white&amp;amp;fio=on&amp;amp;phone=on&amp;amp;mail=on&amp;amp;successURL=http%3A%2F%2Fwww.sitename.ru%2Fpayment-result%2F&amp;amp;quickpay=small&amp;amp;account=11111111111111111&amp;amp;" width="127" height="25" frameborder="0" allowtransparency="true" scrolling="no"></iframe>

То есть код кнопки добавлен через iframe. Но события onclick не срабатывают на содержимое iframe, поэтому воспользуемся jQuery плагином iframeTracker. Он будет вызывать callback-функцию, когда курсор кликнет в любом месте внутри iframe

Для подключения jQuery плагина разместим перед закрывающим тэгом body подключение библиотеки jQuery и непосредственно самого плагина

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/finalclap/iframeTracker-jquery/master/jquery.iframetracker.js"></script>

И вызовем

$(document).ready(function(){
       $('.submit iframe').iframeTracker({
		blurCallback: function(){
			yaCounter12345678.reachGoal('goal-name'); 
			ga('send', 'event', 'goals', 'goal-name'); 
			return true;
		}
	});
});

Все. Теперь при клике на кнопку, размещенную в пределах iframe наши цели будут прекрасно отслеживаться. Отдельно стоит заметить, что проверить корректность настройки целей удобно в браузере, добавив GET параметр ?_ym_debug=1 к URL адресу.

Затем можно нажать F12 и в консоли посмотреть корректность отслеживания цели. Должно быть примерно так: