Install Visitors on Astro

Astro makes it easy to add analytics scripts to your site. Here are the recommended approaches for integrating Visitors.

Replace YOUR_TOKEN with your project token.

Using Layouts

Add the script to your base layout component that wraps all pages.

src/layouts/Layout.astro

1---
2export interface Props {
3  title: string;
4}
5const { title } = Astro.props;
6---
7<script 
8  src="https://cdn.visitors.now/v.js" 
9  data-token="YOUR_TOKEN">
10</script>
11
12<!DOCTYPE html>
13
14<html lang="en">
15  <head>
16    <meta charset="UTF-8" />
17    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
18    <title>{title}</title>
19  </head>
20  <body>
21    <slot />
22  </body>
23</html>

Using Astro's Script Component

Astro provides a <script> component for adding external scripts:

src/layouts/Layout.astro

1---
2export interface Props {
3  title: string;
4}
5const { title } = Astro.props;
6---
7
8<script 
9  is:inline 
10  src="https://cdn.visitors.now/v.js" 
11  data-token="YOUR_TOKEN">
12</script>
13
14<!DOCTYPE html>
15
16<html lang="en">
17  <head>
18    <meta charset="UTF-8" />
19    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
20    <title>{title}</title>
21  </head>
22  <body>
23    <slot />
24  </body>
25</html>

Dynamic loading

For dynamic loading after the page has loaded:

src/layouts/Layout.astro

1---
2export interface Props {
3  title: string;
4}
5const { title } = Astro.props;
6---
7
8<script>
9  // This runs on the client
10  const script = document.createElement('script');
11  script.src = 'https://cdn.visitors.now/v.js';
12  script.setAttribute('data-token', 'YOUR_TOKEN');
13  script.async = true;
14  
15  document.head.appendChild(script);
16</script>
17
18<!DOCTYPE html>
19
20<html lang="en">
21  <head>
22    <meta charset="UTF-8" />
23    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
24    <title>{title}</title>
25  </head>
26  <body>
27    <slot />
28  </body>
29</html>

Install Visitors on Astro

Using Layouts

Using Astro's Script Component

Dynamic loading

On this page