https://github.com/beyonk-group/svelte-google-analytics
Google Analytics component for Svelte
https://github.com/beyonk-group/svelte-google-analytics
analytics beyonk google google-analytics seo svelte svelte-google-analytics tracking vanillajs
Last synced: about 1 year ago
JSON representation
Google Analytics component for Svelte
- Host: GitHub
- URL: https://github.com/beyonk-group/svelte-google-analytics
- Owner: beyonk-group
- Created: 2018-10-19T15:20:41.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-14T13:42:10.000Z (over 2 years ago)
- Last Synced: 2025-02-08T00:03:20.426Z (over 1 year ago)
- Topics: analytics, beyonk, google, google-analytics, seo, svelte, svelte-google-analytics, tracking, vanillajs
- Language: JavaScript
- Size: 383 KB
- Stars: 77
- Watchers: 6
- Forks: 12
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Svelte Google Analytics**
[](http://standardjs.com) [](https://svelte.dev)
Supports Google Analytics v4!
## Install the package
```bash
pnpm i --save-dev @beyonk/svelte-google-analytics
```
## **Usage**
In `App.svelte`
```svelte
import { GoogleAnalytics } from '@beyonk/svelte-google-analytics'
```
Component accepts two additional properties: `enabled` and `configurations`.
### The `configurations` property (optional)
`configurations` props which accepts an object type with configurations for the properties. The key in this object is the id of the property.
Example on disabling automatic pageviews for the `id-1` property:
```svelte
```
### The `enabled` property (optional)
The `enabled` prop set to `true` by default.
Logic can be added here to disable/enable analytics.
If you disable tracking by default, for instance, due to [GDPR](https://github.com/beyonk-adventures/gdpr-cookie-consent-banner), then you can enable it later by calling `init()` on your component:
```svelte
function enableAnalytics () {
ga.init()
}
```
### Page Tracking
With Google Analytics v4, most basic events are automatic. See [the docs](https://support.google.com/analytics/answer/9234069)
(see [Google Analytics offical docs - Pageviews](https://developers.google.com/analytics/devguides/collection/gtagjs/pages)) for more info
### Event Tracking
All [events specified in the documentation](https://support.google.com/analytics/answer/9267735?hl=en&ref_topic=9756175) are implemeneted (generated automatically from scraping the docs pages and building the project!)
```svelte
import { ga } from '@beyonk/svelte-google-analytics'
function handleClick () {
ga.games.earnVirtualCurrency('SvelteBucks', 50)
}
Get 50 SvelteBucks
```
#### Custom Events
Custom events can be tracked with `addEvent`:
```svelte
import { ga } from '@beyonk/svelte-google-analytics'
function handleClick () {
ga.addEvent('event_name', {
foo: 'bar',
baz: 'qux'
})
}
```
#### Multiple Properties
To send an event to a different property, specify the property id as the last parameter to the event: `send_to`.
```js
ga.games.earnVirtualCurrency('SvelteBucks', 50, 'Property Id B')
```
#### Set User Properties
To split user to different segment, such as language preference or geographic location, set the Properties with `setUserProperties` and setup custom dimension on Google Analytics dashboard. For more information see [Google Analytics Documentation](https://developers.google.com/analytics/devguides/collection/ga4/user-properties).
```js
ga.setUserProperties({
favorite_composer: 'Mahler',
favorite_instrument: 'double bass',
season_ticketholder: 'true'
})
```
#### Set User Id
To identify user inside GA and link their sessions together, set the Properties with `setUserId`.
```js
ga.setUserId('user_id_here')
```
#### Set config
To add a Google Analytics ID after initialization call the `setConfig` and pass optional configuration options.
```js
ga.setConfig('ga_id', opts)
```