Подключение счётчика Яндекс Метрики к проекту на SvelteKit (Svelte 5)
Пример правильного подключения счётчика Яндекс Метрики к проекту на SvelteKit (Svelte 5). Решение основано на официальной документации Яндекс.
Создание компонента счётчика
Создаём компонент Metrika со счётчиком Яндекс Метрики:
<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(), как показано в примере выше. После чего, к функции инициализации счётчика нужно добавить параметр defer: true. В примере выше это уже сделано.
Подключение компонента счётчика
Подготовленный компонент Metrika вставляем в корневой макет сайта:
<script>
import Metrika from "$lib/components/Metrika.svelte";
let { children } = $props();
</script>
{@render children()}
<Metrika />Таким образом, счётчик Яндекс Метрики будет вызываться при переходе на любую страницу сайта, при изменении параметров URL и при переходе вперёд/назад в браузере.
Отслеживание достижения цели
Для отслеживания событий на сайте, при которых URL страницы не меняется, необходимо использовать функцию ym с параметром reachGoal вместо hit:
ym(XXXXXXXX, "reachGoal", "TARGET_NAME");TARGET_NAME - уникальный идентификатор цели, который необходимо задать в настройках Яндекс Метрики. Цель должна иметь тип JavaScript-событие.
Пример установки счётчика достижения цели на кнопку:
<button type="button" onclick={() => ym(XXXXXXXX, "reachGoal", "TARGET_NAME")}>
Заказать
</button>С другими примерами можно ознакомиться по ссылке.
