3️⃣Page Views

Walkthrough for tracking page views

Page View Tracking with w3aSDK

Page view tracking is an essential feature for understanding user behavior on your website. With w3aSDK, setting up page view tracking is both quick and straightforward.

Automatic Page View Tracking

To enable automatic page view tracking, add the following code to your main application file

(e.g., App.js or index.js):

// File: App.js / index.js
import { w3aSDK } from "@web3acquire/w3a";

w3aSDK.enableAutoPageView();

The enableAutoPageView function monitors the history object, making it ideal for tracking page transitions in single-page applications (SPAs). It seamlessly integrates with routing packages, such as react-router-dom.

Manual Page View Tracking

If you'd rather have more control and wish to manually track page views, you can utilize the pageView API provided by w3aSDK.

Below is a practical example of how to implement manual page view tracking using react-router-dom:

// File: App.js / index.js
import React from "react";
import { useLocation } from "react-router-dom";
import { w3aSDK } from "@web3acquire/w3a";

export const page = () => {

  let location = useLocation();
  
  React.useEffect(() => {
    w3aSDK.pageView();
  }, [location]);
  
  // ..rest of the component
}

In this example, every time the location changes (i.e., a new page is visited), the pageView function is called, logging the view.