Tom's guide to tracking version 2

How Does Customer Monitoring Work?

Why Understanding Webpage Interactions Matters

If you're in marketing, you know how important it is to understand how people interact with your webpages. The better we understand user behavior, the more we can optimize our campaigns, improve conversion rates, and create better experiences for our audience.

This guide walks you through key ways to track webpage interactions, helping you make data-driven decisions that boost your marketing efforts. Whether you're looking to improve engagement, reduce bounce rates, or drive more sign-ups, these insights will be valuable.

We're going to dive deep into how your marketing websites actually work — and yes, there will be a little bit of code. Don’t worry if you’re not a developer; writing the code isn’t the main point here. Understanding what's possible is.

How Does the Web Actually Work?

First things first: how does a website end up on your screen? It's not as simple as downloading a PDF.

At the most basic level, the "website" you see is a result of code sent to your browser, which then interprets and displays it. A web server delivers the website’s code to your browser. Your browser constructs the page — pulling in images, text, colors, and backgrounds — and displays it to you.

While this is happening, your browser also runs embedded code (usually JavaScript) that can alter the page or perform actions — like initiating a checkout or opening a chat box. This is what allows the same website to behave differently on a phone versus a laptop: different browsers follow different instructions in the code.

This ability to run scripts within a webpage lets us track interactions at the user level — not just “someone visited” but “this exact person visited, at this time, and did these things.”

Setting Up an Example

To demonstrate, we'll use CodePen.io — a free, simple way to test out website code without needing to host anything yourself.

On CodePen, you'll see three code panels: HTML (structure), CSS (styling — we’ll skip this), and JavaScript (the magic).

In just a few lines of JavaScript and HTML, we’ll:

Identify visitors
Track what they do
Collect location, device type, and more
Send this data to a live endpoint

For now, instead of integrating this with your CRM or analytics tool, we’ll use webhook-test.com to see the data arrive in real time.

📌 Tip: Open the webhook page on a second monitor or device so you can watch the data come in as you go.

Step 1: Detect a Visit

First, copy your custom URL from webhook-test.com.

In CodePen’s JavaScript panel, paste the following code:

fetch("https://webhook-test.com/YOUR-UNIQUE-ID");

This sends a GET request to the webhook URL whenever the site loads. You’ll see a new request in your webhook tester showing data like:

Origin URL
Device type (via the user-agent)
Country of origin
IP address (which can reveal city)

🎯 This gives you real-time alerts any time someone loads your page.

Step 2: Add Custom Data

We can go further by sending custom data using a POST request:

fetch("https://webhook-test.com/YOUR-UNIQUE-ID", {
  method: "POST",
  body: "Custom Data!"
});

Now you’ll see a POST request in your webhook monitor with “Custom Data!” in the body.

🔍 This lets us send any data we want — including identifying information.

Step 3: Identify the Visitor

We want to track if the same user returns. For this, we store a unique ID (UUID) in the user’s browser using localStorage.

let uuid = localStorage.getItem("uuid");
if (!uuid) {
  uuid = crypto.randomUUID();
  localStorage.setItem("uuid", uuid);
}

This script:

Checks if a UUID exists
If not, generates one and saves it
Uses that UUID going forward

Now we modify our fetch to include the UUID:

fetch("https://webhook-test.com/YOUR-UNIQUE-ID", {
  method: "POST",
  body: uuid
});

✅ Now, each time the user visits, you’ll get the same ID — unless they clear their browser cache.

Step 4: Track User Actions

Let’s wrap the fetch in a function we can reuse for tracking interactions:

function tag(action) {
  fetch("https://webhook-test.com/YOUR-UNIQUE-ID", {
    method: "POST",
    body: `{
      "uuid": "${uuid}",
      "action": "${action}"
    }`
  });
}

We trigger a "page-load" action like this:

tag("page-load");

Then in the HTML panel, add this button:

<button onclick="tag('button-click')">Click Me</button>

Now every click sends a log to your webhook.

Let’s add a hidden action too:

<h1 onmouseover="tag('hover-heading')">👋 Hello World!</h1>

Now just hovering over the heading triggers an event.

![placeholder image: simple diagram showing user interactions flowing into webhook]

Final Thoughts

The possibilities from here are endless:

Did the customer add to cart?
Did they scroll to the bottom?
Did they read a blog post to the end?
Did they spend over a minute on the page?

All of this gives marketers powerful insight into real user behavior — in real time.

📌 Reminder: Always ensure your tracking respects privacy regulations like GDPR and CCPA. Inform users and offer opt-outs where needed.

What Next?

Now that you’ve seen how easy it is to track user behavior:

Try sending data to your CRM or analytics platform
Add event triggers for form submissions or video plays
Explore tools like heatmaps and A/B testing

Tracking user interactions isn’t just for developers — it’s a superpower for marketers. By understanding clicks, time spent, and behaviors, you can refine your strategy and improve your results.

Happy optimizing! 🚀