Svelte Google Analytics

Supports Google Analytics v4!

Install the package

npm i --save-dev @beyonk/svelte-google-analytics

Usage

In App.svelte

import { GoogleAnalytics } from '@beyonk/svelte-google-analytics'

<GoogleAnalytics properties={[ 'google property id A', ...'google property id X' ]} />

Component accepts an enabled prop which is set to true by default.

Logic can be added here to disable/enable analytics.

Page Tracking

With Google Analytics v4, most basic events are automatic. See the docs

(see Google Analytics offical docs - Pageviews) for more info

Event Tracking

All events specified in the documentation are implemeneted (generated automatically from scraping the docs pages and building the project!)

<script>
  import { ga } from '@beyonk/svelte-google-analytics'

  function handleClick () {
    ga.earnVirtualCurrency('SvelteBucks', 50)
  }
</script>

<main>
  <button on:click={handleClick}>Get 50 SvelteBucks</button>
</main>

Custom Events

Custom events can be tracked with addEvent:

<script>
  import { ga } from '@beyonk/svelte-google-analytics'

  function handleClick () {
    ga.addEvent('event_name', {
      foo: 'bar',
      baz: 'qux'
    })
  }
</script>

Multiple Properties

To send an event to a different property, specify the property id as the last parameter to the event: send_to.

ga.earnVirtualCurrency('SvelteBucks', 50, 'Property Id B')