[examples] Add Vercel Analytics for CRA/SvelteKit templates. (#7894)

Successfully tested with:

- [CRA](https://front-git-analytics-for-all-frameworks.vercel.sh/now-examples/create-react-app/analytics?device=desktop&timePeriod=1d&percentile=75&timeInterval=3h&sort=datapoints&search=)
- [SvelteKit](https://front-git-analytics-for-all-frameworks.vercel.sh/now-examples/sveltekit/analytics?device=desktop&timePeriod=1d&percentile=75&timeInterval=3h&sort=datapoints&search=)

Dependencies have also been updated 👍

examples/sveltekit/package.json

@@ -12,18 +12,20 @@
     "format": "prettier --write --plugin-search-dir=. ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
+    "@sveltejs/adapter-auto": "1.0.0-next.50",
+    "@sveltejs/kit": "1.0.0-next.347",
     "@types/cookie": "^0.4.1",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
     "svelte": "^3.46.0",
     "svelte-check": "^2.2.6",
+    "svelte-preprocess": "^4.10.6",
     "typescript": "~4.6.2"
   },
   "type": "module",
   "dependencies": {
     "@fontsource/fira-mono": "^4.5.0",
-    "cookie": "^0.4.1"
+    "cookie": "^0.4.1",
+    "web-vitals": "^2.1.4"
   }
 }

examples/sveltekit/src/lib/vitals.js

@@ -0,0 +1,66 @@
+import { getCLS, getFCP, getFID, getLCP, getTTFB } from 'web-vitals';
+
+const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals';
+
+function getConnectionSpeed() {
+  return 'connection' in navigator &&
+    navigator['connection'] &&
+    'effectiveType' in navigator['connection']
+    ? // @ts-ignore
+      navigator['connection']['effectiveType']
+    : '';
+}
+
+/**
+ * @param {import("web-vitals").Metric} metric
+ * @param {{ params: { [s: string]: any; } | ArrayLike<any>; path: string; analyticsId: string; debug: boolean; }} options
+ */
+function sendToAnalytics(metric, options) {
+  const page = Object.entries(options.params).reduce(
+    (acc, [key, value]) => acc.replace(value, `[${key}]`),
+    options.path
+  );
+
+  const body = {
+    dsn: options.analyticsId,
+    id: metric.id,
+    page,
+    href: location.href,
+    event_name: metric.name,
+    value: metric.value.toString(),
+    speed: getConnectionSpeed()
+  };
+
+  if (options.debug) {
+    console.log('[Analytics]', metric.name, JSON.stringify(body, null, 2));
+  }
+
+  const blob = new Blob([new URLSearchParams(body).toString()], {
+    // This content type is necessary for `sendBeacon`
+    type: 'application/x-www-form-urlencoded'
+  });
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon(vitalsUrl, blob);
+  } else
+    fetch(vitalsUrl, {
+      body: blob,
+      method: 'POST',
+      credentials: 'omit',
+      keepalive: true
+    });
+}
+
+/**
+ * @param {any} options
+ */
+export function webVitals(options) {
+  try {
+    getFID((metric) => sendToAnalytics(metric, options));
+    getTTFB((metric) => sendToAnalytics(metric, options));
+    getLCP((metric) => sendToAnalytics(metric, options));
+    getCLS((metric) => sendToAnalytics(metric, options));
+    getFCP((metric) => sendToAnalytics(metric, options));
+  } catch (err) {
+    console.error('[Analytics]', err);
+  }
+}

examples/sveltekit/src/routes/__layout.svelte

@@ -1,6 +1,21 @@
 <script>
   import Header from '$lib/header/Header.svelte';
+  import { webVitals } from '$lib/vitals';
+  import { browser } from '$app/env';
+  import { page } from '$app/stores';
   import '../app.css';
+
+  let analyticsId = import.meta.env.VERCEL_ANALYTICS_ID;
+
+  if (browser && analyticsId) {
+    page.subscribe(({ url, params }) =>
+      webVitals({
+        path: url.pathname,
+        params,
+        analyticsId
+      })
+    );
+  }
 </script>
 
 <Header />

examples/sveltekit/svelte.config.js

@@ -1,7 +1,13 @@
 import adapter from '@sveltejs/adapter-auto';
+import preprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+  preprocess: preprocess({
+    replace: [
+      ['import.meta.env.VERCEL_ANALYTICS_ID', JSON.stringify(process.env.VERCEL_ANALYTICS_ID)]
+    ]
+  }),
   kit: {
     adapter: adapter(),