Hướng Dẫn Chi Tiết Triển Khai Theo Dõi Page View Trong Ứng Dụng React

Hiểu rõ mức độ tương tác của người dùng là một yếu tố quan trọng cần có trong bất kỳ ứng dụng web nào. Một trong những chỉ số đơn giản mà bạn có thể theo dõi để đo lường sự tương tác này chính là lượt xem trang hay Page View. Trong bài viết này, tôi sẽ hướng dẫn bạn từng bước để triển khai trình theo dõi lượt xem trang trong ứng dụng React của mình, bao gồm cách lấy khóa API qua Postman và lệnh curl. Hãy cùng khám phá ngay nào!

Bước 1: Thiết Lập Dự Án React Mới

Đầu tiên, nếu bạn chưa có dự án React, bạn cần tạo một dự án mới. Hãy mở terminal và chạy các lệnh sau:

npx create-react-app my-tracked-app
cd my-tracked-app

Điều này sẽ tạo ra một ứng dụng React mặc định cho bạn.

Bước 2: Cài Đặt Trình Theo Dõi Lượt Xem Trang

Tiếp theo, chúng ta cần cài đặt thư viện Page View Tracker. Chạy lệnh sau trong terminal:

npm install page-view-tracker

Bước 3: Lấy Khóa API

Để sử dụng trình theo dõi lượt xem trang, chúng ta cần có một khóa API. Bạn có thể lấy khóa API này bằng cách sử dụng Postman hoặc curl trong terminal.

Tùy Chọn A: Sử Dụng Postman

1. Mở Postman và tạo yêu cầu mới bằng cách nhấp vào nút "+" hoặc "New".
2. Chọn loại yêu cầu là POST từ menu thả xuống bên cạnh thanh URL.
3. Nhập URL: https://page-view-tracker.vercel.app/users/register
4. Trong tab Headers, thêm tiêu đề mới:
   • Key: Content-Type
   • Value: application/json
5. Chuyển đến tab Body, chọn chế độ "raw" và chọn "JSON" từ danh sách thả xuống.
6. Nhập dữ liệu JSON sau:
   json Copy

   {
     "email": "user@example.com"
   }

7. Nhấn nút "Send" và kiểm tra phản hồi. Bạn sẽ nhận được khóa API cần thiết.

Tùy Chọn B: Sử Dụng curl Trong Terminal

Nếu bạn muốn sử dụng curl, bạn có thể chạy lệnh sau trong terminal:

curl -X POST -H "Content-Type: application/json" -d '{"email":"user@example.com"}' https://page-view-tracker.vercel.app/users/register

Lệnh này sẽ trả về một phản hồi JSON chứa khóa API của bạn. Hãy đảm bảo bạn lưu trữ khóa API này ở một nơi an toàn, vì bạn sẽ cần nó trong ứng dụng React.

Bước 4: Triển Khai Trình Theo Dõi Trong Ứng Dụng React

Bây giờ, chúng ta cần cập nhật tệp src/App.js để triển khai trình theo dõi lượt xem trang:

import React, { useEffect, useState } from 'react';
import PageViewTracker from 'page-view-tracker';

// Sử dụng khóa API bạn đã lấy được
const API_KEY = 'your-api-key-here';
const tracker = new PageViewTracker(API_KEY, 'https://page-view-tracker.vercel.app/api');

function App() {
  const [pageViews, setPageViews] = useState(null);

  useEffect(() => {
    // Theo dõi lượt xem trang khi thành phần được gắn kết
    tracker.track();

    // Lấy và thiết lập số lượt xem trang hiện tại
    tracker.getPageViews().then(setPageViews);
  }, []);

  return (
    <div className="App">
      <h1>Chào mừng bạn đến với trang web theo dõi của tôi</h1>
      {pageViews !== null && <p>Tổng số lượt xem trang: {pageViews}</p>}
    </div>
  );
}

export default App;

Trong đoạn mã trên, bạn đã tạo một phiên bản của PageViewTracker bằng khóa API đã lấy được. Bên trong hook useEffect, bạn gọi tracker.track() để ghi lại lượt xem trang khi thành phần được hiển thị, và sau đó gọi tiếp tracker.getPageViews() để lấy và cập nhật số lượng lượt xem trang hiện tại trong trạng thái.

Bước 5: Chạy Ứng Dụng React Của Bạn

Cuối cùng, bạn có thể khởi chạy ứng dụng React bằng cách chạy lệnh sau:

npm start

Ứng dụng của bạn bây giờ sẽ theo dõi lượt xem trang và hiển thị số liệu thống kê hiện tại ngay trên giao diện.

Kết Luận

Việc triển khai trình theo dõi lượt xem trang trong ứng dụng React thực tế rất đơn giản và mang lại những thông tin giá trị về mức độ tương tác của người dùng. Bằng cách làm theo hướng dẫn này, bạn đã học cách lấy khóa API thông qua Postman và curl, cũng như cách tích hợp trình theo dõi vào ứng dụng React của mình. Chúc bạn thành công trong việc theo dõi trang web của mình!
source: viblo