diff --git a/README.md b/README.md index 6988e34d..3a5836fe 100644 --- a/README.md +++ b/README.md @@ -87,7 +87,6 @@ More coming soon! [//]: # (TODO | `plausible-analytics` | Plausible Analytics | `usePlausibleAnalytics` |) [//]: # (TODO | `simple-analytics` | Simple Analytics | `useSimpleAnalytics` |) [//]: # (TODO | `umami-analytics` | Umami Analytics | `useUmamiAnalytics` |) -[//]: # (TODO | `cloudflare-web-analytics` | Cloudflare Web Analytics | `useCloudflareWebAnalytics` |) [//]: # (TODO | `matomo` | Matomo | `useMatomo` |) ### Loading Scripts Globally diff --git a/client/app.vue b/client/app.vue index 1f35873a..c01997fb 100644 --- a/client/app.vue +++ b/client/app.vue @@ -47,7 +47,7 @@ onDevtoolsClientConnected(async (client) => {
{{ script.key }}
- {{ script.$script.status }} + {{ script.$script.status.value }}
{{ scriptSizes[script.key] }} diff --git a/package.json b/package.json index 81fae92d..0ad57289 100644 --- a/package.json +++ b/package.json @@ -47,13 +47,16 @@ "build": { "externals": [ "@unhead/vue", - "@unhead/schema" + "@unhead/schema", + "@unhead/vue", + "#nuxt-scripts" ] }, "dependencies": { "@nuxt/devtools-kit": "^1.1.5", "@nuxt/devtools-ui-kit": "^1.1.5", "@nuxt/kit": "^3.11.1", + "@unhead/vue": "^1.9.3", "consola": "^3.2.3", "defu": "^6.1.4", "estree-walker": "^3.0.3", diff --git a/playground/app.vue b/playground/app.vue index 394fbce2..087def59 100644 --- a/playground/app.vue +++ b/playground/app.vue @@ -1,26 +1,3 @@ - - diff --git a/playground/composables/consent.ts b/playground/composables/consent.ts deleted file mode 100644 index d2d5d4e6..00000000 --- a/playground/composables/consent.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { createScriptConsentTrigger } from '#imports' - -export const scriptConsent = createScriptConsentTrigger() diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index ad8e91bf..c1fcf6e0 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -6,13 +6,6 @@ export default defineNuxtConfig({ ], devtools: { enabled: true }, scripts: { - globals: [ - 'https://cdn.jsdelivr.net/npm/vue@3.2.20/dist/vue.global.prod.js', - ], - overrides: { - 'cloudflare-turnstile': { - assetStrategy: 'bundle', - }, - }, + // TODO globals / register / overrides }, }) diff --git a/playground/pages/features/cookie-consent.vue b/playground/pages/features/cookie-consent.vue new file mode 100644 index 00000000..19db831c --- /dev/null +++ b/playground/pages/features/cookie-consent.vue @@ -0,0 +1,31 @@ + + + diff --git a/playground/pages/ready.vue b/playground/pages/features/on-nuxt-ready.vue similarity index 100% rename from playground/pages/ready.vue rename to playground/pages/features/on-nuxt-ready.vue diff --git a/playground/pages/index.vue b/playground/pages/index.vue index f3973b56..23a34a89 100644 --- a/playground/pages/index.vue +++ b/playground/pages/index.vue @@ -31,6 +31,17 @@ const thirdParties = [ path: '/third-parties/segment', }, ] + +const features = [ + { + name: 'Cookie Consent', + path: '/features/cookie-consent', + }, + { + name: 'Trigger: On Nuxt Ready', + path: '/features/on-nuxt-ready', + }, +] diff --git a/playground/pages/third-parties/fathom-analytics.vue b/playground/pages/third-parties/fathom-analytics.vue index eeb9be05..ca81e46a 100644 --- a/playground/pages/third-parties/fathom-analytics.vue +++ b/playground/pages/third-parties/fathom-analytics.vue @@ -6,38 +6,27 @@ useHead({ }) // composables return the underlying api as a proxy object and a $script with the script state -const { $script, trackPageview, trackGoal } = useScriptFathomAnalytics({ +const { $script, trackPageview, trackEvent } = useScriptFathomAnalytics({ site: 'BRDEJWKJ', - // load after 3 seconds - trigger: new Promise((resolve) => { - setTimeout(() => { - resolve() - }, 2000) - }), }) // this will be triggered once the script is ready async trackPageview({ url: '/fathom' }) -// we can manually wait for the script to be ready (TODO error handling) -$script.then(() => { - // eslint-disable-next-line no-console - console.log('fathom is ready') -}) -// + const clicks = ref(0) -async function trackEvent() { +async function clickHandler() { clicks.value++ - trackGoal('button', clicks.value) + trackEvent('ClickedButton', { _value: clicks.value }) }