@statcounter/astro 0.1.0

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 (4) hide show
  1. package/README.md +110 -0
  2. package/index.ts +1 -0
  3. package/package.json +29 -0
  4. package/src/Statcounter.astro +61 -0
package/README.md ADDED
@@ -0,0 +1,110 @@
1
+ # @statcounter/astro
2
+
3
+ The official [Statcounter](https://statcounter.com/) integration for Astro.
4
+
5
+ ## Contents
6
+
7
+ - [Features](#features)
8
+ - [Installation](#installation)
9
+ - [Usage](#usage)
10
+ - [Verification](#verification)
11
+ - [Support](#support)
12
+ - [Props](#props)
13
+
14
+ ## Features
15
+
16
+ * **Astro View Transitions Ready**: Fully compatible with Astro's View Transitions API.
17
+ * **Automatic Page Tracking**: Works with both static and SPA View Transitions-enabled sites.
18
+ * **Lightweight**: Zero-dependency component with minimal impact on bundle size.
19
+ * **Invisible**: Hardcoded to be hidden, ensuring your UI remains clean.
20
+ * **Easy Setup**: Simple component-based installation.
21
+
22
+ ## Installation
23
+
24
+ Stop your server then install statcounter with this:
25
+
26
+ ```bash
27
+ npm install @statcounter/astro
28
+ ```
29
+
30
+ ## Usage
31
+
32
+ ### 1. Update your Layout
33
+ Open your primary layout file (usually `src/layouts/Layout.astro`).
34
+
35
+ Import the component in the frontmatter script (the area between the `---` lines):
36
+
37
+ ```astro
38
+ ---
39
+ import { Statcounter } from '@statcounter/astro';
40
+ ---
41
+ ```
42
+
43
+ ### 2. Add the Component to Layout
44
+
45
+ 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
+
47
+ ```astro
48
+ <Statcounter sc_project={1234567} sc_security="abcdef12" />
49
+ ```
50
+
51
+ ### Full Code Example
52
+
53
+ **Example placement in `src/layouts/Layout.astro`**
54
+
55
+ ```html
56
+ ---
57
+ import { Statcounter } from '@statcounter/astro';
58
+ // ... other imports
59
+ ---
60
+
61
+ <!doctype html>
62
+ <html lang="en">
63
+ <head>
64
+ <meta charset="UTF-8" />
65
+ <title>Astro Project</title>
66
+ </head>
67
+ <body>
68
+ <slot />
69
+
70
+ <Statcounter sc_project={1234567} sc_security="abcdef12" />
71
+ </body>
72
+ </html>
73
+ ```
74
+
75
+ ### 3. Rebuild the site and restart the app
76
+ If you are developing locally, stop your server and run:
77
+
78
+ ```bash
79
+ npm run dev
80
+ ```
81
+
82
+ If you are deploying to production, you must rebuild to see changes:
83
+
84
+ ```bash
85
+ npm run build
86
+ ```
87
+
88
+ ### Install Verification
89
+
90
+ 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
+
92
+ ```counter.js
93
+
94
+ https://c.statcounter.com/t.php?sc_project=111111[...]
95
+ ```
96
+
97
+ If you are using View Transitions navigate to a few different pages to be sure the tracker fires on each route change.
98
+
99
+ 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
+
101
+ ## Support
102
+
103
+ 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/
104
+
105
+ ## Props
106
+
107
+ | Prop | Type | Required | Description |
108
+ | :--- | :--- | :--- | :--- |
109
+ | `sc_project` | `number` | **Yes** | Your Statcounter Project ID number. |
110
+ | `sc_security` | `string` | **Yes** | Your Statcounter Security Code string. |
package/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as Statcounter } from './src/Statcounter.astro';
package/package.json ADDED
@@ -0,0 +1,29 @@
1
+ {
2
+ "name": "@statcounter/astro",
3
+ "version": "0.1.0",
4
+ "description": "Official Statcounter integration for Astro",
5
+ "type": "module",
6
+ "main": "index.ts",
7
+ "types": "index.ts",
8
+ "exports": {
9
+ ".": "./index.ts",
10
+ "./package.json": "./package.json"
11
+ },
12
+ "files": [
13
+ "index.ts",
14
+ "src"
15
+ ],
16
+ "keywords": [
17
+ "astro",
18
+ "statcounter",
19
+ "analytics",
20
+ "astro-component"
21
+ ],
22
+ "author": "Statcounter",
23
+ "license": "MIT",
24
+ "peerDependencies": {
25
+ "astro": "^4.0.0 || ^5.0.0"
26
+ },
27
+
28
+ "publishConfig": { "access": "public" }
29
+ }
package/src/Statcounter.astro ADDED
@@ -0,0 +1,61 @@
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>