From 173b98c4f10b52f7cde9de474dbd590a5011e24e Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Sun, 21 Jul 2024 12:05:58 +0200
Subject: [PATCH 1/2] chore: playground for multi datalayers

---
 .../google-analytics/datalayers.vue           | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 playground/pages/third-parties/google-analytics/datalayers.vue

diff --git a/playground/pages/third-parties/google-analytics/datalayers.vue b/playground/pages/third-parties/google-analytics/datalayers.vue
new file mode 100644
index 00000000..3d1762e1
--- /dev/null
+++ b/playground/pages/third-parties/google-analytics/datalayers.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { useHead, useScriptGoogleAnalytics } from '#imports'
+
+useHead({
+  title: 'Google Analytics',
+})
+
+// composables return the underlying api as a proxy object and a $script with the script state
+const { gtag: gtag1, $script: $script1 } = useScriptGoogleAnalytics({
+  id: 'G-TR58L0EF8P',
+  dataLayerName: 'dataLayer1',
+})
+
+const { gtag: gtag2, $script: $script2 } = useScriptGoogleAnalytics({
+  id: 'G-123456',
+  dataLayerName: 'dataLayer2',
+})
+
+// id set via nuxt scripts module config
+gtag1('event', 'page_view', {
+  page_title: 'Google Analytics',
+  page_location: 'https://harlanzw.com/third-parties/google-analytics',
+  page_path: '/third-parties/google-analytics',
+})
+
+function triggerConversion() {
+  gtag2('event', 'conversion')
+}
+</script>
+
+<template>
+  <div>
+    <ClientOnly>
+      <div>
+        1 status: {{ $script1.status.value }}
+      </div>
+    </ClientOnly>
+    <ClientOnly>
+      <div>
+        2 status: {{ $script2.status.value }}
+      </div>
+    </ClientOnly>
+    <button @click="triggerConversion">
+      Trigger Conversion
+    </button>
+  </div>
+</template>

From 7b2135f7a98f2364a2d6af5dd2a61d223ec5ff9a Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Sun, 21 Jul 2024 15:23:04 +0200
Subject: [PATCH 2/2] chore: add key

---
 playground/pages/third-parties/google-analytics/datalayers.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/playground/pages/third-parties/google-analytics/datalayers.vue b/playground/pages/third-parties/google-analytics/datalayers.vue
index 3d1762e1..37bae52e 100644
--- a/playground/pages/third-parties/google-analytics/datalayers.vue
+++ b/playground/pages/third-parties/google-analytics/datalayers.vue
@@ -12,6 +12,7 @@ const { gtag: gtag1, $script: $script1 } = useScriptGoogleAnalytics({
 })
 
 const { gtag: gtag2, $script: $script2 } = useScriptGoogleAnalytics({
+  key: 'test',
   id: 'G-123456',
   dataLayerName: 'dataLayer2',
 })