Skip to content

Commit c5127e0

Browse files
rehanvdmrehanvdm
authored
feat: add standalone #5 (#17)
1 parent ebaa29f commit c5127e0

File tree

14 files changed

+1923
-8048
lines changed

14 files changed

+1923
-8048
lines changed

‎.projen/tasks.json‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.projenrc.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,4 +98,10 @@ preCommitChecks.exec('node_modules/.bin/ts-node ./scripts/index.ts -c validate-s
9898
preCommitChecks.exec('npm run build-jsii');
9999
preCommitChecks.exec('npm run docgen');
100100

101+
project.tasks.addTask('copy-frontend-client-cdn-script', {
102+
description:
103+
'Copies the serverless-website-analytics-client/cdn/client-script.js to the frontend/src/src/assets/cdn folder',
104+
exec: 'ts-node ./scripts/index.ts -c copy-frontend-client-cdn-script',
105+
});
106+
101107
project.synth();

‎README.md‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ You can see a LIVE DEMO [HERE](https://demo.serverless-website-analytics.com/) a
1111
[here](https://github.com/rehanvdm/serverless-website-analytics/blob/main/docs/DEMO-TRAFFIC.md)
1212

1313
## Objectives
14+
- Privacy focused, don't store any Personally Identifiable Information (PII).
1415
- Low frequency of dashboard views
1516
- The target audience is small to medium website(s) with low to moderate page view traffic (equal or less than 10M views)
1617
- Lowest possible cost
1718
- KISS
1819
- No direct server-side state
1920
- Low maintenance
2021
- Easy to deploy in your AWS account, any *region
21-
- Don't store any Personally Identifiable Information (PII)
2222

2323
The main objective is to keep it simple and the operational cost low, keeping true to "scale to 0" tenants of serverless,
2424
even if it goes against "best practices".
@@ -70,6 +70,14 @@ export class App extends cdk.Stack {
7070
hostedZoneId: 'Z00387321EPPVXNC20CIS',
7171
zoneName: 'demo.serverless-website-analytics.com',
7272
}),
73+
},
74+
/* Optional, adds alarms and dashboards but also raises the cost */
75+
observability: {
76+
dashboard: true,
77+
alarms: {
78+
alarmTopic,
79+
alarmTypes: AllAlarmTypes
80+
},
7381
}
7482
});
7583

@@ -96,13 +104,35 @@ Quick option rundown:
96104
create the DNS records in the specified Route53 hosted zone. If not specified, it uses the default autogenerated
97105
CloudFront(`cloudfront.net`) and Cognito(`auth.us-east-1.amazoncognito.com`) domains. You can read the website URL
98106
from the stack output.
107+
- `observability`: Adds a CloudWatch Dashboard and Alarms if specified.
99108

