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

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

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

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

<!-- src/lib/components/Metrika.svelte -->
<script>
  import { onMount } from "svelte";
  import { page } from "$app/state";

  const metrika = () => {
    (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();
    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 вставляем в корневой макет сайта:

<!-- routes/+layout.svelte -->
<script>
  import Metrika from "$lib/components/Metrika.svelte";

  let { children } = $props();
</script>

<main>{@render children()}</main>

<Metrika />

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

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

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

ym(XXXXXXXX, "reachGoal", "TARGET_NAME");

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

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

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