feat: first party third-party-capital scripts (#23)

package.json

@@ -56,6 +56,7 @@
     "@nuxt/devtools-kit": "^1.1.5",
     "@nuxt/devtools-ui-kit": "^1.1.5",
     "@nuxt/kit": "^3.11.2",
+    "@types/google.maps": "^3.55.7",
     "@unhead/vue": "^1.9.7",
     "consola": "^3.2.3",
     "defu": "^6.1.4",
@@ -71,6 +72,7 @@
     "shiki": "^1.3.0",
     "sirv": "^2.0.4",
     "std-env": "^3.7.0",
+    "third-party-capital": "^1.0.28",
     "ufo": "^1.5.3",
     "unimport": "^3.7.1",
     "unplugin": "^1.10.1",

playground/pages/index.vue

@@ -10,6 +10,14 @@ const thirdParties = [
     name: 'Cloudflare Web Analytics',
     path: '/third-parties/cloudflare-web-analytics',
   },
+  {
+    name: 'Google Analytics',
+    path: '/third-parties/google-analytics',
+  },
+  {
+    name: 'Google Tag Manager',
+    path: '/third-parties/google-tag-manager',
+  },
   {
     name: 'Facebook Pixel',
     path: '/third-parties/facebook-pixel',
@@ -53,6 +61,14 @@ const thirdPartyComponents = [
     name: 'Vimeo',
     path: '/third-parties/vimeo-component',
   },
+  {
+    name: 'YouTube',
+    path: '/third-parties/youtube',
+  },
+  {
+    name: 'Google Maps',
+    path: '/third-parties/google-maps',
+  },
 ]
 
 const features = [

playground/pages/third-parties/google-analytics.vue

@@ -1,12 +1,18 @@
 <script lang="ts" setup>
-import { useHead, useScriptGoogleAnalytics } from '#imports'
+import { useScriptGoogleAnalytics } from '../../../src/runtime/registry/google-analytics'
+import { useHead } from '#imports'
 
 useHead({
   title: 'Google Analytics',
 })
 
 // composables return the underlying api as a proxy object and a $script with the script state
-const { $script } = useScriptGoogleAnalytics({ id: 'KBXOGxgqMFjm2mxtJDJg0iDn5AnGYb9C' })
+const { gtag } = useScriptGoogleAnalytics({ id: 'GA-123456789-1' })
+gtag('event', 'page_view', {
+  page_title: 'Google Analytics',
+  page_location: 'https://harlanzw.com/third-parties/google-analytics',
+  page_path: '/third-parties/google-analytics',
+})
 </script>
 
 <template>

playground/pages/third-parties/google-maps.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { ref } from 'vue'
+
+const query = ref('Space+Needle,Seattle+WA')
+
+function changeQuery() {
+  query.value = 'Brooklyn+Bride,New+York+NY'
+}
+</script>
+
+<template>
+  <div>
+    <div>
+      <GoogleMaps
+        api-key="API_KEY"
+        width="600"
+        height="400"
+        :q="query"
+      />
+    </div>
+    <div class="button-container">
+      <button
+        class="button"
+        @click="changeQuery"
+      >
+        change query
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+.button-container {
+  margin: 20px 0;
+}
+
+.button {
+  background-color: orange;
+  border-radius: 8px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.button:not(:last-child) {
+  margin-right: 8px;
+}
+</style>

playground/pages/third-parties/google-tag-manager.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { useScriptGoogleTagManager } from '../../../src/runtime/registry/google-tag-manager'
+import { useHead } from '#imports'
+
+useHead({
+  title: 'Google Analytics',
+})
+
+// composables return the underlying api as a proxy object and a $script with the script state
+const { datalayer, $script } = useScriptGoogleTagManager({ id: 'GTM-MNJD4B' })
+datalayer.push({
+  event: 'page_view',
+  page_title: 'Google Analytics',
+  page_location: 'https://harlanzw.com/third-parties/google-analytics',
+  page_path: '/third-parties/google-analytics',
+})
+$script.then(({ google_tag_manager, dataLayer }) => {
+  // eslint-disable-next-line no-console
+  console.log('google_tag_manager is ready', google_tag_manager)
+  // eslint-disable-next-line no-console
+  console.log('google_tag_manager is ready', window.google_tag_manager)
+
+  // eslint-disable-next-line no-console
+  console.log('dataLayer', dataLayer)
+  // eslint-disable-next-line no-console
+  console.log(google_tag_manager['GTM-MNJD4B'].dataLayer.reset)
+  // eslint-disable-next-line no-console
+  console.log(google_tag_manager.dataLayer.gtmDom)
+
+  dataLayer.push({
+    event: 'pageview',
+    page_path: '/google-tag-manager',
+  })
+})
+</script>
+
+<template>
+  <div>
+    <ClientOnly>
+      <div>
+        status: {{ $script.status.value }}
+      </div>
+    </ClientOnly>
+  </div>
+</template>

playground/pages/third-parties/matomo-analytics.vue

@@ -12,8 +12,6 @@ const { $script, _paq } = useScriptMatomoAnalytics({
   siteId: 'KBXOGxgqMFjm2mxtJDJg0iDn5AnGYb9C',
 })
 
-console.log({ _paq })
-
 _paq.push(['trackPageView'])
 </script>
 

playground/pages/third-parties/vimeo-component.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { useHead } from '#imports'
-import { VimeoEmbed } from '#components'
 
 useHead({
   title: 'Vimeo component',

playground/pages/third-parties/youtube.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { ref } from 'vue'
+
+const label = ref('Play!')
+const videoid = ref('d_IFKP1Ofq0')
+
+function changeVideo() {
+  videoid.value = 'N8siuNjyV7A'
+}
+
+function changeLabel() {
+  label.value = 'Spiele!'
+}
+</script>
+
+<template>
+  <div>
+    <div>
+      <YoutubeEmbed
+        :video-id="videoid"
+        :play-label="label"
+      />
+    </div>
+    <div class="button-container">
+      <button
+        class="button"
+        @click="changeVideo"
+      >
+        change video
+      </button>
+      <button
+        class="button"
+        @click="changeLabel"
+      >
+        change label
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+.button-container {
+  margin: 20px 0;
+}
+
+.button {
+  background-color: orange;
+  border-radius: 8px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.button:not(:last-child) {
+  margin-right: 8px;
+}
+</style>

src/module.ts

@@ -215,19 +215,16 @@ export default defineNuxtModule<ModuleOptions>({
           name: 'useScriptGoogleAnalytics',
           key: 'googleAnalytics',
           from: resolve('./runtime/registry/google-analytics'),
-          module: '@nuxt/third-party-capital',
         },
         {
           name: 'useScriptGoogleTagManager',
           key: 'googleTagManager',
           from: resolve('./runtime/registry/google-tag-manager'),
-          module: '@nuxt/third-party-capital',
         },
         {
           name: 'useScriptGoogleMaps',
           key: 'googleMaps',
           from: resolve('./runtime/registry/google-tag-manager'),
-          module: '@nuxt/third-party-capital',
         },
       ]
       registry = registry.map((i) => {