100109
For a full list of options see the [API.md](https://github.com/rehanvdm/serverless-website-analytics/blob/main/docs/API.md#api-reference-) docs.
101110

102111
You can see an example implementation of the demo site [here](https://github.com/rehanvdm/serverless-website-analytics-test)
103112

104113
### Client side setup
105114

115+
There are **two ways to use the client**:
116+
- **Standalone import script** - Single line, standard JS script in your HTML.
117+
- **SDK client** - Import the SDK client into your project and use in any SPA.
118+
119+
#### Standalone Import Script Usage
120+
121+
Then include the standalone script in your HTML:
122+
```html
123+
<html lang="en">
124+
<head> ... </head>
125+
<body>
126+
...
127+
<script src="<YOUR BACKEND ORIGIN>/cdn/client-script.js" site="<THE SITE YOU ARE TRACKING>"></script>
128+
</body>
129+
</html>
130+
```
131+
132+
See the [client-side library](https://www.npmjs.com/package/serverless-website-analytics-client) for more options.
133+
134+
#### SDK Client Usage
135+
106136
Install the [client-side library](https://www.npmjs.com/package/serverless-website-analytics-client):
107137
```
108138
npm install serverless-website-analytics-client
@@ -116,7 +146,7 @@ Irrelevant of the framework, you have to do the following to track page views on
116146
2. On each route change call the `analyticsPageChange` function with the name of the new page.
117147

118148
The following sections show you how to do it in Vue, see [the readme of the client](https://github.com/rehanvdm/serverless-website-analytics-client-development#usage)
119-
for various framework setups.
149+
for React and Svelte usage, but again the SDK allows for usage in **ANY framework**.
120150

121151
#### Vue
122152

@@ -141,6 +171,8 @@ router.afterEach((event) => {
141171
app.mount('#app');
142172
```
143173

174+
..Any other framework
175+
144176
## What's in the box
145177

146178
The architecture consists of four components: frontend, backend, ingestion API and the client JS library.

‎docs/API.md‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ You can see a LIVE DEMO [HERE](https://demo.serverless-website-analytics.com/) a
1111
[here](https://github.com/rehanvdm/serverless-website-analytics/blob/main/docs/DEMO-TRAFFIC.md)
1212

1313
## Objectives
14+
- Privacy focused, don't store any Personally Identifiable Information (PII).
1415
- Low frequency of dashboard views
1516
- The target audience is small to medium website(s) with low to moderate page view traffic (equal or less than 10M views)
1617
- Lowest possible cost
1718
- KISS
1819
- No direct server-side state
1920
- Low maintenance
2021
- Easy to deploy in your AWS account, any *region
21-
- Don't store any Personally Identifiable Information (PII)
2222

2323
The main objective is to keep it simple and the operational cost low, keeping true to "scale to 0" tenants of serverless,
2424
even if it goes against "best practices".
@@ -70,6 +70,14 @@ export class App extends cdk.Stack {
7070
hostedZoneId: 'Z00387321EPPVXNC20CIS',
7171
zoneName: 'demo.serverless-website-analytics.com',
7272
}),
73+
},
74+
/* Optional, adds alarms and dashboards but also raises the cost */
75+
observability: {
76+
dashboard: true,
77+
alarms: {
78+
alarmTopic,
79+
alarmTypes: AllAlarmTypes
80+
},
7381
}
7482
});
7583

@@ -96,13 +104,35 @@ Quick option rundown:
96104
create the DNS records in the specified Route53 hosted zone. If not specified, it uses the default autogenerated
97105
CloudFront(`cloudfront.net`) and Cognito(`auth.us-east-1.amazoncognito.com`) domains. You can read the website URL
98106
from the stack output.
107+
- `observability`: Adds a CloudWatch Dashboard and Alarms if specified.
99108

100109
For a full list of options see the [API.md](https://github.com/rehanvdm/serverless-website-analytics/blob/main/docs/API.md#api-reference-) docs.
101110

102111
You can see an example implementation of the demo site [here](https://github.com/rehanvdm/serverless-website-analytics-test)
103112

104113
### Client side setup
105114

115+
There are **two ways to use the client**:
116+
- **Standalone import script** - Single line, standard JS script in your HTML.
117+
- **SDK client** - Import the SDK client into your project and use in any SPA.
118+
119+
#### Standalone Import Script Usage
120+
121+
Then include the standalone script in your HTML:
122+
```html
123+
<html lang="en">
124+
<head> ... </head>
125+
<body>
126+
...
127+
<script src="<YOUR BACKEND ORIGIN>/cdn/client-script.js" site="<THE SITE YOU ARE TRACKING>"></script>
128+
</body>
129+
</html>
130+
```
131+
132+
See the [client-side library](https://www.npmjs.com/package/serverless-website-analytics-client) for more options.
133+
134+
#### SDK Client Usage
135+
106136
Install the [client-side library](https://www.npmjs.com/package/serverless-website-analytics-client):
107137
```
108138
npm install serverless-website-analytics-client
@@ -116,7 +146,7 @@ Irrelevant of the framework, you have to do the following to track page views on
116146
2. On each route change call the `analyticsPageChange` function with the name of the new page.
117147

118148
The following sections show you how to do it in Vue, see [the readme of the client](https://github.com/rehanvdm/serverless-website-analytics-client-development#usage)
119-
for various framework setups.
149+
for React and Svelte usage, but again the SDK allows for usage in **ANY framework**.
120150

121151
#### Vue
122152

@@ -141,6 +171,8 @@ router.afterEach((event) => {
141171
app.mount('#app');
142172
```
143173

174+
..Any other framework
175+
144176
## What's in the box
145177

146178
The architecture consists of four components: frontend, backend, ingestion API and the client JS library.

0 commit comments

Comments
 (0)