Подключение счётчика Яндекс Метрики к проекту на SvelteKit (Svelte 5)

27 апреля 2025 г.

Пример правильного подключения счётчика Яндекс Метрики к проекту на SvelteKit (Svelte 5). Решение основано на официальной документации Яндекс.

Создание компонента счётчика

Создаём компонент Metrika со счётчиком Яндекс Метрики:

src/lib/components/Metrika.svelte
<script>
  import { onMount } from 'svelte';
  import { page } from '$app/state';
 
  const metrika = async () => {
    (function (m, e, t, r, i, k, a) {
      m[i] =
        m[i] ||
        function () {
          (m[i].a = m[i].a || []).push(arguments);
        };
      m[i].l = 1 * new Date();
      for (var j = 0; j < document.scripts.length; j++) {
        if (document.scripts[j].src === r) {
          return;
        }
      }
      (k = e.createElement(t)),
        (a = e.getElementsByTagName(t)[0]),
        (k.async = 1),
        (k.src = r),
        a.parentNode.insertBefore(k, a);
    })(window, document, 'script', 'https://mc.yandex.ru/metrika/tag.js', 'ym');
 
    ym(XXXXXXXX, 'init', {
      defer: true,
      clickmap: true,
      trackLinks: true,
      accurateTrackBounce: true
    });
  };
 
  let mount = $state(false);
 
  onMount(() => {
    metrika().then(() => (mount = true));
  });
 
  $effect(() => {
    if (mount) ym(XXXXXXXX, 'hit', page.url.href);
  });
</script>
 
<noscript>
  <div>
    <img
      src="https://mc.yandex.ru/watch/XXXXXXXX"
      style="position:absolute; left:-9999px;"
      alt="" />
  </div>
</noscript>

Код счётчика может различаться в зависимости от версии и параметров настройки Яндекс Метрики. Поэтому его необходимо скопировать из настроек Яндекс Метрики сайта и вставить в асинхронную функцию metrika(), как показано в примере выше. После чего, к функции инициализации счётчика ym(..., "init", ...) нужно добавить параметр defer: true. В примере выше это уже сделано.

Подключение компонента счётчика

Подготовленный компонент Metrika вставляем в корневой макет сайта:

src/routes/+layout.svelte
<script>
  import Metrika from '$lib/components/Metrika.svelte';
 
  let { children } = $props();
</script>
 
{@render children()}
 
<Metrika />

Таким образом, счётчик Яндекс Метрики будет вызываться при переходе на любую страницу сайта, при изменении параметров URL и при переходе вперёд/назад в браузере.

Отслеживание достижения цели

Для отслеживания событий на сайте, при которых URL страницы не меняется, необходимо использовать функцию ym с параметром reachGoal вместо hit:

javascript
ym(XXXXXXXX, 'reachGoal', 'TARGET_NAME');

TARGET_NAME - уникальный идентификатор цели, который необходимо задать в настройках Яндекс Метрики. Цель должна иметь тип JavaScript-событие.

Пример установки счётчика достижения цели на кнопку:

svelte
<button type="button" onclick={() => ym(XXXXXXXX, 'reachGoal', 'TARGET_NAME')}>
  Заказать
</button>

С другими примерами можно ознакомиться по ссылке.

Другие статьи