diff --git a/README.md b/README.md index 926283c..8473db2 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ [![Downloads][npm-downloads-src]][npm-downloads-href] [![Wide Angle][wideangle-src]][wideangle-href] -![full_logo_color_light_transparent](https://user-images.githubusercontent.com/4896588/224442362-45dd92e7-e118-46ac-a423-83d479a9654b.png) +![wide-angle-analytics-logo.png](assets/full_logo_color_light_transparent.png) Enable **privacy-friendly** web analytics in your Vue.js 3.x application with our official plugin. @@ -40,10 +40,11 @@ option|description|required|default|example siteId| The Site ID from Wide Angle Site settings| :white_check_mark: | _none_ | 8D27G3B9ACA01F4241 domain| Domain hosting the script, can be found in Wide Angle Analytics Site settings | :white_check_mark: | _none_ | stats.wideangle.co fingerprint | Should script use browser fingerprinting; this might require collecting consent depeing on the applicable laws | :x: | false | true -supressDnt | Should script ingore Do Not Track browser setting. If not enabled, not events will be sent if user's browser has DNT enabled | :x: | false | true +suppressDnt | Should script ingore Do Not Track browser setting. If not enabled, not events will be sent if user's browser has DNT enabled | :x: | false | true includeParams | 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']` excludePaths | An array of URL paths that should not trigger default events such as page view, page leave | :x: | `[]` | `['^/wp-admin/.*', ]` ignoreHash | If enabled, change in the URL fragment will not trigger page view event | :x: | false | true +consentMarker | Cookie (with or without) value which present implies consent and absence lack its lack | :x: | n/a | `WAA_CONSENT=true` You will find more details about these settings in [Wide Angle Analytics documentation](https://wideangle.co/documentation/configure-site). @@ -59,7 +60,7 @@ app.use(WideAngle, { siteId: "8D27G3B9ACA01F4241", domain: "stats.example.com", fingerprint: true, - supressDnt: true + suppressDnt: true }); ``` @@ -123,6 +124,59 @@ const sendEvent = async () => { ``` +# Consent Handling + +By default, Wide Angle Analytics does nore require consent thanks to its privacy-first, anonymous tracking and principaled approached to compliance. + +However, you have additional toggles should you wish to control consent, either in **Opt-In** or **Opt-Out** mode. + +## Opt-Out by default + +If the visitors browsers has `DoNotTrack` setting enabled in the browser, it will be understood as opt-out and not tracking events will be issued. + +You website can't overwrite this behaviour by specifying `suppressDnt` setting. + +```javascript +app.use(WideAngle, { + siteId: "8D27G3B9ACA01F4241", + suppressDnt: true +}); +``` + +## Opt-In or Opt-Out based on Cookie + +Wide 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. + +Example configuration with cookie marker, expecting cookie name `WAA_CONSENT` with value `true`: + +```javascript +app.use(WideAngle, { + siteId: "8D27G3B9ACA01F4241", + consentMarker: "WAA_CONSENT=true" +}); +``` + + +## Programmatic consent + +The Wide Angle serving offers two additional methods, which allow for recording tracking consent: + +- `recordConsent(subjectId: String): void`, and +- `revokeConsent()` + + +Calling above methods on `waa` service will overwrite other consent mechanism (ie. DoNotTrack, and cookie marker). + +Example usage: + +```vue + +``` + diff --git a/assets/full_logo_color_light_transparent.png b/assets/full_logo_color_light_transparent.png new file mode 100755 index 0000000..6f98b15 Binary files /dev/null and b/assets/full_logo_color_light_transparent.png differ diff --git a/package.json b/package.json index 7569540..16d27b5 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,12 @@ { "name": "wideangle-vuejs", - "version": "1.0.1", + "version": "2.0.0", "description": "Wide Angle Analytics web analytics Plugin for Vue.js 3.x", "homepage": "https://wideangle.co", - "repository": "github:wideangleanalytics/wideangle-vuejs", + "repository": { + "type": "git", + "url": "https://cloud.inputobjects.eu/forge/wideangle/wideangle-vuejs.git" + }, "main": "index.js", "scripts": { "build": "tsc -p tsconfig.json", diff --git a/sample/vue-sample/package-lock.json b/sample/vue-sample/package-lock.json index edcac82..30c61a4 100644 --- a/sample/vue-sample/package-lock.json +++ b/sample/vue-sample/package-lock.json @@ -9,8 +9,7 @@ "version": "0.0.0", "dependencies": { "vue": "^3.2.47", - "vue-router": "^4.1.6", - "wideangle-vue": "file:../../" + "vue-router": "^4.1.6" }, "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", @@ -18,9 +17,12 @@ } }, "../..": { - "name": "wideangle-vuejs", - "version": "0.0.1", - "license": "Apache-2.0" + "version": "2.0.0", + "extraneous": true, + "license": "Apache-2.0", + "devDependencies": { + "typescript": "^5.0.4" + } }, "node_modules/@babel/parser": { "version": "7.21.2", @@ -771,10 +773,6 @@ "peerDependencies": { "vue": "^3.2.0" } - }, - "node_modules/wideangle-vue": { - "resolved": "../..", - "link": true } }, "dependencies": { @@ -1175,9 +1173,6 @@ "requires": { "@vue/devtools-api": "^6.4.5" } - }, - "wideangle-vue": { - "version": "file:../.." } } } diff --git a/sample/vue-sample/package.json b/sample/vue-sample/package.json index 2f07364..2a8f55d 100644 --- a/sample/vue-sample/package.json +++ b/sample/vue-sample/package.json @@ -9,8 +9,7 @@ }, "dependencies": { "vue": "^3.2.47", - "vue-router": "^4.1.6", - "wideangle-vue": "file:../../" + "vue-router": "^4.1.6" }, "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", diff --git a/sample/vue-sample/src/main.js b/sample/vue-sample/src/main.js index 04c128c..d9e8e45 100644 --- a/sample/vue-sample/src/main.js +++ b/sample/vue-sample/src/main.js @@ -1,7 +1,7 @@ import { createApp } from 'vue' import App from './App.vue' import router from './router' -import WideAngle from 'wideangle-vue' +import WideAngle from 'wideangle-vuejs' import './assets/main.css' @@ -10,8 +10,8 @@ const app = createApp(App) app.use(router) app.use(WideAngle, { siteId: "8D27G3B9ACA01F4241", - domain: "wideangle.local:3000", + domain: "events.wideangle.test", fingerprint: true, - supressDnt: true + suppressDnt: true }) app.mount('#app')