Injecting WAA via ref to account for load delay.

README.md

@@ -89,18 +89,12 @@ 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.
@@ -120,7 +114,7 @@ const sendEvent = async () => {
     session: 'cjhw92nf9aq',
     cohort: 'c1233'
   }  
-  waa.dispatchEvent('interest', params);  
+  waa.value.dispatchEvent('interest', params);  
 }
 </script>
 ```

index.js

@@ -1,9 +1,15 @@
 import { initWideAngle } from "./src";
+import { ref } from 'vue';
 
 export default {
-  install: (app, options) => {
+  install: async (app, options) => {
+    const waaRef = ref()
+    app.provide('waa', waaRef);         
     initWideAngle(options)
-      .then(waa => { app.provide('waa', waa); })
+      .then(waa => { 
+        waaRef.value = waa;
+        console.debug("[WAA] Wide Angle Analytics instance available");
+      })
       .catch(e => { console.error("Failed to load Wide Angle Plugin", e)});
   }
 }

sample/vue-sample/src/App.vue

@@ -28,5 +28,7 @@ nav {
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  width: 100%;
+  align-items: center;    
 }
 </style>

sample/vue-sample/src/assets/main.css

@@ -1,3 +1,13 @@
 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;
 }

sample/vue-sample/src/components/EmbeddedButton.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <button type="button" data-waa-click="foo" data-waa-name="embedded-event">Send Click Event</button>
+        <a data-waa-click="bar" data-waa-name="embedded-event" href="https://adequate.country" target="_blank">Send Click Link</a>
+        <p>Click me nothing happens; click green background; magic</p>
+    </div>
+</template>
+
+<style scoped>
+div {
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+    padding: 1rem;
+    background-color: yellowgreen;
+    align-items: center;
+}
+</style>
+

sample/vue-sample/src/views/SampleView.vue

@@ -1,13 +1,16 @@
 <template>
   <main>
-    <p>I am sample</p>
+    <p>Demostration of using Click and Custom Actions on Vue Components</p>
-    <button @click="sendEvent()">Send Event</button>
+    <button type="click" @click="sendEvent()">Send Event</button>    
     {{  status }}
+    <EmbeddedButton data-waa-click="component-click" data-waa-name="embedded-button"/>
   </main>
 </template>
 
 <script setup>
+import EmbeddedButton from '../components/EmbeddedButton.vue'
 import { inject, ref } from 'vue'
+
 const waa = inject('waa');
 const status = ref('idle');
 
@@ -17,8 +20,8 @@ const sendEvent = async () => {
     cohort: 'c1233'
   }
   console.log(`Sending event: ${JSON.stringify(params)}`);  
-  status.value = 'pending...'
+  status.value = 'pending...';  
-  await waa.dispatchEvent('interest', params);
+  await waa.value.dispatchEvent('interest', params);
   status.value = 'sent'
 }
 </script>
@@ -29,6 +32,6 @@ main {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  max-width: 300px;
+  max-width: 600px;
 }
 </style>