{"id":24117288,"url":"https://github.com/wideangleanalytics/wideangle-nuxt","last_synced_at":"2025-09-18T06:32:10.003Z","repository":{"id":165227088,"uuid":"640584759","full_name":"wideangleanalytics/wideangle-nuxt","owner":"wideangleanalytics","description":"Wide Angle Analytics module for Nuxt (Nuxt3).","archived":false,"fork":false,"pushed_at":"2025-01-02T21:18:53.000Z","size":963,"stargazers_count":1,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-02T21:33:42.114Z","etag":null,"topics":["cookieless","google-analytics","nuxt","nuxt-module","nuxt3","privacy","vuejs","vuejs3","webanalytics","wideangleanalytics"],"latest_commit_sha":null,"homepage":"https://wideangle.co","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wideangleanalytics.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-05-14T15:21:03.000Z","updated_at":"2025-01-02T21:14:38.000Z","dependencies_parsed_at":"2023-11-08T12:26:39.622Z","dependency_job_id":"3aff0cb5-6054-40f7-8785-39ddab14e96f","html_url":"https://github.com/wideangleanalytics/wideangle-nuxt","commit_stats":{"total_commits":24,"total_committers":2,"mean_commits":12.0,"dds":0.125,"last_synced_commit":"f34a13327e20ef8434f5f7168f4110ae4bc406ec"},"previous_names":["wideangleanalytics/wideangle-nuxt"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wideangleanalytics%2Fwideangle-nuxt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wideangleanalytics%2Fwideangle-nuxt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wideangleanalytics%2Fwideangle-nuxt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wideangleanalytics%2Fwideangle-nuxt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wideangleanalytics","download_url":"https://codeload.github.com/wideangleanalytics/wideangle-nuxt/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233456070,"owners_count":18678963,"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":["cookieless","google-analytics","nuxt","nuxt-module","nuxt3","privacy","vuejs","vuejs3","webanalytics","wideangleanalytics"],"created_at":"2025-01-11T07:38:56.903Z","updated_at":"2025-09-18T06:32:09.978Z","avatar_url":"https://github.com/wideangleanalytics.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wide Angle Analytics Nuxt3 Module\n\n[![License][license-src]][license-href]\n[![Latest][npm-version-src]][npm-version-href]\n[![Downloads][npm-downloads-src]][npm-downloads-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n[![Wide Angle][wideangle-src]][wideangle-href]\n\n![Wide Angle Analytics Large Logo](assets/full_logo_color_light_transparent.png)\n\n# Wide Angle Analytics module for Nuxt\n\nEnable **privacy-friendly** web analytics in your [Nuxt 3.x](https://nuxt.com/) application with our official plugin.\n\n[Wide Angle Analytics](https://wideangle.co) is powerful, strictly-GDPR compliant Google Analytics alternative. \n\n# How to get started\n\nYou can enable Wide Angle Analytics in your Nuxt projects in just a few steps. No complex configuration needed, as our sane defaults provide you with a reliable and privacy-centric deployment out of the box. \n\n1. Go to the [Wide Angle](https://wideangle.co) website and create an account. You can enjoy a free 14-day trail. No Credit Card is required. [Learn more.](https://wideangle.co/documentation/create-account) \n2. [Create a new site](https://wideangle.co/documentation/create-and-configure-site) and activate it.\n3. Install the `wideangle-vuejs` plugin in your Vue application.\n\n```bash\nnpx nuxi@latest module add wideangle\n```\n\n4. Enable and configure the module.\n\n```javascript\nexport default defineNuxtConfig({\n  modules: ['wideangle-nuxt'],\n\n  runtimeConfig: {\n    public: {\n      wideangle: {\n        siteId: \"8D27G3B9ACA01F4241\"\n      }\n    }\n  }\n})\n```\n\n# Configuring Wide Angle Analytics plugin\n\nThe Wide Angle Analytics plugin must be initialized with a configuration object as there are required settings without defaults.\n\n\noption|description|required|default|example\n------|-----------|--------|-------|-------\nsiteId| The Site ID from the Wide Angle Site settings| :white_check_mark: | _none_ | 8D27G3B9ACA01F4241\ndomain| Domain hosting the script, can be found in Wide Angle Analytics Site settings | :x: | stats.wideangle.co | your.domain.com\nfingerprint | Should script use browser fingerprinting; this might require collecting consent depending on the applicable laws | :x: | false | true\nsuppressDnt | Should script ingore Do Not Track browser setting. If not enabled, no events will be sent if user's browser has DNT enabled | :x: | false | true\nincludeParams | An array of query parameters that can be passed as part of tracking event. By default only `utm_*` and `ref` parameters are passed in the event | :x: | `[]` | `['sessionId', 'offset']`\nexcludePaths | An array of URL paths that should not trigger default events such as page view, page leave | :x: | `[]` | `['^/wp-admin/.*', ]`\nignoreHash | If enabled, a change in the URL fragment will not trigger page view event | :x: | false | true\nconsentMarker | Name of cookie (with or without) which presence is treated as implied consent; when not defined, consent is not determined by cookie | :x: | n/a | `WAA_CONSENT=true`\n\nYou can find more details about these settings in the [Wide Angle Analytics documentation](https://wideangle.co/documentation/configure-site).\n\n\nExample:\n\n```javascript \nexport default defineNuxtConfig({\n  modules: ['wideangle-nuxt'],\n\n  runtimeConfig: {\n    public: {\n      wideangle: {\n        siteId: \"8D27G3B9ACA01F4241\",\n        domain: \"your.domain.com\",\n        fingerprint: false,\n        suppressDnt: true,\n        includeParams: ['q', 'customerId'],\n        excludePaths: ['^/admin.*'],\n        ignoreHash: true,\n        consentMarker: `WAA_CONSENT=true`\n      }\n    }  \n  }\n})\n```\n\n\n# Usage \n\nThe Wide Angle Analytics provides a composable which can be used in your component. \n\n```javascript\n\u003ctemplate\u003e\n  \u003cbutton @click=\"sendEvent\"\u003eSend Event\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  import { useWideAngle } from '#imports';\n\n  const sendEvent = () =\u003e {\n    useWideAngle().dispatchEvent('basket-open', {'page': 'catalogue'}, {'item-price': 599.00, 'basket-total': 1299.00});\n  }\n\u003c/script\u003e\n\n```\n\nYou will find a fully functional example in this [repository](playground/app.vue).\n\n\n## Tracking Pageviews\n\nNo action necessary. The tracker script automatically issues **Page View** and **Page Leave** events.\n\n## Tracking Events \n\nWide Angle supports three specialized events:\n* clicks\n* downloads \n* custom actions\n\nSite has to have these events enabled in the Wide Angle Analytics configuration prior to usage. Otherwise the tracker script will not send these events. Consult the [official documentation](https://wideangle.co/documentation/tracking-custom-actions) regarding how to enable event handling. \n\n### Tracking Clicks \n\nCurrently **Click Events** are [emitted automatically](https://wideangle.co/documentation/tracking-click-events) based on element data attributes. \n\n### Tracking Downloads\n\nDepending on the configured mode, the **Download Event** will fire automatically when either:\n* a file with recognized extension is being downloaded, or\n* when a link is marked with `data-waa-name` attribute.\n\n### Tracking Custom Actions\n\nCustom actions are the most flexible and can be triggered directly from Vue components. As such, their usage is not limitted due to the Shadow DOM.\n\nExample:\n\n```vue\n\u003ctemplate\u003e\n  \u003cbutton @click=\"sendEvent()\"\u003eSend Event\u003c/button\u003e    \n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { useWideAngle } from '#imports'\n\nconst sendEvent = async () =\u003e {\n  const params = {\n    session: 'cjhw92nf9aq',\n    cohort: 'c1233'\n  }\n  useWideAngle().dispatchEvent('interest', params);  \n}\n\u003c/script\u003e\n```\n\n### Module Assets\nYou can find a high-resolution Wide Angle Analytics logo and icon on our [media page](https://wideangle.co/media).\n\n# Recording consent\n\nThe Wide Angle Analytics, thanks to is privacy-first, anonymous approach to web traffic analytics does not requires consent by default. \n\nHowever, we do offer multiple tools that support collecting consent should it be required in your use case. \n\n## Opt-Out by default\n\nIf the visitors browsers has `DoNotTrack` setting enabled in the browser, it will be understood as opt-out and not tracking events will be issued.\n\nYou website can't overwrite this behaviour by specifying `suppressDnt` setting.\n\n```javascript\nwideangle: {\n  siteId: \"8D27G3B9ACA01F4241\",        \n  suppressDnt: true\n}\n```\n\n## Opt-In or Opt-Out based on Cookie\n\nWide Angle can be configure to handle presence of a cookie, or a cookie with specific value, as an implicit consent. Lack of the cookie will be handled as implicit opt-out.\n\nExample configuration with cookie marker, expecting cookie name `WAA_CONSENT` with value `true`:\n\n```javascript\nwideangle: {\n  siteId: \"8D27G3B9ACA01F4241\",        \n  consentMarker: \"WAA_CONSENT=true\"\n}\n```\n\n## Programmatic consent\n\nThe Wide Angle serving offers two additional methods, which allow for recording tracking consent:\n\n- `recordConsent(subjectId: String): void`, and\n- `revokeConsent()`\n\n\nCalling above methods on `waa` service will overwrite other consent mechanism (ie. DoNotTrack, and cookie marker).\n\nExample usage:\n\n```vue\n\u003cscript setup\u003e\n\nimport { useWideAngle } from '#imports'\n\nuseWideAngle().recordConsent('FHJ44111');\n\n\u003c/script\u003e\n```\n\n\u003c!-- Badges --\u003e\n\n[license-src]: https://img.shields.io/npm/l/wideangle-nuxt.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://opensource.org/license/apache-2-0/\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/wideangle-nuxt.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8DD\n[npm-downloads-href]: https://npmjs.com/package/wideangle-nuxt\n\n[npm-version-src]: https://img.shields.io/npm/v/wideangle-nuxt/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8DD\n[npm-version-href]: https://npmjs.com/package/wideangle-nuxt\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?\u0026logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n\n[wideangle-src]: https://img.shields.io/badge/logo-wideangle-blue?label=\u0026logo=data:image/png;base64,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\n[wideangle-href]: https://wideangle.co?utm_source=github\u0026utm_content=wideangle-nuxt\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwideangleanalytics%2Fwideangle-nuxt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwideangleanalytics%2Fwideangle-nuxt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwideangleanalytics%2Fwideangle-nuxt/lists"}