chore: clean up

Author: harlan-zw

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

client/app.vue

@@ -47,7 +47,7 @@ onDevtoolsClientConnected(async (client) => {
                   <div>{{ script.key }}</div>
                 </a>
                 <div class="opacity-70">
-                  {{ script.$script.status }}
+                  {{ script.$script.status.value }}
                 </div>
                 <div v-if="scriptSizes[script.key]">
                   {{ scriptSizes[script.key] }}

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",

playground/app.vue

@@ -1,26 +1,3 @@
-<script lang="ts" setup>
-import { ref, useAnalyticsPageEvent, useScript } from '#imports'
-import { scriptConsent } from '~/composables/consent'
-
-interface GenericTrackingScript {
-  track: (title: string, path: string) => void
-}
-
-const { track } = useScript<GenericTrackingScript>('https://example.com/script.js?nuxt-scripts=inline', {
-  trigger: scriptConsent,
-})
-useAnalyticsPageEvent((payload) => {
-  track(payload)
-})
-
-const showCookieBanner = ref(true)
-
-function acceptCookies() {
-  scriptConsent.accept()
-  showCookieBanner.value = false
-}
-</script>
-
 <template>
   <div class="flex flex-col min-h-screen">
     <header class="sticky top-0 z-50 w-full backdrop-blur flex-none border-b border-gray-900/10 dark:border-gray-50/[0.06] bg-white/75 dark:bg-gray-900/75">
@@ -47,18 +24,5 @@ function acceptCookies() {
         </div>
       </UContainer>
     </main>
-    <div v-if="showCookieBanner" id="cookie-consent" class="p-5 bg-blue-900">
-      <div class="font-bold mb-2">
-        Do you accept cookies?
-      </div>
-      <div class="flex items-center gap-4">
-        <UButton @click="acceptCookies">
-          Yes
-        </UButton>
-        <UButton @click="showCookieBanner = false">
-          No
-        </UButton>
-      </div>
-    </div>
   </div>
 </template>

playground/composables/consent.ts

@@ -6,13 +6,6 @@ export default defineNuxtConfig({
   ],
   devtools: { enabled: true },
   scripts: {
-    globals: [
-      'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js',
-    ],
-    overrides: {
-      'cloudflare-turnstile': {
-        assetStrategy: 'bundle',
-      },
-    },
+    // TODO globals / register / overrides
   },
 })

playground/nuxt.config.ts

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { createScriptConsentTrigger, useScript } from '#imports'
+
+const showCookieBanner = ref(true)
+const scriptConsent = createScriptConsentTrigger()
+function acceptCookies() {
+  scriptConsent.accept()
+  showCookieBanner.value = false
+}
+useScript('https://www.googletagmanager.com/gtag/js?id=GTM-5ZQZJZ', {
+  trigger: scriptConsent,
+  assetStrategy: 'bundle',
+})
+</script>
+
+<template>
+  <div v-if="showCookieBanner" id="cookie-consent" class="p-5 bg-blue-900">
+    <div class="font-bold mb-2">
+      Do you accept cookies?
+    </div>
+    <div class="flex items-center gap-4">
+      <UButton @click="acceptCookies">
+        Yes
+      </UButton>
+      <UButton @click="showCookieBanner = false">
+        No
+      </UButton>
+    </div>
+  </div>
+</template>

playground/pages/features/cookie-consent.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',
+  },
+]
 </script>
 
 <template>
@@ -54,6 +65,24 @@ const thirdParties = [
           </div>
         </div>
       </div>
+      <div>
+        <h2 class="font-bold mb-5 text-xl flex items-center">
+          <Icon
+            name="carbon:intent-request-create"
+            class="opacity-70 mr-2"
+          />Features
+        </h2>
+        <div class="grid grid-cols-3 gap-5">
+          <div v-for="(s, key) in features" :key>
+            <ULink
+              :to="s.path"
+              class="underline"
+            >
+              {{ s.name }}
+            </ULink>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>

playground/pages/ready.vue renamed to playground/pages/features/on-nuxt-ready.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<void>((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 })
 }
 </script>
 
 <template>
   <div>
-    <UButton @click="trackEvent">
+    <UButton @click="clickHandler">
       important conversion {{ clicks }}
     </UButton>
     <ClientOnly>
       <div>
-        status: {{ $script.status }}
+        status: {{ $script.status.value }}
       </div>
     </ClientOnly>
   </div>

playground/pages/index.vue

@@ -13,7 +13,7 @@ const { $script } = useScriptSegment({ writeKey: 'KBXOGxgqMFjm2mxtJDJg0iDn5AnGYb
   <div>
     <ClientOnly>
       <div>
-        status: {{ $script.status }}
+        status: {{ $script.status.value }}
       </div>
     </ClientOnly>
   </div>