Learn the simplest way to integrate Google Analytics into your SvelteKit website, enabling detailed traffic analysis.

Integrating Google Analytics into your SvelteKit website is essential for tracking and analyzing your website’s traffic. Although there are many web analytics providers, Google Analytics is arguably the most popular across the web. This guide provides a straightforward method for embedding Google Analytics into your SvelteKit application, ensuring you gain valuable insights into your site’s performance. This method was tested in February 2024. However, due to the dynamic evolution of SvelteKit, it may require adjustments in the future.

Direct Embedding of Google Analytics Snippet

The most straightforward method to integrate Google Analytics with your SvelteKit site is by directly embedding the analytics snippet provided by Google into your src/app.html file. This approach is ideal for those looking for a quick setup without the need for advanced tracking configurations.

Step 1: Obtain Your Google Analytics Tracking ID

First, sign in to your Google Analytics account and set up a property for your website. Google Analytics will then provide you with a unique Tracking ID (UA-XXXXX-Y) or Measurement ID (G-XXXXXXX) for Google Analytics 4 properties.

Step 2: Embed the Analytics Snippet

Navigate to the src/app.html file in your SvelteKit project. Within the <head> tag, paste the Google Analytics script snippet that looks like the following:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'YOUR_TRACKING_ID');
</script>

Your app.html file should look something like this after the addition:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'YOUR_TRACKING_ID');
</script>
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

Replace YOUR_TRACKING_ID with your actual Tracking ID or Measurement ID provided by Google Analytics.

Step 3: Verify the Integration

After adding the snippet, it’s crucial to verify that Google Analytics is correctly tracking your website’s activity. You can do this by visiting your site and checking the Realtime report in your Google Analytics dashboard to see if your visit is recorded.

Other Integration Methods

While direct embedding is the simplest approach, there are other methods to integrate Google Analytics with your SvelteKit site, offering more flexibility and control over the tracking setup. These include:

  • Using a Svelte Action: A more dynamic approach that involves creating a Svelte action to initialize Google Analytics. This method allows for more granular control over when and how analytics is loaded and can be particularly useful for single-page applications.

  • Third-Party Libraries: There are npm packages available that can simplify the integration of Google Analytics with Svelte and SvelteKit projects. These libraries often provide additional functionalities, such as automatic route tracking and event tracking with minimal setup.

Wrapping Up

Integrating Google Analytics into your SvelteKit website is straightforward, especially with the direct embedding method. This setup provides a good foundation for tracking and analyzing your website’s traffic. However, as SvelteKit continues to evolve, keep an eye on potential changes that might affect how external scripts like Google Analytics are integrated.