Add Google Analytics to Svelte

While building your web application with Svelte, integrating Google Analytics give you insights into user behavior, traffic sources, and other metrics, so you can improve the performance of your website/app.

This blog post will guide you through adding Google Analytics to your Svelte project.

Let's dive in!

Set up Google Analytics

Before integrating GA into your Svelte project, ensure you have a Google Analytics account set up for your website. Here's a quick overview of the steps:

Create a Google Analytics Account: Visit the Google Analytics website and sign in with your Google account. If you don’t have one, you'll need to create it.
Set Up a New Property: Follow the instructions to create a new GA4 property, choosing "Web" as the platform type.
Obtain Your Measurement ID: After configuring your property, Google will provide you with a Measurement ID (formatted as "G-XXXXXXXXXX"). Note this ID, as it’s crucial for integrating GA with your Svelte app.

...Or just use Simple Analytics. Privacy-friendly and simple. No complexity. No cookies. Just the data you need in a simple dashboard

Google Analytics vs Simple Analytics

Add Google Analytics to your Svelte Project

To integrate Google Analytics with a Svelte project, you will need to include the GA tracking code in your app. You can do this by creating a dedicated module for analytics or directly in your main app component. Here’s a simplified approach to get you started:

Create an Analytics Module:

Create a New File: In your Svelte project, create a new file named analytics.js in the src directory (or wherever you prefer to keep your utilities).
Add GA Tracking Code: In analytics.js, import the GA library and initialize it with your Measurement ID. You can use the official Google Analytics library for this purpose. Here's an example of what the code might look like:

// src/analytics.js
import { onMount } from 'svelte';

export const initGA = () => {
  onMount(() => {
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'YOUR_MEASUREMENT_ID');
  });
};

Replace 'YOUR_MEASUREMENT_ID' with your actual Measurement ID from Google Analytics.

Include Analytics in Your App: In your main app component, likely App.svelte, import and invoke the initGA function:

svelte
<script>
  import { initGA } from './analytics.js';

  // Initialize Google Analytics
  initGA();
</script>

This approach ensures the Google Analytics script runs when your app initializes, tracking page views and user interactions across your Svelte application.

Verify the Integration

To ensure Google Analytics is correctly tracking your Svelte app:

Run Your App: Deploy your app or run it locally, then visit your app to generate some traffic.
Check Google Analytics: Log into your Google Analytics account and go to the "Realtime" section to see if your activity is being tracked.

Analyze and optimize based on Insights

With Google Analytics now integrated into your Svelte project, you can begin to analyze the collected data:

Traffic Source Analysis: Identify how users are finding your app, allowing you to optimize your marketing strategies.
Engagement Metrics: Gain insights into how users interact with your app, what content is most engaging, and identify areas for improvement.
Conversion Tracking: Monitor conversions and goal completions to measure the effectiveness of your app.

Final Thoughts

Adding Google Analytics can give you great insights. However, ask yourself: is Google Analytics the right tool for you?

Google Analytics is great, but also complex and a bit clunky. If you just want a straightforward dashboard with the insights you need, GA is not a great place to start. Additionally, Google doesn't care about privacy and GA requires an annoying cookie banner.

That's why we built Simple Analytics, a privacy-friendly and simple analytics tool - no personal data, no cookies, just the insights you need in a straightforward dashboard.

If this resonates with you, feel free to give Simple Analytics a spin (It's free). You just need to add the script and off you go. This takes about one minute- and it's easy to integrate with Svelte.

Enjoy!

Google Analytics Begrippenlijst