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

almix — 28 февраля 2019 (обновлял 5 марта 2019 в 14:57)
Комментарии (0) Категории: Поисковая оптимизация версия для печати

Добавляем цели для javascript-событий на своём сайте

Цели в Google Analytics

Устанавливаем расширение в браузер Chrome - Google Analytics Debugger (GA Debug), чтобы видеть в консоли результаты срабатывания javascript-событий.

цели на события для Google Analytics Debugger

Дальше в 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">
...

В гугл аналитикс добавляем цель c этими категорией, действием, ярлыком (название):

И в <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

https://yandex.ru/support/metrika/objects/reachgoal.html

Источник: loco.ru