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

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

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

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

<!-- 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

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

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

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

<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" и посылать что-то вроде

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

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