@statcounter/astro 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +48 -7
  3. package/dist/Statcounter.astro +144 -0
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.js +2 -0
  6. package/package.json +28 -17
  7. package/index.ts +0 -1
  8. package/src/Statcounter.astro +0 -61
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Rory-Ashton
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -7,7 +7,8 @@ The official [Statcounter](https://statcounter.com/) integration for Astro.
7
7
  - [Features](#features)
8
8
  - [Installation](#installation)
9
9
  - [Usage](#usage)
10
- - [Verification](#verification)
10
+ - [Install Verification](#install-verification)
11
+ - [Cookie Consent](#cookie-consent)
11
12
  - [Support](#support)
12
13
  - [Props](#props)
13
14
 
@@ -18,6 +19,7 @@ The official [Statcounter](https://statcounter.com/) integration for Astro.
18
19
  * **Lightweight**: Zero-dependency component with minimal impact on bundle size.
19
20
  * **Invisible**: Hardcoded to be hidden, ensuring your UI remains clean.
20
21
  * **Easy Setup**: Simple component-based installation.
22
+ * **Cookie Consent Support** Integrates with CookieBot, CookieYes, Astro Cookieconsent
21
23
 
22
24
  ## Installation
23
25
 
@@ -34,7 +36,7 @@ Open your primary layout file (usually `src/layouts/Layout.astro`).
34
36
 
35
37
  Import the component in the frontmatter script (the area between the `---` lines):
36
38
 
37
- ```astro
39
+ ```tsx
38
40
  ---
39
41
  import { Statcounter } from '@statcounter/astro';
40
42
  ---
@@ -44,7 +46,13 @@ import { Statcounter } from '@statcounter/astro';
44
46
 
45
47
  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.
46
48
 
47
- ```astro
49
+ ```tsx
50
+ <Statcounter sc_project={1234567} sc_security="abcdef12" sc_manageConsent={true} sc_CMP="cookieyes" />
51
+ ```
52
+
53
+ If you are not using a Cookie Consent program you can use this shorter version
54
+
55
+ ```tsx
48
56
  <Statcounter sc_project={1234567} sc_security="abcdef12" />
49
57
  ```
50
58
 
@@ -52,7 +60,7 @@ Place the ```<Statcounter />``` component inside your layout just before the clo
52
60
 
53
61
  **Example placement in `src/layouts/Layout.astro`**
54
62
 
55
- ```html
63
+ ```tsx
56
64
  ---
57
65
  import { Statcounter } from '@statcounter/astro';
58
66
  // ... other imports
@@ -67,7 +75,7 @@ import { Statcounter } from '@statcounter/astro';
67
75
  <body>
68
76
  <slot />
69
77
 
70
- <Statcounter sc_project={1234567} sc_security="abcdef12" />
78
+ <Statcounter sc_project={1234567} sc_security="abcdef12" sc_manageConsent={true} sc_CMP="cookieyes" />
71
79
  </body>
72
80
  </html>
73
81
  ```
@@ -85,7 +93,7 @@ If you are deploying to production, you must rebuild to see changes:
85
93
  npm run build
86
94
  ```
87
95
 
88
- ### Install Verification
96
+ ## Install Verification
89
97
 
90
98
  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.
91
99
 
@@ -98,6 +106,37 @@ If you are using View Transitions navigate to a few different pages to be sure t
98
106
 
99
107
  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.
100
108
 
109
+ ## Cookie Consent
110
+
111
+ You can toggle on Cookie Consent mode with this
112
+
113
+ ```tsx
114
+ sc_manageConsent={true}
115
+ ```
116
+
117
+ And enter the Consent Program name here
118
+
119
+ ```tsx
120
+ sc_CMP="cookieyes"
121
+ ```
122
+ Supported values are :
123
+
124
+ * ```vanillajop```
125
+ * ```cookieyes```
126
+ * ```cookiebot```
127
+
128
+ ```tsx
129
+ <Statcounter sc_project={1234567} sc_security="abcdef12" sc_manageConsent={true} sc_CMP="vanillajop" />
130
+ ```
131
+
132
+ Note : *vanillajop* supports
133
+
134
+ *jop-software/astro-cookieconsent*
135
+
136
+ and
137
+
138
+ *vanilla-cookieconsent*
139
+
101
140
  ## Support
102
141
 
103
142
  If you have any questions please email us at ![Email](https://img.shields.io/badge/support_[at]_statcounter_[dot]_com-0078d3) or use our contact form here https://statcounter.com/support/contact/
@@ -107,4 +146,6 @@ If you have any questions please email us at ![Email](https://img.shields.io/bad
107
146
  | Prop | Type | Required | Description |
108
147
  | :--- | :--- | :--- | :--- |
109
148
  | `sc_project` | `number` | **Yes** | Your Statcounter Project ID number. |
110
- | `sc_security` | `string` | **Yes** | Your Statcounter Security Code string. |
149
+ | `sc_security` | `string` | **Yes** | Your Statcounter Security Code string. |
150
+ | `sc_manageConsent` | `boolean` | **No** | Enables CMP integration (default: false). |
151
+ | `sc_CMP` | `string` | **No** | cookieyes, cookiebot, or vanillajop. |
package/dist/Statcounter.astro ADDED
@@ -0,0 +1,144 @@
1
+ ---
2
+ const {
3
+ sc_project,
4
+ sc_security,
5
+ sc_manageConsent = false,
6
+ sc_CMP
7
+ } = Astro.props;
8
+ ---
9
+
10
+ <script is:inline define:vars={{ sc_project, sc_security, sc_manageConsent, sc_CMP}}>
11
+ (function () {
12
+
13
+ let lastUrl;
14
+ function onConsentChange(allowed) {
15
+ consentState = allowed ? 'granted' : 'denied';
16
+ if (allowed) track();
17
+ }
18
+
19
+ // ---- start CMP manageConsent ----
20
+
21
+ if (sc_manageConsent) {
22
+ const cmp =
23
+ typeof sc_CMP === 'string'
24
+ ? sc_CMP.toLowerCase()
25
+ : null;
26
+
27
+ const VALID_CMPS = ["vanillajop", "cookieyes", "cookiebot"];
28
+
29
+ if (typeof cmp !== "string") {
30
+ console.warn(`[Statcounter] manageConsent is enabled but CMP is missing. Valid values: ${VALID_CMPS.join(", ")}`);
31
+ } else if (!VALID_CMPS.includes(cmp)) {
32
+ console.warn(`[Statcounter] manageConsent is enabled but CMP "${cmp}" is not recognized. Valid values: ${VALID_CMPS.join(", ")}`);
33
+ }
34
+
35
+ if (cmp === 'vanillajop') {
36
+ const handler = (e) => {
37
+ const categories =
38
+ e.detail?.cookie?.categories ??
39
+ e.detail?.categories ??
40
+ [];
41
+ onConsentChange(categories.includes('analytics'));
42
+ };
43
+
44
+ // cc:onChange fires on every pageload, everytime
45
+ // this is effectively checks the consent state
46
+ // even if was set previously
47
+ if (!window.__sc_consent_listening_vanillajop) {
48
+ window.__sc_consent_listening_vanillajop = true;
49
+ window.addEventListener('cc:onChange', handler);
50
+ window.addEventListener('cc:onConsent', handler);
51
+ }
52
+ }
53
+
54
+ // CMP lifecycle events fire even when consent already exists
55
+ if (cmp === 'cookieyes') {
56
+ const handler = () => {
57
+ if (typeof window.getCkyConsent !== 'function') return;
58
+ const consent = window.getCkyConsent();
59
+ onConsentChange(consent?.categories?.analytics === true);
60
+ };
61
+ if (!window.__sc_consent_listening_cookieyes) {
62
+ // Read current state for CookieYes in case the event happened already
63
+ handler();
64
+ window.__sc_consent_listening_cookieyes = true;
65
+ document.addEventListener('cookieyes_consent_update', handler);
66
+ document.addEventListener('cookieyes_banner_load', handler);
67
+ }
68
+ }
69
+
70
+ // CMP lifecycle events fire even when consent already exists
71
+ if (cmp === "cookiebot") {
72
+ const read = () => {
73
+ const stats = window.Cookiebot?.consent?.statistics === true;
74
+ onConsentChange(stats);
75
+ };
76
+
77
+ if (!window.__sc_consent_listening_cookiebot) {
78
+ window.__sc_consent_listening_cookiebot = true;
79
+
80
+ // If Cookiebot is already present, read "after the fact" immediately
81
+ if (window.Cookiebot?.consent) read();
82
+
83
+ // Otherwise, wait for consent-ready (covers "loaded from existing cookie")
84
+ window.addEventListener("CookiebotOnConsentReady", read);
85
+
86
+ // Optional: still respond to explicit accept/decline
87
+ window.addEventListener("CookiebotOnAccept", read);
88
+ window.addEventListener("CookiebotOnDecline", () => onConsentChange(false));
89
+ }
90
+ }
91
+ }
92
+
93
+ // ---- end CMP manageConsent ----
94
+
95
+ // ---- start track ----
96
+
97
+ function track() {
98
+ if (consentState !== 'granted') return;
99
+ const url = location.href;
100
+ if (lastUrl === url) return;
101
+ lastUrl = url;
102
+
103
+ if (window._statcounter) {
104
+ _statcounter.record_pageview();
105
+ return;
106
+ }
107
+
108
+ Object.assign(window, {
109
+ sc_project,
110
+ sc_security,
111
+ sc_invisible: 1,
112
+ sc_https: 1,
113
+ });
114
+
115
+ // dont re-add counter.js script if it exist
116
+ if (document.getElementById('statcounter-script')) return;
117
+
118
+ // dont add counter.js if the statcounter variables arent okay
119
+ if (!sc_project || !sc_security) {
120
+ console.warn("Statcounter missing variables. Ensure `var sc_project` and `var sc_security` are both set with your project details. The plugin will not run without them both in place.");
121
+ return;
122
+ }
123
+
124
+ const s = document.createElement('script');
125
+ s.id = "statcounter-script";
126
+ s.async = true;
127
+ s.src = 'https://www.statcounter.com/counter/counter.js';
128
+ document.head.appendChild(s);
129
+ }
130
+
131
+ // ---- end track ----
132
+
133
+ // ---- fire off pageload ----
134
+
135
+ if (!window.__sc_astro_listener_added) {
136
+ document.addEventListener('astro:page-load', track);
137
+ window.__sc_astro_listener_added = true;
138
+ }
139
+
140
+ track();
141
+
142
+ })();
143
+
144
+ </script>
package/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import Statcounter from './Statcounter.astro';
2
+ export default Statcounter;
package/dist/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import Statcounter from './Statcounter.astro';
2
+ export default Statcounter;
package/package.json CHANGED
@@ -1,29 +1,40 @@
1
1
  {
2
2
  "name": "@statcounter/astro",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Official Statcounter integration for Astro",
5
+ "homepage": "https://www.statcounter.com",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/Rory-Ashton/Astro-Statcounter.git"
9
+ },
10
+ "license": "MIT",
5
11
  "type": "module",
6
- "main": "index.ts",
7
- "types": "index.ts",
12
+ "main": "./dist/index.js",
13
+ "types": "./dist/index.d.ts",
8
14
  "exports": {
9
- ".": "./index.ts",
10
- "./package.json": "./package.json"
15
+ ".": {
16
+ "types": "./dist/index.d.ts",
17
+ "import": "./dist/index.js"
18
+ }
11
19
  },
12
20
  "files": [
13
- "index.ts",
14
- "src"
15
- ],
16
- "keywords": [
17
- "astro",
18
- "statcounter",
19
- "analytics",
20
- "astro-component"
21
+ "dist"
21
22
  ],
22
- "author": "Statcounter",
23
- "license": "MIT",
23
+ "scripts": {
24
+ "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\"",
25
+ "build": "npm run clean && tsc && node -e \"require('fs').copyFileSync('src/Statcounter.astro', 'dist/Statcounter.astro')\"",
26
+ "prepack": "npm run build"
27
+ },
28
+ "devDependencies": {
29
+ "typescript": "^5.0.0",
30
+ "astro": "^4.0.0"
31
+ },
24
32
  "peerDependencies": {
25
33
  "astro": "^4.0.0 || ^5.0.0"
26
34
  },
27
-
28
- "publishConfig": { "access": "public" }
35
+ "keywords": [
36
+ "astro",
37
+ "analytics",
38
+ "statcounter"
39
+ ]
29
40
  }
package/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default as Statcounter } from './src/Statcounter.astro';
package/src/Statcounter.astro DELETED
@@ -1,61 +0,0 @@
1
- ---
2
- interface Props {
3
- sc_project: number;
4
- sc_security: string;
5
- }
6
-
7
- declare global {
8
- interface Window {
9
- __sc_last_url?: string;
10
- sc_project?: number;
11
- sc_security?: string;
12
- sc_invisible?: number;
13
- sc_https?: number;
14
- __sc_listener_added?: boolean;
15
- }
16
- }
17
-
18
- const { sc_project, sc_security } = Astro.props;
19
- ---
20
-
21
- <script is:inline define:vars={{ sc_project, sc_security }}>
22
- const trackStatcounter = () => {
23
-
24
- // prevent double counting
25
- const currentUrl = window.location.href;
26
- if (window.__sc_last_url === currentUrl) return;
27
- window.__sc_last_url = currentUrl;
28
-
29
- window.sc_project = sc_project;
30
- window.sc_security = sc_security;
31
- window.sc_invisible = 1; // Forces the invisible counter
32
- window.sc_https = 1;
33
-
34
- const oldScript = document.getElementById('statcounter-script');
35
- if (oldScript) {oldScript.remove();}
36
-
37
- let scDiv = document.getElementById('sctag');
38
- if (!scDiv) {
39
- scDiv = document.createElement('div');
40
- scDiv.id = 'sctag';
41
- scDiv.style.display = 'none'; // Counter lives in an invisible DIV
42
- document.body.appendChild(scDiv);
43
- }
44
-
45
- const script = document.createElement('script');
46
- script.id = 'statcounter-script';
47
- script.async = true;
48
- script.src = "https://www.statcounter.com/counter/counter.js";
49
- scDiv.appendChild(script);
50
-
51
- };
52
-
53
- // used to track pages not in SPA mode
54
- trackStatcounter();
55
-
56
- // SPA pageload tracker
57
- if (!window.__sc_listener_added) {
58
- document.addEventListener('astro:page-load', trackStatcounter);
59
- window.__sc_listener_added = true;
60
- }
61
- </script>