@breu.io/web-essentials

A collection of essential Svelte components and utilities for modern web development.

Installation

npm install @breu.io/web-essentials

Google Analytics

Easily integrate Google Analytics (GA4) or Google Tag Manager into your SvelteKit application.

Usage

1. Initialize

Integrate the GoogleAnalytics component within your root layout (e.g., src/routes/+layout.svelte). This component manages gtag.js script injection and initialization. Pass your Google Analytics id (e.g., G-XXXXXXXXXX for GA4 or UA-XXXXXXXXX-Y for Universal Analytics), and the browser and dev flags imported from $app/environment.

<script>
	import { GoogleAnalytics } from '@breu.io/web-essentials';
	import { browser, dev } from '$app/environment';
</script>

<GoogleAnalytics {browser} {dev} id="G-XXXXXXXXXX" />

2. Track Events

Utilize the gtag function to dispatch events from any component or module within your application.

<script>
	import { gtag } from '@breu.io/web-essentials';

	function trackSignup() {
		gtag('event', 'signup', {
			method: 'google'
		});
	}
</script>

<button onclick={trackSignup}>Sign Up</button>

Type Safety

The library provides comprehensive type definitions for the gtag function and ensures proper typing for window.dataLayer.