Подключение Яндекс метрики в SvelteKit
1 января 2025 10:56Установка кода метрики
Скопируйте код метрики из личного кабинета, и вставьте в файл app.html Вашего проекта в блок head
app.html
<!doctype html>
<html lang="en">
<head>
...
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(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
});
</script>
<noscript
><div><img src="https://mc.yandex.ru/watch/97227129" style="position: absolute; left: -9999px" alt="" /></div
></noscript>
<!-- /Yandex.Metrika counter -->
...
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>Регистрация событий
Для регистрации события перехода по страницам передайте коллбэк с вызовом ya() в функцию afterNavigate из $app/navigation внутри Вашего +layout.svelte
+layout.svelte
<script lang="ts">
import { browser } from "$app/environment";
import { afterNavigate } from "$app/navigation";
let { children } = $props();
if (browser) {
// @ts-ignore
afterNavigate(() => ym(97227129, "hit", window.location.href));
}
</script>