|
@@ -0,0 +1,80 @@
|
|
|
|
+#### 使用示例
|
|
|
|
+
|
|
|
|
+##### 以下是如何在项目中使用这个 npm 包的示例:
|
|
|
|
+
|
|
|
|
+1. 安装包
|
|
|
|
+
|
|
|
|
+``` bash
|
|
|
|
+npm install utm-params-extractor
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+2. 在项目中使用
|
|
|
|
+
|
|
|
|
+```javascript
|
|
|
|
+// ES6 模块
|
|
|
|
+
|
|
|
|
+import UtmTracker from 'utm-params-extractor';
|
|
|
|
+
|
|
|
|
+// 方法1:使用静态方法直接获取
|
|
|
|
+
|
|
|
|
+const utmParams = UtmTracker.get();
|
|
|
|
+
|
|
|
|
+console.log('UTM参数:', utmParams);
|
|
|
|
+
|
|
|
|
+// 方法2:实例化后获取(适合扩展)
|
|
|
|
+
|
|
|
|
+const tracker = new UtmTracker();
|
|
|
|
+
|
|
|
|
+const params = tracker.getParams();
|
|
|
|
+
|
|
|
|
+// 自行处理数据(例如发送到后端)
|
|
|
|
+
|
|
|
|
+fetch('https://your-api.com/track', {
|
|
|
|
+
|
|
|
|
+ method: 'POST',
|
|
|
|
+
|
|
|
|
+ headers: {
|
|
|
|
+
|
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ body: JSON.stringify(params)
|
|
|
|
+
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+.then(response => response.json())
|
|
|
|
+
|
|
|
|
+.then(data => console.log('发送成功:', data))
|
|
|
|
+
|
|
|
|
+.catch(error => console.error('发送失败:', error));
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+3. 在 HTML 中直接使用
|
|
|
|
+
|
|
|
|
+```html
|
|
|
|
+<script src="path/to/utm-params-extractor.min.js"></script>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+
|
|
|
|
+ // 获取UTM参数
|
|
|
|
+
|
|
|
|
+ var utmParams = UtmTracker.get();
|
|
|
|
+
|
|
|
|
+ console.log('UTM参数:', utmParams);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ // 可以自行发送到后端
|
|
|
|
+
|
|
|
|
+ var xhr = new XMLHttpRequest();
|
|
|
|
+
|
|
|
|
+ xhr.open('POST', 'https://your-api.com/track', true);
|
|
|
|
+
|
|
|
|
+ xhr.setRequestHeader('Content-Type', 'application/json');
|
|
|
|
+
|
|
|
|
+ xhr.send(JSON.stringify(utmParams));
|
|
|
|
+
|
|
|
|
+</script>
|
|
|
|
+```
|
|
|
|
+
|