|
|
@@ -1,8 +1,84 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
这是一个空页面
|
|
|
- <button>
|
|
|
- 点击按钮
|
|
|
+ <button @click="generateAndAppendUtmParams">
|
|
|
+ 点击按钮，发送数据
|
|
|
</button>
|
|
|
</div>
|
|
|
-</template>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import UtmTracker from "utm-params-extractor-test";
|
|
|
+
|
|
|
+function generateAndAppendUtmParams() {
|
|
|
+ // 获取随机合法值的函数
|
|
|
+ function getRandomValue() {
|
|
|
+ return Math.random().toString(36).substring(2, 7);
|
|
|
+ }
|
|
|
+
|
|
|
+ // utm_source 合法取值范围
|
|
|
+ const utmSourceOptions = ['baidu', 'bd', 'google', 'safari', 'tx', 'qq', 'wx'];
|
|
|
+
|
|
|
+ // 随机选择一个 utm_source 值
|
|
|
+ const utmSource = utmSourceOptions[
|
|
|
+ Math.floor(Math.random() * utmSourceOptions.length)
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 生成其他UTM参数的随机值
|
|
|
+ const utmParams = {
|
|
|
+ utm_source: utmSource,
|
|
|
+ utm_medium: getRandomValue(),
|
|
|
+ utm_campaign: getRandomValue(),
|
|
|
+ utm_term: getRandomValue(),
|
|
|
+ utm_content: getRandomValue()
|
|
|
+ };
|
|
|
+
|
|
|
+ // 构造带UTM参数的URL
|
|
|
+ let urlWithParams = window.location.href.split('?')[0] + '?';
|
|
|
+ const paramsArray = [];
|
|
|
+
|
|
|
+ for (const key in utmParams) {
|
|
|
+ paramsArray.push(`${key}=${encodeURIComponent(utmParams[key])}`);
|
|
|
+ }
|
|
|
+
|
|
|
+ urlWithParams += paramsArray.join('&');
|
|
|
+
|
|
|
+ // 更新当前页面的URL
|
|
|
+ window.history.pushState({}, '', urlWithParams);
|
|
|
+
|
|
|
+ // 触发按钮点击事件
|
|
|
+ fetchData();
|
|
|
+}
|
|
|
+
|
|
|
+const fetchData = () => {
|
|
|
+ const utm = UtmTracker.get()
|
|
|
+ console.log(utm);
|
|
|
+ const requestData = {
|
|
|
+ utm_source: utm.utm_source || '',
|
|
|
+ utm_medium: utm.utm_medium || '',
|
|
|
+ utm_campaign: utm.utm_campaign || '',
|
|
|
+ utm_term: utm.utm_term || '',
|
|
|
+ utm_content: utm.utm_content || '',
|
|
|
+ referrer: utm.referrer || '',
|
|
|
+ isMobile: utm.browser.isMobile || '',
|
|
|
+ browser: utm.browser.browser || '',
|
|
|
+ userAgent: utm.browser.userAgent || '',
|
|
|
+ osType: utm.browser.osType || '',
|
|
|
+ osVersion: utm.browser.osVersion || '',
|
|
|
+ timestamp: utm.timestamp || '',
|
|
|
+ url: utm.url || ''
|
|
|
+ };
|
|
|
+ console.log(requestData);
|
|
|
+ fetch('http://192.168.3.9:3000/api/insert', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify(requestData)
|
|
|
+ })
|
|
|
+ .then(response => response.json())
|
|
|
+ .then(data => {
|
|
|
+ console.log(data);
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error("Error fetching data:", error);
|
|
|
+ });
|
|
|
+}
|
|
|
+</script>
|
