Page Traffic Tracker simplifies website traffic tracking by providing easy-to-use hooks and components for React applications. With this package, users can effortlessly monitor the overall traffic on their website and obtain detailed statistics for individual URLs.
Key features of Page Traffic Tracker include:
- URL Tracking Component: The
TrackUrls
component allows you to track the traffic for all URLs directly within your React components. - Overall Traffic Monitoring: Use the
usePageTraffic
hook to retrieve total views, today's views, and average views for the entire website. - URL-Specific Traffic Analysis: Use the
useUrlTraffic
hook to fetch traffic data for a specific URL, including total views, today's views, and average views.
To install Page Traffic Tracker, use npm
:
Copy code
npm install page-traffic-tracker
Before using Page Traffic Tracker, you need to collect a UUID (Universally Unique Identifier) from this website. This UUID will be used to track the traffic on your website.
Import the necessary hooks from Page Traffic Tracker into your React components or custom hooks:
import { TrackUrls, usePageTraffic, useUrlTraffic } from "page-traffic-tracker";
Use the TrackUrls
component into the App.jsx
to track the traffic for Urls. And also pass the generated secure id
as a props into this component.
<TrackUrls id={id} />
Use the usePageTraffic
hook to retrieve overall traffic data for the website. And also pass the generated secure id
as an argument, which allows the hook to retrieve data specific to that page or resource.
const { totalViews, todayViews, averageView, allUrls } = usePageTraffic(id);
Understanding the Data:
- totalViews: This holds the total visits to the whole website.
- todayViews: This holds the number of Visits to the same website on the current day.
- averageView: This stores the average views per visit for that particular website.
- allUrls: An array containing URLs associated with the retrieved data (linked URLs or different versions).
Use the useUrlTraffic
hook to retrieve traffic data for a specific URL. And also pass the generated secure id
and url
as arguments into this hooks.
const { totalUrlViews, todayUrlViews, averageUrlView } = useUrlTraffic(id, url);
Understanding the Data:
- totalUrlViews: This holds the total visits to the specific URL.
- todayUrlViews: This holds the number of visits to the same URL on the current day.
- averageUrlView: This stores the average views per visit for that specific URL.
import { TrackUrls } from "page-traffic-tracker";
function App() {
const id = "Your generated secure user id from https://pageview-tracker.vercel.app/";
return (
<div className="w-screen h-auto flex flex-col bg-shades-1">
<Router>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/projects" element={<Projects />} />
<Route path="/contact" element={<Contact />} />
</Routes>
<TrackUrls id={id} />;
</Router>
</div>
);
}
import { usePageTraffic, useUrlTraffic } from "page-traffic-tracker";
const MyComponent = () => {
const id = "Your generated secure user id from https://pageview-tracker.vercel.app/";
const { totalViews, todayViews, averageView, allUrls } = usePageTraffic( id );
const url = "/";
const { totalUrlViews, todayUrlViews, averageUrlView } = useUrlTraffic( id, url );
return (
<div>
<h2>Overall Traffic</h2>
<p>Total Views: {totalViews}</p>
<p>Today's Views: {todayViews}</p>
<p>Average Views: {averageView}</p>
<p>All urls: </p>
<ul>
{allUrls.map((url) => (
<li key={url}>{url}</li>
))}
</ul>
<h2>URL-Specific Traffic</h2>
<p>Total Views: {totalUrlViews}</p>
<p>Today's Views: {todayUrlViews}</p>
<p>Average Views: {averageUrlView}</p>
</div>
);
};
This project is licensed under the MIT License - see the LICENSE file for details.