|
@@ -1,19 +1,37 @@
|
|
|
+
|
|
|
+
|
|
|
<script setup>
|
|
|
import { ref, computed, onMounted } from 'vue'
|
|
|
-import UtmTracker from 'utm-params-extractor-test'
|
|
|
+// import UtmTracker from 'utm-params-extractor-test'
|
|
|
+import '../../src/index'
|
|
|
|
|
|
const utm = ref(null)
|
|
|
-const utmJson = computed(() => utm.value ? JSON.stringify(utm.value, null, 2) : '正在获取...')
|
|
|
+let tracker = null
|
|
|
|
|
|
onMounted(() => {
|
|
|
- utm.value = UtmTracker.get()
|
|
|
+ tracker = new UtmTracker({
|
|
|
+ reportUrl: 'http://127.0.0.1:4523/m1/6687089-6396408-default/report',
|
|
|
+ autoSend: false
|
|
|
+ });
|
|
|
+ utm.value = tracker.getParams()
|
|
|
})
|
|
|
+
|
|
|
+const utmJson = computed(() => utm.value ? JSON.stringify(utm.value, null, 2) : '正在获取...')
|
|
|
+
|
|
|
+const sendUtm = () => {
|
|
|
+ if (tracker) {
|
|
|
+ tracker.send()
|
|
|
+ } else {
|
|
|
+ console.warn('UtmTracker 尚未初始化')
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div style="padding: 24px;">
|
|
|
<h1>UTM Params Extractor Demo (Vue3)</h1>
|
|
|
<p>本页面演示如何在 Vue3 项目中使用 <code>utm-params-extractor-test</code> 包。</p>
|
|
|
+ <button @click="sendUtm">发送</button>
|
|
|
<h2>获取到的参数:</h2>
|
|
|
<pre style="background: #f6f8fa; padding: 16px; border-radius: 8px;">
|
|
|
{{ utmJson }}
|