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<html lang="en">
14  <head>
15    <meta charset="UTF-8" />
16    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
17    <title>{title}</title>
18  </head>
19  <body>
20    <slot />
21  </body>
22</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<html lang="en">
16  <head>
17    <meta charset="UTF-8" />
18    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19    <title>{title}</title>
20  </head>
21  <body>
22    <slot />
23  </body>
24</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<html lang="en">
20  <head>
21    <meta charset="UTF-8" />
22    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
23    <title>{title}</title>
24  </head>
25  <body>
26    <slot />
27  </body>
28</html>

Install Visitors on Astro

Using Layouts

Using Astro's Script Component

Dynamic loading

On this page