Skip to content

Commit f8cc9fa

Browse files
add script tag docs (fix #5)
1 parent 91286f3 commit f8cc9fa

File tree

1 file changed

+17
-2
lines changed

1 file changed

+17
-2
lines changed

README.md

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ The [web-vitals](https://github.com/GoogleChrome/web-vitals) is a small and powe
1414

1515
## Usage
1616

17-
Report [Core Web Vitals](https://web.dev/vitals/) and device information to an API endpoint:
17+
Report [Core Web Vitals](https://web.dev/vitals/) and device information to an API endpoint:
1818

1919
```js
2020
import { getCLS, getFID, getLCP } from 'web-vitals'
@@ -41,7 +41,7 @@ getCLS(sendToAnalytics)
4141
}
4242
```
4343

44-
Measure performance with [Next.js](https://nextjs.org/docs/advanced-features/measuring-performance):
44+
Measure performance with [Next.js](https://nextjs.org/docs/advanced-features/measuring-performance):
4545

4646
```js
4747
import { createApiReporter } from 'web-vitals-reporter'
@@ -62,6 +62,21 @@ export function reportWebVitals(metric) {
6262
export { report as reportWebVitals }
6363
```
6464

65+
③ Load and report Web Vitals using a `<script>` tag:
66+
67+
```html
68+
<script defer src="https://unpkg.com/web-vitals"></script>
69+
<script defer src="https://unpkg.com/web-vitals-reporter"></script>
70+
<script>
71+
addEventListener('DOMContentLoaded', function () {
72+
var sendToAnalytics = webVitalsReporter.createApiReporter('/analytics')
73+
webVitals.getCLS(sendToAnalytics)
74+
webVitals.getFID(sendToAnalytics)
75+
webVitals.getLCP(sendToAnalytics)
76+
})
77+
</script>
78+
```
79+
6580
## API
6681

6782
### createApiReporter(url, [options])

0 commit comments

Comments
 (0)