|
@@ -8,7 +8,7 @@
|
|
npm install utm-params-extractor-test
|
|
npm install utm-params-extractor-test
|
|
```
|
|
```
|
|
|
|
|
|
-##### 2. 在项目中使用
|
|
|
|
|
|
+##### 2. 在 React 项目中使用
|
|
|
|
|
|
```javascript
|
|
```javascript
|
|
// ES6 模块
|
|
// ES6 模块
|
|
@@ -16,13 +16,13 @@ import UtmTracker from 'utm-params-extractor-test';
|
|
|
|
|
|
// 方法1:使用静态方法直接获取
|
|
// 方法1:使用静态方法直接获取
|
|
const utmParams = UtmTracker.get();
|
|
const utmParams = UtmTracker.get();
|
|
-console.log('UTM参数:', utmParams);
|
|
|
|
|
|
+console.log('UTM参数:', utmParams); // 控制台输出所有 UTM 及浏览器参数
|
|
|
|
|
|
// 方法2:实例化后获取(适合扩展)
|
|
// 方法2:实例化后获取(适合扩展)
|
|
const tracker = new UtmTracker();
|
|
const tracker = new UtmTracker();
|
|
const params = tracker.getParams();
|
|
const params = tracker.getParams();
|
|
|
|
|
|
-// 自行处理数据(例如发送到后端)
|
|
|
|
|
|
+// 你可以将参数发送到后端进行统计分析
|
|
fetch('https://your-api.com/track', {
|
|
fetch('https://your-api.com/track', {
|
|
method: 'POST',
|
|
method: 'POST',
|
|
headers: {
|
|
headers: {
|
|
@@ -35,7 +35,34 @@ fetch('https://your-api.com/track', {
|
|
.catch(error => console.error('发送失败:', error));
|
|
.catch(error => console.error('发送失败:', error));
|
|
```
|
|
```
|
|
|
|
|
|
-##### 3. 在 HTML 中直接使用
|
|
|
|
|
|
+##### 3. 在 Vue 项目中使用
|
|
|
|
+
|
|
|
|
+```vue
|
|
|
|
+<template>
|
|
|
|
+ <div>
|
|
|
|
+ <pre>{{ utmJson }}</pre>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import UtmTracker from 'utm-params-extractor-test';
|
|
|
|
+export default {
|
|
|
|
+ data() {
|
|
|
|
+ return { utm: null };
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ utmJson() {
|
|
|
|
+ return this.utm ? JSON.stringify(this.utm, null, 2) : '正在获取...';
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.utm = UtmTracker.get();
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+##### 4. 在 HTML 中直接使用
|
|
|
|
|
|
```html
|
|
```html
|
|
<script src="dist/main.js"></script>
|
|
<script src="dist/main.js"></script>
|