Как правильно установить Яндекс Метрику через Google Tag Manager

С детства нам врут! О происхождении, о еде, об истории, о политике, о задержках, о зарплате, об оценках, о будущем… Друзья, я не могу бороться со всем! Но хотя бы Метрику правильно подключать я вас научу.

Установка счетчика

Для начала мы пропишем id счетчика в отдельную переменную, чтобы легко было адаптировать при переносе на другой сайт. Id можно посмотреть в интерфейсе Метрики с названием сайта.

Переменная с id счетчика метрики

Далее копипастим код счетчика в тег типа Пользовательский HTML. В примере в качестве параметра пользователя я добавил Client ID, чтобы в дальнейшем была возможность смотреть в отчетах действия отдельных юзеров. Как получить Client ID, рассказано в отдельной статье.  

 1 2 3 4 5 6 7 8 910111213141516171819202122232425262728293031323334353637
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
    (function (d, w, c) {
        (w[c] = w[c] || []).push(function() {
            try {
                w["yaCounter{{idYM}}"] = new Ya.Metrika({
                    id:{{idYM}},
                    clickmap:true,
                    trackLinks:true,
                    accurateTrackBounce:true,
                    webvisor:true,
                    trackHash:true,
                    userParams:{
                               "Client ID": "{{idGoogleClient}}"
                    }
                });
            } 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/watch.js";

        if (w.opera == "[object Opera]") {
            d.addEventListener("DOMContentLoaded", f, false);
        } else { f(); }
    })(document, window, "yandex_metrika_callbacks");
</script>
<noscript>
  <div>
    <img src="https://mc.yandex.ru/watch/{{idYM}}" style="position:absolute; left:-9999px;" alt="" />
  </div>
</noscript>
<!-- /Yandex.Metrika counter -->

  Итак, счетчик Метрики установлен, теперь нам нужно сообщать в нее о достигнутых целях. Здесь, казалось бы, достаточно просто написать в теге reachGoal(), но не удивляйтесь, когда потом в консоли или отчете об ошибках увидите что-то вроде

yaCounter is not defined, you dumbass!
Chrome Console

Это происходит, когда цель у вас установлена на просмотр страницы, или её триггер срабатывает по какой-то причине сразу при открытии страницы. Как бы вы ни игрались с приоритетами - это не поможет. Сам тег подключения Яндекс Метрики может сработать раньше передачи цели, но вот подгрузить скрипт и инициализировать объект счетчика он уже не успеет.

Как же передать цель в Метрику?

Я предлагаю вот такой нехитрый способ

 1 2 3 4 5 6 7 8 9101112131415
<script>
  var checkYaCounter = function () {
    var y = window["yaCounter{{idYM}}"];
    if (typeof (y) !== "undefined") {
    y.reachGoal("{{Event}}");
    }
    else {
      window.setTimeout(function () {
        checkYaCounter();
      }, 50);
    }
  }
  
  checkYaCounter();
</script>

Когда срабатывает тег передачи цели, он сперва циклично проверяет наличие объекта счетчика, и только при положительном ответе пользуется его методом reachGoal(), чтобы сообщить о достижении цели Яндексу. Обратите внимание, что и здесь я следую главной заповеди

Не плоди лишних тегов
Бусидо веб-аналитика
Как известно, Метрика не блещет описанием события в отличие от Google Analytics, но вы можете использовать словари событий из статьи известного автора “Как правильно отправлять события в Google Analytics” и посылать что-то вроде

1
y.reachGoal('{{dictCategory}}-{{dictAction}}-{{dictLabel}}')

Таким образом мы используем один тег для передачи всех событий в Яндекс Метрику.

comments powered by Disqus