heatmapp

Back to Installation Guides

Add heatmapp to your Astro site

Follow these steps to integrate heatmapp analytics into your Astro site.

Add tracking script to your Astro app

Add the tracking script to your Astro application in your main layout:

1. Open your `src/layouts/Layout.astro` file

2. Add the script to the `<head>` section:

Code

---
export const prerender = true;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
    
    <!-- Add heatmapp tracking script -->
    <script
      defer
      data-website-id="YOUR_WEBSITE_ID"
      data-domain="your_domain.com"
      src="https://heatm.app/js/script.v2.min.js"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Replace `YOUR_WEBSITE_ID` with your actual Website ID from heatmapp. Replace `your_domain.com` with your website's root domain.

Verify installation

After implementing:

Visit your live website
Check your heatmapp dashboard for incoming data
It might take a few minutes for the first pageviews to appear

For advanced configuration options like localhost tracking, custom API endpoints, or cross-domain setup, see the script configuration reference.