Quellcode durchsuchen

fix: 修改md
描述添加ts适配

jcq vor 1 Monat
Ursprung
Commit
2ca3908843
5 geänderte Dateien mit 187 neuen und 54 gelöschten Zeilen
  1. 100 42
      README.md
  2. 33 0
      index.d.ts
  3. 4 3
      package.json
  4. 49 8
      src/index.js
  5. 1 1
      webpack.config.js

+ 100 - 42
README.md

@@ -1,80 +1,138 @@
-#### 使用示例
+### utm-params-extractor-test
 
-##### 以下是如何在项目中使用这个 npm 包的示例
+#### 使用示例
 
-1. 安装包
+##### 1. 安装包
 
-``` bash
-npm install utm-params-extractor
+```bash
+npm install utm-params-extractor-test
 ```
 
-2. 在项目中使用
+##### 2. 在项目中使用
 
 ```javascript
 // ES6 模块
-
-import UtmTracker from 'utm-params-extractor';
+import UtmTracker from 'utm-params-extractor-test';
 
 // 方法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'
-
+    'Content-Type': 'application/json'
   },
-
   body: JSON.stringify(params)
-
 })
-
 .then(response => response.json())
-
 .then(data => console.log('发送成功:', data))
-
 .catch(error => console.error('发送失败:', error));
 ```
 
-3. 在 HTML 中直接使用
+##### 3. 在 HTML 中直接使用
 
 ```html
-<script src="path/to/utm-params-extractor.min.js"></script>
-
+<script src="dist/main.js"></script>
 <script>
-
-  // 获取UTM参数
-
+  // 你的库会挂载在 window.UtmTracker
+  var UtmTracker = window.UtmTracker;
   var utmParams = UtmTracker.get();
-
   console.log('UTM参数:', utmParams);
+</script>
+```
 
-  
-
-  // 可以自行发送到后端
-
-  var xhr = new XMLHttpRequest();
-
-  xhr.open('POST', 'https://your-api.com/track', true);
-
-  xhr.setRequestHeader('Content-Type', 'application/json');
+> **注意:**
+> - HTML 直接引用时,npm 包名(如 utm-params-extractor-test)与全局变量名无关。
+> - 全局变量名由 webpack.config.js 的 `library.name` 决定,默认是 `UtmTracker`。
+> - 如需自定义全局变量名,请在 webpack.config.js 中修改:
+>   ```js
+>   output: {
+>     // ...
+>     library: {
+>       name: 'UtmTracker', // 你想要的全局变量名
+>       type: 'umd',
+>     },
+>     globalObject: 'this',
+>   }
+>   ```
+>   这样 HTML 里就可以直接用 `window.UtmTracker.get()`。
+
+---
+
+### 返回参数说明
+
+`UtmTracker.get()` 或 `tracker.getParams()` 返回对象结构如下:
+
+| 字段         | 类型    | 说明                                                                 |
+| ------------ | ------- | -------------------------------------------------------------------- |
+| utm_source   | string  | UTM 来源渠道参数(如广告平台、搜索引擎等)                           |
+| utm_medium   | string  | UTM 媒介参数(如 cpc、email、banner 等)                              |
+| utm_campaign | string  | UTM 活动名称参数                                                     |
+| utm_term     | string  | UTM 关键词参数                                                       |
+| utm_content  | string  | UTM 内容参数(用于区分广告内容)                                     |
+| referrer     | string  | 上一个页面的 URL                                                     |
+| browser      | object  | 浏览器和设备信息对象(见下表)                                       |
+| timestamp    | string  | 获取参数的时间戳(ISO 格式)                                         |
+| url          | string  | 当前页面完整 URL                                                     |
+
+#### browser 字段结构
+
+| 字段       | 类型    | 说明                                                         |
+| ---------- | ------- | ------------------------------------------------------------ |
+| isMobile   | boolean | 是否为移动端设备                                              |
+| browser    | string  | 浏览器类型(如 Chrome、Safari、Edge、WeChat、HuaweiBrowser 等)|
+| userAgent  | string  | 浏览器的 User-Agent 字符串                                    |
+| osType     | string  | 操作系统类型(iOS、Android、HarmonyOS、Unknown)              |
+| osVersion  | string  | 操作系统版本号(如 16.6、13.0、3.0.0、Unknown)              |
+
+##### browser.browser 可能的值
+- Chrome
+- Safari
+- Edge
+- Firefox
+- IE
+- WeChat
+- QQBrowser
+- UCBrowser
+- HuaweiBrowser
+- Telegram
+- 其他
+
+##### browser.osType 可能的值
+- iOS
+- Android
+- HarmonyOS
+- Unknown
+
+##### 示例返回
+
+```json
+{
+  "utm_source": "google",
+  "utm_medium": "cpc",
+  "utm_campaign": "summer_sale",
+  "utm_term": "shoes",
+  "utm_content": "ad1",
+  "referrer": "https://www.example.com/",
+  "browser": {
+    "isMobile": true,
+    "browser": "Chrome",
+    "userAgent": "Mozilla/5.0 (Linux; Android 13; ...)",
+    "osType": "Android",
+    "osVersion": "13"
+  },
+  "timestamp": "2024-07-01T12:00:00.000Z",
+  "url": "https://your-site.com/?utm_source=google&utm_medium=cpc"
+}
+```
 
-  xhr.send(JSON.stringify(utmParams));
+---
 
-</script>
-```
+如需更多帮助或定制返回内容,请联系作者。
 

