Lightweight, type-safe Yandex Metrika integration for Astro.
Designed for Astro 4+ and Astro 5+ (supports both View Transitions and the new Client Router). It handles SPA navigation correctly out of the box, eliminating duplicate hits and ensuring accurate tracking.
astro:page-load.reachGoal function for easy conversion tracking.tag.js structure and queues calls before the script loads.npm install astro-ym
Add the <YandexMetrika /> component to your main Layout file (e.g., src/layouts/Layout.astro). It is recommended to place it before the closing </body> tag.
---
import { YandexMetrika } from 'astro-ym';
---
<html lang="en">
<head>
<!-- Your meta tags -->
</head>
<body>
<slot />
<!-- Basic usage -->
<YandexMetrika counterId={12345678} />
</body>
</html>
You can enable/disable specific features via props.
<YandexMetrika
counterId={12345678}
clickmap={true}
trackLinks={true}
accurateTrackBounce={true}
webvisor={true}
ecommerce="dataLayer"
params={{ source: "astro" }}
/>
You can enable lazy loading so that the Yandex Metrika script loads only after the first user interaction (scroll, click, mousemove, touch, keydown) or after a fallback timeout.
<YandexMetrika
counterId={12345678}
webvisor={true}
lazy={true}
// optional: fallback timeout in ms (default: 3500)
timeout={4000}
/>
This keeps ym available immediately (calls are queued), but delays loading tag.js to improve performance metrics like TBT and LCP.
You can trigger goals from anywhere in your client-side code (UI components, scripts) using the exported helper. It automatically detects the counter ID.
import { reachGoal } from "astro-ym";
export const BuyButton = () => {
const handleClick = () => {
// Send goal
reachGoal("purchase_click");
// With params
// reachGoal('purchase_click', { price: 100, currency: 'USD' });
};
return <button onClick={handleClick}>Buy Now</button>;
};
<script>
import { reachGoal } from "astro-ym";
document.getElementById("my-btn")?.addEventListener("click", () => {
reachGoal("my_target_id");
});
</script>
| Prop | Type | Default | Description |
|---|---|---|---|
counterId | number | string | Required | Your Yandex Metrika Counter ID. |
ssr | boolean | true | Helps Yandex detect initial server-side load correctly. |
webvisor | boolean | false | Enables Webvisor (session recording). |
clickmap | boolean | true | Enables Click map. |
trackLinks | boolean | true | Tracks external link clicks. |
accurateTrackBounce | boolean | number | true | Accurate bounce rate tracking (true = 15s, or pass custom timeout in ms). |
ecommerce | boolean | string | false | Enable E-commerce data collection. Pass container name (e.g., "dataLayer") if needed. |
type | number | 0 | Counter type. 1 for Yandex Advertising Network (RSYA), 0 for standard. |
trackHash | boolean | false | Track changes in the URL hash (#anchor) as separate hits. |
sendTitle | boolean | true | Send the page <title> with each hit. |
childIframe | boolean | false | Record iframe content without a counter. |
trustedDomains | string[] | undefined | List of trusted domains for iframe recording. |
params | object | any[] | undefined | Visit parameters (session params). |
userParams | object | undefined | User parameters. |
config | Record<string,any> | {} | Any additional raw Yandex config. defer and triggerEvent are controlled by the component. |
debug | boolean | false | Logs init and hits to console for debugging. |
lazy | boolean | false | Enable lazy loading of tag.js (loads on first interaction or after timeout). |
timeout | number | 3500 | Fallback timeout (ms) to auto-load script in lazy mode if there is no user interaction. |
Ensure the <YandexMetrika /> component is mounted on the page. The helper functions (reachGoal) rely on the component being present to access the global counter ID.
If you don't see events in the dashboard, check if you have an AdBlocker enabled. It often blocks mc.yandex.ru.
If you enabled lazy={true} and do not see hits on fast visits, remember that the script loads on first interaction or after the timeout. For critical pages you can disable lazy mode:
<YandexMetrika counterId={12345678} lazy={false} />
Created by KochGO — AI Solutions Architect.
MIT © KochGO
FAQs
Yandex Metrika integration for Astro with full ClientRouter support
The npm package astro-ym receives a total of 19 weekly downloads. As such, astro-ym popularity was classified as not popular.
We found that astro-ym demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.