{"id":13723710,"url":"https://github.com/beyonk-group/svelte-google-analytics","last_synced_at":"2025-05-07T17:30:59.281Z","repository":{"id":34024544,"uuid":"153803322","full_name":"beyonk-group/svelte-google-analytics","owner":"beyonk-group","description":"Google Analytics component for Svelte","archived":false,"fork":false,"pushed_at":"2023-12-14T13:42:10.000Z","size":392,"stargazers_count":77,"open_issues_count":9,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-08T00:03:20.426Z","etag":null,"topics":["analytics","beyonk","google","google-analytics","seo","svelte","svelte-google-analytics","tracking","vanillajs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beyonk-group.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-19T15:20:41.000Z","updated_at":"2024-08-30T07:33:24.000Z","dependencies_parsed_at":"2025-02-08T00:03:23.567Z","dependency_job_id":"059ceac7-d86d-485b-b9d8-3240d86b6f83","html_url":"https://github.com/beyonk-group/svelte-google-analytics","commit_stats":null,"previous_names":["beyonk-group/svelte-google-analytics","beyonk-adventures/svelte-google-analytics"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-google-analytics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-google-analytics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-google-analytics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-google-analytics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beyonk-group","download_url":"https://codeload.github.com/beyonk-group/svelte-google-analytics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252926553,"owners_count":21826334,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","beyonk","google","google-analytics","seo","svelte","svelte-google-analytics","tracking","vanillajs"],"created_at":"2024-08-03T01:01:44.723Z","updated_at":"2025-05-07T17:30:58.606Z","avatar_url":"https://github.com/beyonk-group.png","language":"JavaScript","funding_links":[],"categories":["components and libraries"],"sub_categories":["social and other 3rd party services"],"readme":"\u003ca href=\"https://beyonk.com\"\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png\" width=\"198\" /\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n\u003c/a\u003e\n\n# **Svelte Google Analytics**\n\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![Svelte v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)\n\nSupports Google Analytics v4!\n\n## Install the package\n\n```bash\npnpm i --save-dev @beyonk/svelte-google-analytics\n```\n\n## **Usage**\nIn `App.svelte`\n```svelte\nimport { GoogleAnalytics } from '@beyonk/svelte-google-analytics'\n\n\u003cGoogleAnalytics properties={[ 'google property id A', ...'google property id X' ]} /\u003e\n```\nComponent accepts two additional properties: `enabled` and `configurations`.\n### The `configurations` property (optional)\n`configurations` props which accepts an object type with configurations for the properties. The key in this object is the id of the property.\nExample on disabling automatic pageviews for the `id-1` property:\n\n```svelte\n\u003cGoogleAnalytics\n    properties={[ 'id-1' ]}\n    configurations={{ 'id-1': { 'send_page_view': false } }} /\u003e\n```\n\n### The `enabled` property (optional)\nThe `enabled` prop set to `true` by default.\nLogic can be added here to disable/enable analytics.\n\nIf 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:\n\n```svelte\n\u003cGoogleAnalytics\n    bind:this={ga}\n    properties={[ 'id-1' ]}\n    enabled={false} /\u003e\n\n\u003cscript\u003e\n  function enableAnalytics () {\n    ga.init()\n  }\n\u003c/script\u003e\n```\n\n### Page Tracking\nWith Google Analytics v4, most basic events are automatic. See [the docs](https://support.google.com/analytics/answer/9234069)\n\n(see [Google Analytics offical docs - Pageviews](https://developers.google.com/analytics/devguides/collection/gtagjs/pages)) for more info\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\n### Event Tracking\n\nAll [events specified in the documentation](https://support.google.com/analytics/answer/9267735?hl=en\u0026ref_topic=9756175) are implemeneted (generated automatically from scraping the docs pages and building the project!)\n\n```svelte\n\u003cscript\u003e\n  import { ga } from '@beyonk/svelte-google-analytics'\n\n  function handleClick () {\n    ga.games.earnVirtualCurrency('SvelteBucks', 50)\n  }\n\u003c/script\u003e\n\n\u003cmain\u003e\n  \u003cbutton on:click={handleClick}\u003eGet 50 SvelteBucks\u003c/button\u003e\n\u003c/main\u003e\n```\n\n#### Custom Events\n\nCustom events can be tracked with `addEvent`:\n\n```svelte\n\u003cscript\u003e\n  import { ga } from '@beyonk/svelte-google-analytics'\n\n  function handleClick () {\n    ga.addEvent('event_name', {\n      foo: 'bar',\n      baz: 'qux'\n    })\n  }\n\u003c/script\u003e\n```\n\n\n#### Multiple Properties\n\nTo send an event to a different property, specify the property id as the last parameter to the event: `send_to`.\n\n```js\nga.games.earnVirtualCurrency('SvelteBucks', 50, 'Property Id B')\n```\n\n#### Set User Properties\nTo 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).\n\n```js\nga.setUserProperties({\n  favorite_composer: 'Mahler',\n  favorite_instrument: 'double bass',\n  season_ticketholder: 'true'\n})\n```\n\n#### Set User Id\nTo identify user inside GA and link their sessions together, set the Properties with `setUserId`.\n\n```js\nga.setUserId('user_id_here')\n```\n\n\n#### Set config\nTo add a Google Analytics ID after initialization call the `setConfig` and pass optional configuration options.\n\n```js\nga.setConfig('ga_id', opts)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyonk-group%2Fsvelte-google-analytics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeyonk-group%2Fsvelte-google-analytics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyonk-group%2Fsvelte-google-analytics/lists"}