Cách nhận số lần xem trang thực của một trang web tĩnh

Với một trang web tĩnh, làm cách nào để bạn có được số lượng khách truy cập thực sự?

Cập nhật: chỉ sử dụng Netlify Analytics nếu bạn nghiêm túc về điều này.

Đây là một trang web tĩnh. Tôi sử dụng Google Analytics và đối tượng của tôi là các nhà phát triển.

Một sự kết hợp hoàn hảo cho dữ liệu phân tích không chính xác, vì nhiều nhà phát triển sử dụng trình chặn quảng cáo, có thể (hoặc có thể không, tùy thuộc) chặn dữ liệu Google Analytics được truyền đến máy chủ. Một số nhà phát triển thậm chí còn chặn hoàn toàn JavaScript, nhưng tôi cho rằng đây là một nhóm ít người hơn, và vì vậy, một điều ít vấn đề hơn.

Tôi luôn nghi ngờ điều này: số lượng khách truy cập thực là bao nhiêu? Tôi đang xem phần trăm khách truy cập là bao nhiêu?

Nhà cung cấp dịch vụ lưu trữ của tôi không cung cấp bất kỳ thông tin nào về lượt truy cập. Tôi chỉ biết băng thông mà tôi tiêu thụ.

Vì vậy, tôi quyết định thử nghiệm một ý tưởng.

Tôi bao gồm một hình ảnh trong mỗi bài đăng, một hình ảnh rất nhỏ.

Không có gì mới: phần mềm tiếp thị qua email tự động sử dụng “thủ thuật” này để tính tỷ lệ mở.

Tôi đã sử dụng hình ảnh SVG 1px x 1px, 141 byte dữ liệu để có tác động tối thiểu.

Tôi đã tạo một máy chủ web Node.js trên Glitch:https://glitch.com/~static-site-visitors-counter. Nếu bạn đưa hình ảnh vào trang web, như sau:

<img src="https://<name-of-the-project>.glitch.me/pixel.svg" />

máy chủ web Node.js sống trên đó<name-of-the-project>.glitch.meURL sẽ gửi lại hình ảnh.

Nhưng trước tiên, nó tăng một giá trị:

const express = require('express')
const app = express()
let counter = 0

app.use( express.static(‘public’, { setHeaders: (res, path, stat) => { console.log(++counter) }, }) )

const listener = app.listen(process.env.PORT, () => { console.log('Your app is listening on port ’ + listener.address().port) })

Phần quan trọng của ứng dụng này là đối tượng mà chúng tôi chuyển đếnexpress.static(). Thông thường, chúng tôi không chuyển một đối tượng bổ sung vào phương thức này, nhưng trong đósetHeaders()được cung cấp để chúng tôi có thể đặt một số tiêu đề bổ sung cho tệp sẽ được phân phát.

Chúng tôi thêm của chúng tôiconsole.log()ở đó, sử dụng sai chức năng này cho mục đích của chúng tôi.

Nó rất đơn giản và do cách hoạt động của Glitch, bộ đếm sẽ đặt lại mỗi khi bạn cập nhật ứng dụng.

Tất nhiên, đây không phải là công cụ phân tích của bạn. Chỉ là một cách để nhanh chóng kiểm tra xem dữ liệu phân tích có khớp với thực tế hay không. Hầu như không ai chặn hình ảnh, bình thường.

Và điều này có thể được thực hiện theo cách khác, vì tôi sử dụng SVG, tôi cũng có thể chỉ gửi một chuỗi trở lại máy khách, vớiContent-Typeđầu trang. Tôi không biết liệu điều đó có nhanh hơn hay không, tôi chưa thử.

Bạn cũng có thể phân phát tệp CSS theo cách tương tự. Tôi chỉ tình cờ chọn một hình ảnh.

Tôi để điều này chạy trong 3-4 giờ và dữ liệu, so với nhật ký Google Analytics, cho tôi thấy rằng khoảng 10% số người truy cập trang web của tôi không gửi dữ liệu đến Google Analytics.

Không nhiều. Tôi mong đợi nhiều hơn thế nữa, như gấp đôi lượng khách. Hoặc hơn 50%. Nhưng chỉ tăng 10%.

Điều nào thực sự tốt nhất đối với tôi, vì điều này có nghĩa là dữ liệu Google Analytics vẫn rất hữu ích.

Đây là mã ứng dụng đầy đủ:https://glitch.com/edit/#!/static-site-visitors-counter


Các hướng dẫn phòng thí nghiệm khác: