diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 7830f40..0000000 --- a/.npmignore +++ /dev/null @@ -1,28 +0,0 @@ -/sample -.editorconfig -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -.DS_Store -dist-ssr -coverage -*.local - -/cypress/videos/ -/cypress/screenshots/ - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? diff --git a/README.md b/README.md index 8473db2..4dad51e 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,8 @@ +![full_logo_color_light_transparent](https://user-images.githubusercontent.com/4896588/224442362-45dd92e7-e118-46ac-a423-83d479a9654b.png) + + # Wide Angle Analytics for Vue.js -[![License][license-src]][license-href] -[![Latest][npm-version-src]][npm-version-href] -[![Downloads][npm-downloads-src]][npm-downloads-href] -[![Wide Angle][wideangle-src]][wideangle-href] - -![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. [Wide Angle Analytics](https://wideangle.co) is powerful, strictly-GDPR compliant Google Analytics alternative. @@ -40,11 +36,10 @@ 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 -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 +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 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). @@ -60,7 +55,7 @@ app.use(WideAngle, { siteId: "8D27G3B9ACA01F4241", domain: "stats.example.com", fingerprint: true, - suppressDnt: true + supressDnt: true }); ``` @@ -94,12 +89,18 @@ Site has to have these event enable in Wide Angle Analytics configuration prior Currently **Click Events** are [emitted automatically](https://wideangle.co/documentation/tracking-click-events) based on element data attributes. +| :warning: The tracker script does not listen to events inside shadow DOM. This is known limitation to be addressed in near term. | +|--------------------------------------------------------------------------------------------------------------------------------------------| + ### Tracking Downloads Depending on the configured mode, the **Download Event** will fire automatically when either: * a file with recognized extension is being downloaded, or * when a link is marked with `data-waa-name` attribute. +| :warning: Currently the tracker script does not listen to events inside shadow DOM. This is known limitation to be addressed in near term. | +|--------------------------------------------------------------------------------------------------------------------------------------------| + ### Tracking Custom Actions Custom action are the most flexible and can be triggered directly from Vue components. As such their usage is not limitted due to Shadow DOM. @@ -119,78 +120,7 @@ const sendEvent = async () => { session: 'cjhw92nf9aq', cohort: 'c1233' } - waa.value.dispatchEvent('interest', params); + waa.dispatchEvent('interest', params); } ``` - -# 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 - -``` - - - - -[license-src]: https://img.shields.io/npm/l/wideangle-vuejs.svg?style=flat&colorA=18181B&colorB=28CF8D -[license-href]: https://opensource.org/license/apache-2-0/ - -[npm-downloads-src]: https://img.shields.io/npm/dm/wideangle-vuejs.svg?style=flat&colorA=18181B&colorB=28CF8DD -[npm-downloads-href]: https://npmjs.com/package/wideangle-vuejs - -[npm-version-src]: https://img.shields.io/npm/v/wideangle-vuejs/latest.svg?style=flat&colorA=18181B&colorB=28CF8DD -[npm-version-href]: https://npmjs.com/package/wideangle-vuejs - -[wideangle-src]: https://img.shields.io/badge/logo-wideangle-blue?label=&logo=data:image/png;base64,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 -[wideangle-href]: https://wideangle.co?utm_source=github&utm_content=wideangle-vuejs - - - diff --git a/assets/full_logo_color_light_transparent.png b/assets/full_logo_color_light_transparent.png deleted file mode 100755 index 6f98b15..0000000 Binary files a/assets/full_logo_color_light_transparent.png and /dev/null differ diff --git a/index.js b/index.js index 1d0b8d4..9136f09 100644 --- a/index.js +++ b/index.js @@ -1,16 +1,9 @@ -import { initWideAngle } from "./dist"; -import { ref } from 'vue'; +import { initWideAngle } from "./src"; -export { initWideAngle } from "./dist"; export default { install: (app, options) => { - const waaRef = ref() - app.provide('waa', waaRef); initWideAngle(options) - .then(waa => { - waaRef.value = waa; - console.debug("[WAA] Wide Angle Analytics instance available"); - }).catch(e => { console.error("[WAA] Failed to load Wide Angle Plugin", e)}); - return waaRef; + .then(waa => { app.provide('waa', waa); }) + .catch(e => { console.error("Failed to load Wide Angle Plugin", e)}); } } diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index d422b80..0000000 --- a/package-lock.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "name": "wideangle-vuejs", - "version": "0.0.3", - "lockfileVersion": 2, - "requires": true, - "packages": { - "": { - "name": "wideangle-vuejs", - "version": "0.0.3", - "license": "Apache-2.0", - "devDependencies": { - "typescript": "^5.0.4" - } - }, - "node_modules/typescript": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz", - "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", - "dev": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=12.20" - } - } - }, - "dependencies": { - "typescript": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz", - "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", - "dev": true - } - } -} diff --git a/package.json b/package.json index 16d27b5..420482e 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,11 @@ { "name": "wideangle-vuejs", - "version": "2.0.0", + "version": "0.0.1", "description": "Wide Angle Analytics web analytics Plugin for Vue.js 3.x", "homepage": "https://wideangle.co", - "repository": { - "type": "git", - "url": "https://cloud.inputobjects.eu/forge/wideangle/wideangle-vuejs.git" - }, + "repository": "github:inputobjects/wideangle-vuejs", "main": "index.js", "scripts": { - "build": "tsc -p tsconfig.json", - "clear": "rimraf dist", - "rebuild": "npm run clear && npm run build", - "prepublishOnly": "npm run rebuild" }, "keywords": [ "wide angle analytics", @@ -20,13 +13,8 @@ "vue.js", "vuejs", "plugin", - "vuejs plugin", - "privacy web analytics", - "privacy" + "vuejs plugin" ], "author": "Wide Angle Analytics ", - "license": "Apache-2.0", - "devDependencies": { - "typescript": "^5.0.4" - } + "license": "Apache-2.0" } diff --git a/sample/vue-sample/package-lock.json b/sample/vue-sample/package-lock.json index 30c61a4..edcac82 100644 --- a/sample/vue-sample/package-lock.json +++ b/sample/vue-sample/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "vue": "^3.2.47", - "vue-router": "^4.1.6" + "vue-router": "^4.1.6", + "wideangle-vue": "file:../../" }, "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", @@ -17,12 +18,9 @@ } }, "../..": { - "version": "2.0.0", - "extraneous": true, - "license": "Apache-2.0", - "devDependencies": { - "typescript": "^5.0.4" - } + "name": "wideangle-vuejs", + "version": "0.0.1", + "license": "Apache-2.0" }, "node_modules/@babel/parser": { "version": "7.21.2", @@ -773,6 +771,10 @@ "peerDependencies": { "vue": "^3.2.0" } + }, + "node_modules/wideangle-vue": { + "resolved": "../..", + "link": true } }, "dependencies": { @@ -1173,6 +1175,9 @@ "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 2a8f55d..cc7d528 100644 --- a/sample/vue-sample/package.json +++ b/sample/vue-sample/package.json @@ -3,13 +3,14 @@ "version": "0.0.0", "private": true, "scripts": { - "dev": "vite --host 0.0.0.0", + "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.2.47", - "vue-router": "^4.1.6" + "vue-router": "^4.1.6", + "wideangle-vue": "file:../../" }, "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", diff --git a/sample/vue-sample/src/App.vue b/sample/vue-sample/src/App.vue index 9940d3c..013fed3 100644 --- a/sample/vue-sample/src/App.vue +++ b/sample/vue-sample/src/App.vue @@ -28,7 +28,5 @@ nav { display: flex; flex-direction: column; gap: 2rem; - width: 100%; - align-items: center; } diff --git a/sample/vue-sample/src/assets/main.css b/sample/vue-sample/src/assets/main.css index 4acaa04..02ffe70 100644 --- a/sample/vue-sample/src/assets/main.css +++ b/sample/vue-sample/src/assets/main.css @@ -1,13 +1,3 @@ body { - background-color: azure; - margin: 2rem; font-size: 1.5rem; - font-weight: 800; - font-family: 'Courier New', Courier, monospace; -} - -button { - border-width: 4px; - border-style: solid; - border-color: lightpink; } diff --git a/sample/vue-sample/src/components/EmbeddedButton.vue b/sample/vue-sample/src/components/EmbeddedButton.vue deleted file mode 100644 index b5df187..0000000 --- a/sample/vue-sample/src/components/EmbeddedButton.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - - diff --git a/sample/vue-sample/src/main.js b/sample/vue-sample/src/main.js index d9e8e45..04c128c 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-vuejs' +import WideAngle from 'wideangle-vue' import './assets/main.css' @@ -10,8 +10,8 @@ const app = createApp(App) app.use(router) app.use(WideAngle, { siteId: "8D27G3B9ACA01F4241", - domain: "events.wideangle.test", + domain: "wideangle.local:3000", fingerprint: true, - suppressDnt: true + supressDnt: true }) app.mount('#app') diff --git a/sample/vue-sample/src/views/SampleView.vue b/sample/vue-sample/src/views/SampleView.vue index 145bd60..a739891 100644 --- a/sample/vue-sample/src/views/SampleView.vue +++ b/sample/vue-sample/src/views/SampleView.vue @@ -1,16 +1,13 @@ @@ -32,6 +29,6 @@ main { display: flex; flex-direction: column; gap: 1rem; - max-width: 600px; + max-width: 300px; } diff --git a/tsconfig.json b/tsconfig.json deleted file mode 100644 index c8b7297..0000000 --- a/tsconfig.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "include": ["src/**/*"], - "compilerOptions": { - "target": "es2016", - // "module": "commonjs", - "declaration": true, - "esModuleInterop": true, - "forceConsistentCasingInFileNames": true, - "strict": true, - "allowJs": true, - "outDir": "dist", - "skipLibCheck": true - } -}