How to Track Visitor Statistics in Headless WordPress Themes Using WP Statistics

In today’s dynamic web development landscape, headless WordPress setups have gained immense popularity. By decoupling the front end and back end, developers can leverage modern technologies like React, Vue.js, and Angular to create interactive and highly responsive user experiences. However, tracking visitor statistics in such headless WordPress setups can be challenging. Fortunately, WP Statistics offers a straightforward solution. In this post, we’ll explore how to send visitor data to WP Statistics in a headless WordPress environment.

Why Use Headless WordPress?

Headless WordPress architecture allows you to use WordPress solely as a content management system (CMS) while delivering content through a separate front-end application. This approach offers several benefits:

• Improved Performance: Faster load times and better performance due to optimized front-end frameworks.
• Enhanced Security: The separation of the front end from the back end reduces the attack surface.
• Flexibility: Freedom to choose any front-end technology.

The Challenge of Tracking Visitor Statistics

One of the challenges with headless WordPress is tracking visitor statistics. Traditional methods of integrating analytics and tracking plugins may not work as expected due to the decoupled nature of the setup. This is where WP Statistics comes into play.

Using WP Statistics to Track Visitor Data

WP Statistics is a powerful plugin that allows you to track and analyze your website’s visitors. Even in a headless setup, you can send visitor data to WP Statistics by making a simple API call. Here’s how you can do it.

Step-by-Step Guide

1. Install WP Statistics Plugin: First, ensure that you have the WP Statistics plugin installed and activated on your WordPress site. You can download it from the WordPress repository and activate it through your WordPress admin panel.
2. Configure WP Statistics: Configure the WP Statistics plugin according to your tracking needs. You can access the settings from the WordPress dashboard under WP Statistics.
3. Create an Endpoint to Send Visitor Data: Use the following curl command to send visitor data to WP Statistics. This command simulates a visitor hit and sends the necessary information to the WP Statistics API endpoint.

POST curl 'https://siteurl.dev/wordpress/wp-json/wp-statistics/v2/hit' \
  -H 'referer: https://wordpress.test/' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36' \
  --data-raw 'wp_statistics_hit=1&source_type=home&source_id=0&search_query=&page_uri=/about&signature=9e4295daae294f579a8889a04e8d3f31&endpoint=hit&referred=https://google.com'

Let’s break down the command:

• https://siteurl.dev/wordpress/wp-json/wp-statistics/v2/hit: The API endpoint for WP Statistics.
• wp_statistics_hit=1: Enables REST tracking.
• source_type=home: Specifies the page type.
• source_id=0: ID of the current page.
• search_query: Search query used by the visitor.
• page_uri=Lw=: Base-64 Encoded URI of the page.
• referred: Referrer URL.
• Headers (referer, user-agent): Provides context about the visitor’s environment.
• signature=YOUR_GENERATED_SIGNATURE: The generated signature for verifying the request.

1. Integrate with Your Front-End Application: In your front-end application (e.g., built with React), make an HTTP request to the WP Statistics endpoint whenever a visitor interacts with your site. Here’s an example using Axios in React:

import axios from "axios";
import md5 from "crypto-js/md5";

const wpSalt = "your_wp_salt"; // Ensure this matches the WP_SALT on the server

const trackVisitor = () => {
    const payload = JSON.stringify(["home", 0]); // Ensure these match your page type and ID
    const signature = md5(wpSalt + payload).toString(); // Generate the MD5 hash

    axios
        .post("https://siteurl.dev/wordpress/wp-json/wp-statistics/v2/hit", 
            {
                wp_statistics_hit: 1,
                source_type: "home",
                source_id: 0,
                search_query: "",
                page_uri: "Lw=",
                referred: "https://google.com/",
                signature: signature
            },
            {
                headers: {
                    referer: "https://google.com/",
                    "user-agent": navigator.userAgent,
                    "Content-Type": "application/json"
                },
            }
        )
        .then((response) => {
            console.log("Visitor tracked:", response.data);
        })
        .catch((error) => {
            console.error("Error tracking visitor:", error);
        });
};

// Call the trackVisitor function when appropriate, e.g., on page load or route change

Ensure you replace the URL and parameters with those specific to your setup.

Managing Request Signatures

For enhanced security, WP Statistics uses request signatures to verify the authenticity of incoming data. In version 14.9, signatures were adopted instead of nonces to improve compatibility with caching mechanisms. You can learn more about how to manage these signatures, generate them in headless systems, and disable verification if needed by visiting our detailed documentation: Managing Request Signatures.