Hiểu được mức độ tương tác của người dùng là rất quan trọng đối với bất kỳ ứng dụng web nào. Một trong những số liệu đơn giản nhất để bạn có thể theo dõi sự tương tác đó chính là lượt xem trang hay Page View. Trong bài viết này, tôi sẽ hướng dẫn quy trình triển khai trình theo dõi lượt xem trang cơ bản trong ứng dụng React, bao gồm cách lấy khóa API cho dịch vụ bằng cả Postman và lệnh curl. Hãy cùng theo dõi nhé.
Bước 1: Thiết lập dự án React của bạn
Đầu tiên, hãy tạo một dự án React mới (nếu bạn chưa tạo):
npx create-react-app my-tracked-app
cd my-tracked-app
Bước 2: Cài đặt Page View Tracker
Tiếp theo, chúng ta sẽ cài đặt Page View Tracker:
npm install page-view-tracker
Bước 3: Lấy Khóa API
Trước khi chúng ta có thể sử dụng trình theo dõi lượt xem trang (Page View Tracker), chúng ta cần lấy khóa API. Bạn có thể thực hiện việc này bằng Postman hoặc lệnh curl trong bash.
1. Lựa chọn A: Sử dụng Postman
- Đầu tiên, mở Postman trên máy tính của bạn.
- Tiếp đó, hãy tạo yêu cầu mới bằng cách nhấp vào nút "+" hoặc nút "New".
- Đặt loại yêu cầu thành POST bằng cách sử dụng menu thả xuống bên cạnh thanh URL.
- Nhập URL yêu cầu:https://page-view-tracker.vercel.app/users/register
- Kế đến, trong tab Title, bạn hãy thêm tiêu đề mới:
- Key: Content-Type
- Value: application/json
- Vào tab Body, chọn "raw" và chọn "JSON" từ danh sách thả xuống.
- Sau đó, nhập dữ liệu JSON sau:
{ "email": "user@example.com"
}
- Nhấn nút "Send"
- Kiểm tra trạng thái phản hồi, trong đó sẽ chứa khóa API mà bạn cần.
2. Tùy chọn B: Sử dụng curl trong bash
Ngoài cách đầu tiên, bạn cũng có thể sử dụng lệnh curl sau trong terminal của mình:
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ề phản hồi JSON có chứa khóa API của bạn.
Hãy đảm bảo lưu khóa API này một cách an toàn vì bạn sẽ cần nó trong ứng dụng React của mình.
Bước 4: Triển khai Tracker trong ứng dụng React của bạn
Bây giờ, hãy cập nhật tệp src/App.js để triển khai trình theo dõi lượt xem trang mà chúng ta cần:
import React, { useEffect, useState } from 'react';
import PageViewTracker from 'page-view-tracker'; // Use the API key you obtained from Postman or curl
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(() => { // Track the page view when the component mounts tracker.track(); // Fetch and set the current page view count tracker.getPageViews().then(setPageViews); }, []); return ( <div className="App"> <h1>Welcome to my tracked website</h1> {pageViews !== null && <p>Total page views: {pageViews}</p>} </div> );
} export default App;
Trong đoạn mã trên: Tôi tạo ra một phiên bản PageViewTracker bằng khóa API mà tôi đã lấy được. Trong hook useEffect, tôi gọi ra tracker.track() để ghi lại lượt xem trang khi thành phần được gắn kết.
Tôi cũng gọi ra tracker.getPageViews() để lấy số lượt xem trang hiện tại và cập nhật trạng thái mà tôi muốn. Cuối cùng, tôi hiển thị số lượt xem trang trong JSX của thành phần là xong.
Bước 5: Chạy ứng dụng React của bạn
Bây giờ bạn có thể bắt đầu ứng dụng React của mình:
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ố lượng hiện tại!
Kết luận
Việc triển khai trình theo dõi lượt xem trang trong ứng dụng React của bạn là một quy trình đơn giản có thể cung cấp thông tin chi tiết có 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 đã biết cách lấy khóa API bằng cả 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 bạn. Chúc các bạn thành công!