npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@statcounter/astro

v0.1.2

Published

Official Statcounter integration for Astro

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

statcounter-adminstatcounter-admin

Keywords

astroanalyticsstatcounter

Readme

@statcounter/astro

The official Statcounter integration for Astro.

Contents

Features

  • Astro View Transitions Ready: Fully compatible with Astro's View Transitions API.
  • Automatic Page Tracking: Works with both static and SPA sites.
  • Lightweight: Zero-dependency component with minimal impact on bundle size.
  • Invisible: Hardcoded to be hidden, ensuring your UI remains clean.
  • Easy Setup: Simple component-based installation.
  • Cookie Consent Support Integrates with CookieBot, CookieYes, Astro Cookieconsent

Installation

Stop your server then install statcounter with this:

npm install @statcounter/astro

Usage

1. Update your Layout

Open your primary layout file (usually src/layouts/Layout.astro).

Import the component in the frontmatter script (the area between the --- lines):

---
import { Statcounter } from '@statcounter/astro';
---

2. Add the Component to Layout

Place the <Statcounter /> component inside your layout just before the closing </body> tag.

Replace the default values with your own statcounter project ID and security code. You can get these from the Statcounter website by clicking your project name, clicking the gear icon in the lower left corner, click Settings, and scrolling down to the bottom.

<Statcounter sc_project={1234567} sc_security="abcdef12" sc_manageConsent={true} sc_CMP="cookieyes" />

If you are not using a Cookie Consent program you can use this shorter version

<Statcounter sc_project={1234567} sc_security="abcdef12" />

Full Code Example

example src/layouts/Layout.astro

---
import Statcounter from '@statcounter/astro';
// ... other imports
---

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Astro Project</title>
</head>
<body>
<slot />
<Statcounter sc_project={1234567} sc_security="abcdef12" sc_manageConsent={true} sc_CMP="cookieyes" />
</body>
</html>

3. Rebuild the site and restart the app

Install Verification

After you rebuild the site and restart the server, go to your site and open the browser console > Network tab and reload the page. You should see this activity in the Network tab.


https://c.statcounter.com/t.php?sc_project=111111[...]

If you are using View Transitions navigate to a few different pages to be sure the tracker fires on each route change.

You should also see the statcounter code in the page -> view source.

Note: If you do not see any network activity ensure your browser Adblocker is disabled as they often block analytics scripts. You might need to do a hard refresh of the page or try adding a ?cache-buster=true string to the URL.

Cookie Consent

You can toggle on Cookie Consent mode with this

sc_manageConsent={true}

And enter the Consent Program name here

sc_CMP="cookieyes"

Supported values are :

  • vanillajop
  • cookieyes
  • cookiebot
<Statcounter sc_project={1234567} sc_security="abcdef12" sc_manageConsent={true} sc_CMP="vanillajop" />

Note : vanillajop supports

jop-software/astro-cookieconsent

and

vanilla-cookieconsent

Support

If you have any questions please email us at Email or use our contact form here https://statcounter.com/support/contact/

Props

| Prop | Type | Required | Description | | :--- | :--- | :--- | :--- | | sc_project | number | Yes | Your Statcounter Project ID number. | | sc_security | string | Yes | Your Statcounter Security Code string. | | sc_manageConsent | boolean | No | Enables CMP integration (default: false). | | sc_CMP | string | No | cookieyes, cookiebot, or vanillajop. |