Trackthemetric Logo

Trackthemetric + Astro

Here's how you can set up Trackthemetric analytics in an Astro project.

Option 1
Add the script to your layout file

The recommended approach is to include the script in your main layout so it's applied site-wide.

1. Open (or create) your main layout file, e.g.src/layouts/Layout.astro.

2. Add the following script into the <head> section:


export interface Props {
  title: string;
}
const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>

    <script
      defer
      id="TrackTheMetric"
      data-website-id="YOUR_WEBSITE_ID"
      data-domain="YOUR_DOMAIN.COM"
      src="https://app.trackthemetric.com/tracker.js"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Make sure to replace the YOUR_WEBSITE_ID and YOUR_DOMAIN.COM with your actual website ID and domain.

2. Make sure all your pages use this layout, e.g.:


// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
---

<Layout title="Home">
  <main>
    <h1>Welcome to Astro + TrackTheMetric</h1>
  </main>
</Layout>

Option 2
Use Astro's per-page head injection

If you prefer not to handle it in Vue.js code, you can drop the snippet straight into your HTML:

<html lang="en">
  <head>
    <script
      defer
      id="TrackTheMetric"
      data-website-id="YOUR_WEBSITE_ID"
      data-domain="YOUR_DOMAIN.COM"
      src="https://app.trackthemetric.com/tracker.js"
    ></script>
  </head>
  // page content
</html>

3
Verifying the setup

Once you've deployed your project:

  • Open your production site in the browser.
  • Head over to your Trackthemetric dashboard.
  • Within a few minutes, you should see traffic starting to appear.