A simple Google analyics component for Svelte Runes project. Please follow the following steps to set it up.
pnpm i -D runatics
Add your ANALYTICS_ID to .env
ANALYTICS_ID="G-12345ABCDE"
Add the following code to +layout.server.js
import { ANALYTICS_ID } from '$env/static/private';
/** @type {import('./$types').LayoutServerLoad} \*/
export async function load () {
return { ANALYTICS_ID };
}
Add the following code to +layout.svelte
<script>
import { Runatics } from 'runatics';
let { children, data } = $props();
const analyticsId = data.ANALYTICS_ID
</script>
<Runatics {analyticsId} />
{@render children()}