當咱們在Taptap上訪問某款遊戲時,好比https://www.taptap.com/app/34762,taptap會記錄下此次訪問,它是怎麼作的呢。javascript
首先,用記事本打開這個網址,在head部分看到下面這行引用,繼續打開這個jshtml
<script type="text/javascript" src="https://static.taptapdada.com/scripts/tracker.js" async></script> java
(function (window, document) { function createHttpRequest() { if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); } } function LogTracker(host, project, logstore) { this.uri_ = 'https://' + project + '.' + host + '/logstores/' + logstore + '/track?APIVersion=0.6.0'; this.params_ = []; this.httpRequest_ = createHttpRequest(); } LogTracker.prototype = { push: function (key, value) { if (!key || !value) { return; } this.params_.push(key); this.params_.push(value); }, logger: function () { var url = this.uri_; var k = 0; while (this.params_.length > 0) { if (k % 2 == 0) { url += '&' + encodeURIComponent(this.params_.shift()); } else { url += '=' + encodeURIComponent(this.params_.shift()); } ++k; } try { this.httpRequest_.open("GET", url, true); this.httpRequest_.send(null); } catch (ex) { if (window && window.console && typeof window.console.log === 'function') { console.log("Failed to log to log service because of this exception:\n" + ex); console.log("Failed log data:", url); } } } }; window.Tracker = LogTracker; })(window, document);
這裏定義了LogTracker這樣日誌跟蹤類,並提供了參數供調用方填寫,回到以前的html代碼,尋找這個類調用的地方web
<script> $(function () { var logger = new window.Tracker('cn-beijing.log.aliyuncs.com', 'tap-snow', 'logs'); logger.push('platform', 'web'); logger.push('device', navigator.userAgent); logger.push('type', 'pageView'); logger.push('paramUrl', 'https://www.taptap.com/app/34762'); logger.push('paramReferer', document.referrer); logger.logger(); }); </script>
這裏看到頁面訪問時,會訪問 https://tap-snow.cn-beijing.log.aliyuncs.com/logstores/logs/track?APIVersion=0.6.0&platform=web&device=...app