+ 33 - 0
index.d.ts

@@ -0,0 +1,33 @@
+export interface BrowserInfo {
+    isMobile: boolean;
+    browser: string;
+    userAgent: string;
+    osType: 'iOS' | 'Android' | 'HarmonyOS' | 'Unknown';
+    osVersion: string;
+}
+
+export interface UtmParams {
+    utm_source: string;
+    utm_medium: string;
+    utm_campaign: string;
+    utm_term: string;
+    utm_content: string;
+    referrer: string;
+    browser: BrowserInfo;
+    timestamp: string;
+    url: string;
+}
+
+declare class UtmTracker {
+    constructor();
+    getParams(): UtmParams;
+    static get(): UtmParams;
+}
+
+export default UtmTracker;
+
+declare global {
+    interface Window {
+        UtmTracker: typeof UtmTracker;
+    }
+} 

+ 4 - 3
package.json

@@ -1,6 +1,6 @@
 {
   "name": "utm-params-extractor-test",
-  "version": "1.0.0",
+  "version": "1.0.7",
   "description": "Extract UTM parameters from URL and browser information",
   "main": "dist/main.js",
   "scripts": {
@@ -27,6 +27,7 @@
   "author": "Jiachen",
   "license": "MIT",
   "dependencies": {
-    "utm-params-extractor": "^1.0.0"
-  }
+    "utm-params-extractor-test": "^1.0.0"
+  },
+  "types": "index.d.ts"
 }

+ 49 - 8
src/index.js

@@ -24,25 +24,66 @@
     // 获取浏览器信息
     function getBrowserInfo() {
         var ua = navigator.userAgent;
-        var isMobile = /Mobile|Android|iPhone|iPad|iPod/i.test(ua);
         var browser = 'Unknown';
-        
-        if (/Chrome/i.test(ua)) {
+        var isMobile = /Mobile|Android|iPhone|iPad|iPod|HarmonyOS|HMS/i.test(ua);
+        var osType = 'Unknown';
+        var osVersion = 'Unknown';
+
+        // 系统类型和版本号判断
+        if (/iPhone|iPad|iPod/i.test(ua)) {
+            osType = 'iOS';
+            var iosVersionMatch = ua.match(/OS (\d+)[_.](\d+)?([_.](\d+))?/i);
+            if (iosVersionMatch) {
+                osVersion = iosVersionMatch[1];
+                if (iosVersionMatch[2]) osVersion += '.' + iosVersionMatch[2];
+                if (iosVersionMatch[4]) osVersion += '.' + iosVersionMatch[4];
+            }
+        } else if (/Android/i.test(ua)) {
+            osType = 'Android';
+            var androidVersionMatch = ua.match(/Android ([\d.]+)/i);
+            if (androidVersionMatch) {
+                osVersion = androidVersionMatch[1];
+            }
+        } else if (/HarmonyOS|HMS/i.test(ua)) {
+            osType = 'HarmonyOS';
+            var harmonyVersionMatch = ua.match(/HarmonyOS[\s/]?([\d.]+)/i) || ua.match(/HMSCore[\s/]?([\d.]+)/i);
+            if (harmonyVersionMatch) {
+                osVersion = harmonyVersionMatch[1];
+            }
+        }
+
+        // 浏览器类型判断
+        if (/Edg/i.test(ua)) {
+            browser = 'Edge';
+        } else if (/HuaweiBrowser/i.test(ua) || /HMS/i.test(ua)) {
+            browser = 'HuaweiBrowser';
+        } else if (/Chrome/i.test(ua)) {
             browser = 'Chrome';
         } else if (/Firefox/i.test(ua)) {
             browser = 'Firefox';
-        } else if (/Safari/i.test(ua)) {
+        } else if (/Safari/i.test(ua) && !/Chrome/i.test(ua) && !/Edg/i.test(ua)) {
             browser = 'Safari';
         } else if (/MSIE|Trident/i.test(ua)) {
             browser = 'IE';
-        } else if (/Edge/i.test(ua)) {
-            browser = 'Edge';
         }
-        
+
+        // 特殊浏览器环境检测
+        if (/MicroMessenger/i.test(ua)) {
+            browser = 'WeChat';
+        } else if (/QQBrowser/i.test(ua)) {
+            browser = 'QQBrowser';
+        } else if (/UCBrowser/i.test(ua)) {
+            browser = 'UCBrowser';
+        } else if (/Telegram/i.test(ua)) {
+            browser = 'Telegram';
+        }
+
         return {
             isMobile: isMobile,
             browser: browser,
-            userAgent: ua
+            userAgent: ua,
+            osType: osType,
+            osVersion: osVersion
         };
     }
     

+ 1 - 1
webpack.config.js

@@ -8,7 +8,7 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
     filename: 'main.js',
     library: {
-      name: 'yourLibrary',
+      name: 'UtmTracker',
       type: 'umd',
     },
     globalObject: 'this',