Use Google Analytics in Blog Page

[String10]

First, register an account in Home: Google Analytics.

After you fill all the forms, create one website app on that platform.

Click that button and paste the code immediately after the head element then everything will be OK.

---

Found one alternative for Svelte:

Create src/lib/Analytics.svelte:

<script lang="ts">
  import { page } from '$app/stores'

  $: {
    if (typeof gtag !== 'undefined') {
      gtag('config', 'MEASUREMENT_ID', {
        page_title: document.title,
        page_path: $page.url.pathname,
      })
    }
  }
</script>

<svelte:head>
  <script
    async
    src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID">
  </script>
  <script>
    window.dataLayer = window.dataLayer || []

    function gtag() {
      dataLayer.push(arguments)
    }

    gtag('js', new Date())
    gtag('config', 'MEASUREMENT_ID')
  </script>
</svelte:head>

Optional step is to install the type definitions for gtag.js with npm i -D @types/gtag.js.

This is how you can measure information such as the page title and page path using the SvelteKit store.

Because it’s using a store value whenever the page gets updated inside the $: { ... } reactive block we can submit the new page view if gtag exists on window meaning it’s inside the browser context.

Include the Analytics component inside your main layout __layout.svelte making it available on every page.

<script lang="ts">
  import Analytics from '$lib/analytics.svelte'
</script>

<Analytics />

<slot />

That’s it! 🎉

Warning

If you’re using an ad blocker you’re going to see the net::ERR_BLOCKED_BY_CLIENT error in your console as it gets blocked by those extensions — so if you have a tech savvy audience you might want to look into other options.

Referred from Google Analytics With SvelteKit.