In this tutorial, we’ll walk you through the process of capturing client-side data when someone opens a link on your website. We’ll use JavaScript for client-side data gathering and PHP for server-side processing. This Script works like Grabifywebsite script By the end of this tutorial, you’ll be able to collect information such as IP address, referring URL, operating system, and more.
Prerequisites
Before we begin, make sure you have the following in place:
- A web server with PHP support.
- A basic understanding of JavaScript and PHP.
Step 1: Create an HTML File
Let’s start by creating an HTML file where we’ll place the link that users will click to trigger the data capture.
<!DOCTYPE html>
<html>
<head>
<title>Client Data Capture</title>
</head>
<body>
<a href="#" id="captureLink">Open Link</a>
<script>
// JavaScript code will go here
</script>
</body>
</html>
In this code, we’ve created a simple HTML page with a link having the ID captureLink. Clicking this link will initiate the data capture process.
Step 2: Add JavaScript for Data Capture
Next, we need to add JavaScript code to gather the client-side data. Here’s the updated JavaScript section within the HTML file:
<script>
document.getElementById("captureLink").addEventListener("click", function(e) {
e.preventDefault();
// Gather information using JavaScript
const dateTime = new Date().toLocaleString();
const ipAddress = window.location.host; // Note: This won't provide the client's IP address directly.
const userAgent = navigator.userAgent;
const referringURL = document.referrer;
const platform = navigator.platform;
const operatingSystem = navigator.appVersion;
const gpu = 'Your GPU information'; // You may need to find a way to get this information via a third-party library or API.
const screenSize = `${window.screen.width} x ${window.screen.height}`;
const device = 'Your device information'; // You may need to find a way to get this information via a third-party library or API.
// Create an object to store the data
const data = {
dateTime,
ipAddress,
userAgent,
referringURL,
platform,
operatingSystem,
gpu,
screenSize,
device,
};
// Send the data to a server-side script using AJAX
const xhr = new XMLHttpRequest();
xhr.open("POST", "capture.php", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log("Data sent successfully!");
}
};
xhr.send(JSON.stringify(data));
});
</script>
In this JavaScript code, we’ve added functionality to gather various client-side data, including the date and time, IP address (note: this might not give the actual client IP), user agent, referring URL, platform, operating system, GPU (if available), screen size, and device information.
Step 3: Create the PHP Script
Now, let’s create the PHP script (capture.php) that will receive and process the data sent by the JavaScript code.
<?php
// Capture information received from the client
$data = json_decode(file_get_contents('php://input'), true);
// Store the captured information in a database or log it to a file
// For this example, we will just append it to a log file
$logFile = 'capture.log';
file_put_contents($logFile, json_encode($data) . PHP_EOL, FILE_APPEND);
// Respond with a success message
http_response_code(200);
?>
In this PHP script, we receive the JSON data sent by the JavaScript code, store it in a log file (you can adapt this to store in a database or perform any other processing as needed), and respond with a success message.
Step 4: Testing
To test this setup, open the HTML file in a web browser. Clicking the “Open Link” will trigger the JavaScript code, which will capture client-side data and send it to the server-side PHP script.
Download and View Full Code on GitHub
Conclusion
In this tutorial, you’ve learned how to capture client-side data when someone opens a link on your website. This data can be valuable for analytics and tracking user behavior. Keep in mind that capturing some information, such as the client’s real IP address, may require additional server-side configurations due to security measures. Additionally, gathering GPU and device information might involve third-party libraries or APIs.
