How Analytics Tools Work: A Simple Explanation

How Analytics Tools Work: A Simple Explanation

Have you ever wondered how tools like Vercel Analytics, Google Analytics, or Plausible can tell you where your users are coming from, what device they’re using, or even which platform they’re on? And how do they do this with just 2-3 lines of code added to your app? Let’s break it down step by step.

Imagine you have a blog hosted on your website. A user clicks on a link to your blog, say:
https://myblog.com/how-to-bake-a-cake

When the user opens this link, their browser sends a request to your website’s server to load the page. This is where the magic of analytics begins.

Step 2: The Analytics Code Runs

When you added those 2-3 lines of analytics code to your website (usually in the <head> or <body> of your HTML), it loads a small JavaScript file from the analytics provider (like Google Analytics or Vercel). This JavaScript file is like a tiny spy that runs in the user’s browser.

Here’s an example of what the code might look like:

<script>
  // Example: Google Analytics tracking code
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'YOUR_TRACKING_ID');
</script>

How Analytics Scripts Work

When a user loads your website, an analytics script runs in their browser and starts collecting information about them.

Step 3: Collecting Data

The analytics script gathers useful information, such as:

Where the user came from:

  • Did they click a link on Google, Twitter, or an email? This is called the referrer.
  • Example: If the user came from Google, the script knows the referrer is google.com.

What device they’re using:

  • Is it a phone, tablet, or desktop? The script checks browser details to determine this.
  • Example: If the user is on an iPhone, the script detects the device as a mobile device.

What platform they’re on:

  • Are they using Chrome, Safari, or Firefox? The script checks the browser type.
  • Example: If the user is on Chrome, the script knows the platform is Chrome.

Other details:

  • The script can also collect the user’s IP address (to estimate location), screen size, and even time spent on the page.

Step 4: Sending Data to the Analytics Provider

Once collected, the script sends the data to the analytics provider’s servers via an invisible network request.

Example data sent:

User clicked on: https://myblog.com/how-to-bake-a-cake
Referrer: google.com
Device: iPhone
Browser: Safari
Location: New York

This data is sent securely to the provider’s servers.

Step 5: Storing and Processing Data

The analytics provider:

  • Stores the data in a database.
  • Processes the data to make it useful.

For example, they can:

  • Group data by referrer to show which websites are sending traffic.
  • Group data by device to show mobile vs desktop users.
  • Group data by location to display user demographics.

Step 6: Showing You the Data

The analytics provider presents the processed data in a dashboard with charts and graphs.

Example Dashboard Insights:

  • Traffic Sources: 50% from Google, 30% from Twitter, 20% from email.
  • Devices: 70% mobile, 30% desktop.
  • Locations: Most users from the US, India, and the UK.

Example: A Real-Life Scenario

Imagine you wrote a blog post about baking cakes and shared it on Twitter. Here’s what happens:

  1. A user clicks your Twitter link: https://myblog.com/how-to-bake-a-cake.
  2. The analytics script runs and collects:
    • Referrer: twitter.com
    • Device: iPhone
    • Browser: Safari
    • Location: London
  3. The script sends this data to the analytics provider.
  4. The provider processes and updates your dashboard.
  5. You log in and see:
    • 100 users visited your blog today.
    • 60% came from Twitter.
    • 70% are on mobile devices.
    • Most users are from London.

Why Is This So Easy to Set Up?

The reason you only need 2-3 lines of code is because the analytics provider handles everything else:

  • The JavaScript code that collects data.
  • The servers that store and process data.
  • The dashboard that displays insights.

All you need to do is add their script to your website, and they take care of the rest.

Summary

  1. A user opens your website.
  2. The analytics script runs and collects data.
  3. The script sends this data to the analytics provider.
  4. The provider processes and presents it in a dashboard.

With just a few lines of code, you can gain valuable insights into your audience!

I hope this explanation makes it clear! Let me know if you have more questions. 😊