Video học lập trình mỗi ngày

Việc theo dõi người dùng thì Google Analytics nó là vua rồi. Nhưng chúng ta cũng phải add một url của nó vào sites chúng ta. Mà đã add thì ắt có chặn. Vậy thử hỏi, một trình duyệt mà off hêt javascript thì lấy gì mà tracking đây? Sử dụng css thử xem?

Theo dõi hoạt động người dùng thế nào?

Thông thường, các công cụ phân tích trình theo dõi như vậy sử dụng JavaScript. Do đó, hầu hết thông tin có thể dễ dàng đọc và gửi đến máy chủ ngay lập tức mỗi người người dùng có bất cứ hành vi nào, thậm chí là đứng yên ở vị trí nào có thể là một hình ảnh của cô gái xinh đẹp. Đây là lý do tại sao ngày càng có nhiều cách để chặn trình theo dõi trong trình duyệt, ví dụ như thằng safari nó chặn cookie bên thứ 3. Rảnh đọc thêm. Hoặc các tiện ích mở rộng chrome nhất định sẽ ngăn trình theo dõi này, chẳng hạn như Google Analytics. Một trong những thủ thuật là, ví dụ: Google Analytics luôn được tích hợp bên ngoài, một đoạn mã JavaScript từ Google CDN. URL nhúng luôn giống nhau, vì vậy nó có thể dễ dàng bị chặn. 

Vậy thôi. Cuối cùng, chúng ta vẫn có thể không sử dụng JavaScript để theo dõi một số nội dung, nhưng sử dụng một số kỹ thuật CSS. Quan trọng những bạn nào đọc hết rồi comment nhé. Tất nhiên ở đây chỉ là một số mẹo cụ thể thôi, và chỉ thu thập được một số thông tin dạng như: 

• Tìm thông tin loại thiết bị 
• Tìm thông tin hệ điều hành 
• Thông tin phần tử theo dõi

... Chứ không phải đòi hỏi như javascript đâu nhé. Nhưng có như vậy cũng tốt lắm rồi. Nhưng cá nhân tôi lại nghĩ "Mặc dù nó cảm thấy khá thú vị. . Nhưng tôi không thể nghĩ ra bất kỳ cảnh nào phải được sử dụng theo cách này" hhahhaa 

Demo Code

Ở đây nói nhanh thôi nhé, vì nó qúa dễ rồi, không cần phải giải thích nhiều, tôi sử dụng expressjs và node.js để demo. Một ví dụ điển hình là thuộc tính background-image, cho phép chúng ta đặt hình nền cho một phần tử. Ảnh này được lấy từ một URL và trong quá trình thực thi, nó được yêu cầu trước, ví dụ: background-image: url('/dog.png');

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});

app.get("/mobile", (req, res) => {
  console.log("is mobile")
  res.end()
)}
        
app.listen(8080)

Còn trên html thì tôi sẽ khai báo css như thế này là tôi biết á thằng này, mày xài mobile hả mày?

@media only screen and (max-width: 768px) {
  body {
    background-image: url("http://localhost:8080/mobile");
  }
}

Giờ các bạn hiểu chưa? :D
Có thể tham khảo đây nếu muốn biết nhiều hơn nè: Chỉ theo dõi người dùng bằng CSS