Добавление целей для Javascript-событий в Яндекс Метрике и Google Analytics

Цели в Google Analytics
Устанавливаем расширение в браузер Chrome - Google Analytics Debugger (GA Debug), чтобы видеть в консоли результаты срабатывания javascript-событий.
Дальше в html коде формы пишем в onsubmit
<form enctype="multipart/form-data" action="/sendform.php" id="callback_form" class="main-form" onsubmit="ga('send', 'event', 'Form', 'Callback', 'Send');yaCounterXXXXXXXX.reachGoal('ZakazatZvonok');" method="post"> ...

И в <head> страницы добавляем код:
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXX...-XX', 'auto'); // Creates a tracker. ga('send', 'pageview'); // Sends a pageview. ga('set', 'userId', 'USER_ID'); </script> ... <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXX...-XX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-XXXX...-XX'); </script>
Цели в Яндекс Метрике (старый набор методов - yaCounter...)
Мы добавили выше на форму старый способ: yaCounterXXXXXXXX.reachGoal('ZakazatZvonok');
Он работает со старой версией кода счетчика
Новый такой (использовать с текущей версией кода счетчика из Метрики):
onsubmit="ym(XXXXXX, 'reachGoal', 'TARGET_NAME'); return true;"
В Метрике добавляем Цель с типом условия Javascript-событие и указываем идентификатор ZakazatZvonok.
И в <head> добавляем
<!-- Yandex.Metrika counter --> <script type="text/javascript" > (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounterXXXXXXXX = new Ya.Metrika2({ id:XXXXXXXX, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/tag.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks2"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/XXXXXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->
Для проверки цели на сайте пишем http://example.com/?_ym_debug=1 и смотрим в консоль.
Доки:
https://developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 0 Opencart: Установка мета тега Keywords для главной страницы через админку (05.12.2013)
- 0 Даб-даб-даб. Просто прикольная девушка по имени Майле Охуе в гугле хорошо объясняет. (24.04.2013)
- 0 Добавляем в <title> название категории Joomla (22.08.2013)
- Асинхронная загрузка css (21.01.2021)
- Что такое SEO-продвижение (30.07.2019)
- Где заказать качественные seo услуги? (07.03.2019)
- Добавление целей для Javascript-событий в Яндекс Метрике и Google Analytics (05.03.2019) ← вы тут
- Для чего необходимо продвижение и оптимизация сайта? (09.10.2018)
- CodeIgniter и TeamSense: Делаем свой вид для страницы с ошибкой 404, настраиваем правильную отдачу статусов в HTTP headers (12.09.2012)
- Joomla 1.5 SEO: Добавляем тег <h1> в название статьи (20.03.2012)
- OpenCart: Автоматическое заполнение meta keywords для улучшения SEO (29.03.2012)
- Настраиваем SEO urls для страниц магазина на OpenCart (ЧПУ в OpenCart) (29.03.2012)
- Золотые правила поисковой оптимизации контента (23.02.2012)
