### Install astro-yandex-metrika using npm
Source: https://github.com/ufocoder/astro-yandex-metrika/blob/main/README.md
This command installs the astro-yandex-metrika package using npm. Ensure you have Node.js and npm installed on your system.
```bash
npm install astro-yandex-metrika
```
--------------------------------
### Astro Yandex Metrika Default Tracking Features
Source: https://context7.com/ufocoder/astro-yandex-metrika/llms.txt
The YandexMetrika component initializes Yandex Metrika with clickmap, trackLinks, and accurateTrackBounce enabled by default. These features provide heatmap analysis, external link tracking, and accurate bounce rate measurement. The component is typically added to a layout for site-wide tracking.
```astro
---
// The component automatically configures these Yandex Metrika options:
// - clickmap: true - Records click coordinates for heatmap analysis
// - trackLinks: true - Tracks clicks on external links
// - accurateTrackBounce: true - Accurately measures page bounce rate
import { YandexMetrika } from 'astro-yandex-metrika';
// Example: Using in a blog layout with multiple pages
const counterId = import.meta.env.YANDEX_METRIKA_ID || '00000000';
---
My Blog
```
--------------------------------
### Configure Yandex Metrika ID in .env
Source: https://context7.com/ufocoder/astro-yandex-metrika/llms.txt
Configure your Yandex Metrika counter ID using environment variables. Create a .env file in your project root to store your credentials securely. This ID is essential for the YandexMetrika component to function correctly.
```bash
# .env
YANDEX_METRIKA_ID=12345678
```
--------------------------------
### Integrate Yandex Metrika in Astro Component
Source: https://github.com/ufocoder/astro-yandex-metrika/blob/main/README.md
This Astro component demonstrates how to import and use the YandexMetrika component. It requires the YANDEX_METRIKA_ID environment variable to be set.
```astro
---
import { YandexMetrika } from 'astro-yandex-metrika';
const counterId = import.meta.env.YANDEX_METRIKA_ID;
---
```
--------------------------------
### Integrate YandexMetrika Component in Astro Layout
Source: https://context7.com/ufocoder/astro-yandex-metrika/llms.txt
Integrate the YandexMetrika component into your Astro layout file (e.g., Layout.astro). This component injects the Yandex Metrika tracking script into your Astro pages. It requires your counter ID, typically stored in environment variables, and automatically renders only in production builds.
```astro
---
// src/layouts/Layout.astro
import { YandexMetrika } from 'astro-yandex-metrika';
// Get your counter ID from Yandex Metrika dashboard
// Store it in environment variables for security
const counterId = import.meta.env.YANDEX_METRIKA_ID;
---
My Astro Site
```
--------------------------------
### Add YandexMetrika Component to an Astro Page
Source: https://context7.com/ufocoder/astro-yandex-metrika/llms.txt
Alternatively, you can add the YandexMetrika component directly to an individual Astro page instead of the layout. This approach is useful if you only want to track specific pages. Ensure the counter ID is available via environment variables.
```astro
---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
import { YandexMetrika } from 'astro-yandex-metrika';
// Access environment variable
const metrikaId = import.meta.env.YANDEX_METRIKA_ID;
// Validate counter ID exists
if (!metrikaId) {
console.warn('YANDEX_METRIKA_ID environment variable is not set');
}
---
Welcome to my site
This page is tracked with Yandex Metrika
{metrikaId && }
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.