Web and Social Network Analytics

Week 1: Web Analytics

Dr. Zexun Chen
Zexun.Chen@ed.ac.uk

Jan-2025

Table of Contents

Learning Objectives

By the end of this week, you will be able to:

  • Explain the evolution of the web and its impact on analytics
  • Distinguish between different web analytics tools and their use cases
  • Analyze user behavior through clickstream data and conversion funnels
  • Evaluate website performance using key web metrics
  • Understand privacy implications of web tracking technologies
  • Apply ethical considerations to web analytics practices

Welcome

Generated by DALL-E-3

Course Running Example: ShopSocial

Throughout this course, we’ll analyze ShopSocial, a hypothetical social e-commerce platform where:

  • 👥 Users browse and purchase products
  • 🔗 Social features: Follow friends and influencers
  • 🛍️ Engagement: Share products, write reviews
  • 📊 Analytics challenge: How to optimize user experience and sales?

This Week’s Focus: Using web analytics to understand ShopSocial user behavior

Evolution of Web

Web (2000) vs Web (2025); Generated by DALL-E-3

Source: (Downes 2015)

Web 1.0 - Static Web

  • Time: 1990s to 2000s.
  • Keywords: Static, read-only pages.
  • e.g.: HTML pages, directories.
  • Limits:
    • No interaction: No comments.
    • Static info: No updates.
    • Basic look: Minimal visuals.

By DALL-E-3

Web 2.0 - Social Web

  • Time: 2000s to 2010s.
  • Keywords: Interactive, user content.
  • e.g.: Social media, blogs.
  • Limits:
    • Privacy risks: Data tracking.
    • Quality issues: Unreliable content.
    • Dependency: Users rely on platforms.

Graph from article on Evolution of Web

Web 3.0 - Semantic Web

  • Time: 2010s onwards.
  • Keywords: Decentralized, AI-driven.
  • e.g.: Cryptocurrencies, Non-fungible token (NFTs), Decentralized applications (DApps).

By DALL-E-3

Evolution of Web

Graph from article on What is Web 3.0 and why it matters

Future: Web 4.0

Graph from article on Web 4.0 Explained – A Brief!

Web Analytics

Modern Web Analytics Tools

  • Understanding website usage through measuring & analyzing data generated by users
  • Evolution of analytics tools:
    • Traditional: Google Analytics (Universal Analytics - sunset July 2023)
    • Current: Google Analytics 4 (GA4) - Event-based, privacy-first (2020+)
    • Privacy-focused alternatives:
    • Commercial: Woopra, Mixpanel, Amplitude

Why the Shift to Privacy-First Analytics?

  • Regulatory Pressure:
    • GDPR (2018) and privacy laws worldwide
    • Third-party cookie deprecation (Chrome 2024-2025)
  • User Demand:
    • Growing privacy awareness
    • Ad blockers becoming mainstream
  • GA4 Key Changes:
    • Event-based model (not session-based)
    • Cross-platform tracking (web + app unified)
    • Predictive analytics with machine learning
    • Privacy-preserving measurement
  • Objectives:
    • See how your webpage is used.
    • See who buys something in your store (conversion).
    • Optimize structure of website, improve on marketing initiatives.

Analytics in Web 1.0

  • Focus: Basic metrics (views, visits, users)
  • Data: Static content, site structure
  • Tools: Server logs (IP, time, referrer, browser)
  • Challenges: Limited user interaction data, tracking paths
  • e.g.: Click density analysis, HTML analysis for SEO

Server Logs

Analytics in Web 2.0

  • Focus: User interaction
  • Data: Social media, blogs, comments, sharing (instagram gen)
  • Metrics: Engagement, bounce, conversion
  • Challenges: High data volume, finding valuable insights among noise, privacy concerns
  • Tools: Google Analytics, Adobe Analytics, social listening
  • Example: Clickstream analysis

Analytics in Web 3.0

  • Focus: Interoperability, connect everything to web
  • Platforms: Decentralized Apps, smart devices
  • Challenges: Complexity of decentralized data structures, Scalability & integration of AI
  • Tools: Blockchain explorers, AI analysis platforms

IoT Devices ID

Web Tracking

Data Collection: Web Tracking

Question

Think about the last time you browsed online. Did you notice ads related to your recent searches? Ever wonder how that happens?

Scenario

  • You search for “Shoes” on Amazon. Later, you notice:
    • Shoe ads on your Facebook feed.
    • Shoe shops highlighted on Google Maps.
    • Shoe-related tweets in your Twitter highlights.
  • How are these connected? What’s the common thread?

Track and Recommendation

Further Thinking

  • What implications does this have for privacy and consumer behavior?
  • How do you feel about this level of personalization?
  • Identify ways you are monitored on the internet.
  • Discuss technologies behind web tracking.

Web Tracking: Cookies

  • Definition: Small text files stored on your device by websites you visit.
  • Info Contained: Site preferences, login status, tracking indentifiers.
  • Structure: Name, value, attributes (expiration, domain, secure flags)

BBC News Cookies

How Cookies Work?

  • You visit a site; it sends a cookie to your device.
  • Your browser stores the cookie.
  • Next visit, the browser sends the cookie back.
  • The site recognizes you and customizes your experience.

Cookie Flow

Cookies: Purpose

  • Session Management: Unique session IDs for restoring states (e.g., cart).
  • Personalization: Remember user settings (e.g., layout, names).
  • Tracking: Monitor inter-page browsing behavior.

Browser Cookies

Cookies: Types

  • Session: Temporary; deleted when browser closes.
  • Persistent: Stored for a set period.
  • Third-Party: Placed by other domains (ads).
  • Supercookies:, Set at top-level domains (e.g., .com), NO cleared by users, Stored by ISPs (e.g., Virgin, BT).

Supercookies

Cookies: Privacy

  • Essential for functionality but raise privacy concerns.
  • Tracking cookies can monitor online activity across sites.
  • Regulations and browser policies are changing cookie use.

Privacy Cookies, By DALL-E-3

Web Tracking: Web Logs

  • Files automatically created and maintained by a server.
  • Record various activities such as user requests, server responses, errors, and more.
  • Steps:
    • Customer enters URL.
    • Request handled by web server.
    • Server accepts request and logs data.
    • Server sends response.

Web Logs

Web Logs: Types & Importance

  • Types of Web Logs
    • Access Logs: Track all requests to the server.
    • Error Logs: Record server issues and errors.
    • Event Logs: Document user actions (logins, transactions).
  • Importance in Web Analysis
    • Understand user behavior and site performance.
    • Optimize website, troubleshoot issues, and enhance security.
    • Analyze traffic sources, navigation paths, and interactions.
  • Privacy Issues
    • Logs can contain sensitive data.
    • Secure handling and compliance with privacy laws are essential.

Web Tracking: Beacons

  • Web Beacons
    • Also known as pixel tags, tracking pixels, or clear GIFs.
    • Tiny, transparent images embedded in emails and websites.
    • Almost invisible to users, usually 1x1 pixel in size.
  • How Web Beacons Work
    • When you load an email or webpage, the web beacon is also loaded.
    • Sends a signal back to the server, indicating the content was viewed.
    • Can track various user actions like email opens, webpage visits, and ad interactions.

Introduction to Web Beacon

Usage in Web Analytics

  • Usage
    • Used to gather data on user behaviour and engagement.
    • Helps in understanding content effectiveness and user preferences.
    • Common in email marketing campaigns to track open rates.
  • Privacy and Transparency
    • Raises privacy concerns due to their invisible nature.
    • Users often unaware they are being tracked.
    • Importance of ethical use and disclosure in privacy policies.

Web Beacons Usage

Web Tracking: JavaScript

<script type="text/javascript" src="quarto-preview.js"></script>
<script>window.define = window.backupDefine; window.backupDefine = undefined;</script>
<script type="text/javascript">
  const options = {
    origin: "",
    search: "",
    inputFile: "D:\workspace\Web-SNA\week1\lecture\week1.qmd",
    isPresentation: true
  }
  document.addEventListener("DOMContentLoaded", function () {
    window.QuartoPreview.init(options);
  });
</script>

JavaScript: Driving Interactivity and Tracking

  • A powerful programming language used in web development.
  • Enables dynamic content and interactivity on web pages.
  • Runs on the user’s browser, allowing real-time page updates without reloading.

TIOBE Index 2024

JavaScript in Web Tracking

  • Tracking
    • Used to track user actions and interactions on websites.
    • Can capture detailed data like clicks, form submissions, and mouse movements.
    • Powers sophisticated tracking techniques like event tracking and behavioral analysis.
  • User Experience
    • Enhances user experience with interactive features like drop-down menus, modals, and animations.
    • Facilitates responsive design for optimal viewing across different devices.

JavaScript: Considerations & Limitations

  • Considerations and Best Practices
    • Balancing functionality with performance: heavy scripts can slow down web pages.
    • Ensuring compatibility and accessibility across different browsers and devices.
    • Adhering to privacy standards and user consent, especially in tracking.
  • Limitations
    • Not all visitors have JavaScript enabled.
    • Tags need to be carefully made.
    • Data collected browser-side, not server-side.

Modern Web Tracking: The Post-Cookie Era

Traditional Tracking (Declining):

  • Third-party cookies (being phased out)
    • Chrome: Deprecation started 2024
    • Safari/Firefox: Already blocked
  • Cross-site tracking

Modern Alternatives (2024+):

  • First-party data collection
  • Server-side tracking
    • Google Tag Manager Server-Side
    • Better privacy control
  • Consent Management Platforms (CMPs)
    • OneTrust, Cookiebot, CookieYes

Privacy-Preserving Technologies:

  • Differential privacy
    • Add mathematical noise to data
    • Protect individuals while preserving trends
  • Aggregated reporting
    • Google Privacy Sandbox
  • Federated Learning of Cohorts (FLoC) / Topics API
    • Interest-based ads without individual tracking

Why the change?

  • GDPR & privacy regulations
  • User expectations for privacy
  • Browser policies (Safari ITP, Firefox ETP)

Tracking Without Third-Party Cookies

  • First-Party Cookies:
    • Same-domain tracking still allowed
    • Requires user consent (GDPR)
  • Server-Side Tracking:
    • Move tracking logic to server
    • More control over data
    • Better accuracy (bypasses ad blockers)
  • Browser Fingerprinting (controversial):
    • Device/browser characteristics
    • Screen resolution, fonts, plugins
    • Privacy concerns - considered intrusive
  • Privacy Sandbox APIs (Google):
    • Topics API: Interest-based ads without cookies
    • Attribution Reporting: Measure conversions privately
    • FLEDGE: Remarketing without cross-site tracking

Web Tracking: Packet Sniffing

  • Packet Sniffing: Monitoring Network Traffic
    • A technique used to capture and analyze packets of data as they are transmitted across a network.
    • Packet sniffers can intercept data packets and decode their contents.
    • Stands between the user and the website server.

Packet Sniffing Diagram, from Source

Uses of Packet Sniffing

  • Network Analysis: Identifying network problems, monitoring usage, optimizing performance.
  • Security: Detecting suspicious activities, intrusions, and vulnerabilities.
  • Data Collection: Gathering information transmitted over a network, including web traffic and communications.

Web Design

Web Page Essentials

  • HTML (HyperText Markup Language): Standard markup language for creating web pages.
  • Defines the structure and layout of a web page using a series of elements and tags.
<!DOCTYPE html>
<html lang="en"><head>
<script src="week1_files/libs/clipboard/clipboard.min.js"></script>
<script src="week1_files/libs/quarto-html/tabby.min.js"></script>
<script src="week1_files/libs/quarto-html/popper.min.js"></script>
<script src="week1_files/libs/quarto-html/tippy.umd.min.js"></script>
<link href="week1_files/libs/quarto-html/tippy.css" rel="stylesheet">
<link href="week1_files/libs/quarto-html/light-border.css" rel="stylesheet">
<link href="week1_files/libs/quarto-html/quarto-html.min.css" rel="stylesheet" data-mode="light">
<link href="week1_files/libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles"><meta charset="utf-8">
  <meta name="generator" content="quarto-1.5.57">

  <meta name="author" content="Dr.&nbsp;Zexun Chen">
  <title>Web and Social Network Analytics</title>

Key Features of HTML

  • Key Features
    • Elements and Tags: Building blocks of HTML, used to create different parts of a web page (like headings, paragraphs, links).
    • Attributes: Provide additional info about elements (e.g., style, class).
    • Semantic Markup: Meaningful tags to describe content structure (e.g., <article>, <section>, <footer>).
  • Evolution of HTML
    • From basic page layouts (HTML 1) to complex, interactive web (HTML5).
    • HTML5 has new elements, APIs, and global attributes for enhanced functionality.
  • HTML in Web Design
    • Forms the foundation for web page design.
    • Combined with CSS (Cascading Style Sheets) for styling and JavaScript for interactivity.
    • Emphasizes responsive and accessible design principles.

HTML Components

HTML Component Tag Syntax Description
Hyperlink <a> XXX </a> Used to create links to other pages. Example: <a href="www.ed.ac.uk">Link to UoE</a>
Paragraph <p> XXX </p> Defines a paragraph of text.
Layout Elements <div>, <span>, <nav>, <header> Defines sections of the page layout.
Headers <h1>, <h2>, etc. Used for headings of various levels. Example: <h1>Media and Web Analytics</h1>, <h2>Chapter 1: Web analytics</h2>
Image <img src="image.jpg" alt="description"> Embeds an image. Example: <img src="Johannes.jpg" alt="Johannes’ face" width="100" height="200">. Note: no end tag required.
Table <tr>, <th>, <td> Used to create tables. Example: <tr> for rows, <th> for headers, and <td> for standard cells.

Full list of HTML tags

HTML Components (Continued)

  • CSS:
    • Delineates sections using <div>.
    • Classes allow applying the same styles to similar elements.
      • Example: <style> .blueHeader {color: blue;} </style>
      • Usage: <h1 class="blueHeader">Header 1</h1>
    • Stylesheets are typically stored centrally for use across multiple pages.
  • JavaScript:
    <script type="application/javascript">
        if (typeof newrelic == 'object') {
            newrelic.setCustomAttribute('pageRenderTime', 6);
            newrelic.setCustomAttribute('pageRenderTS', 1736590309202);
            newrelic.setCustomAttribute('pageRenderType', 'home');
        }
    </script>

Web Page Essentials

Web Page Essentials: JavaScript

  • Example: Google Analytics
    • Collects data on:
      • Total time a user spends on the site.
      • Internal links clicked.
      • Geographical location, OS, browser, screen size, referring site.
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-78722-17', 'auto');
ga('send', 'pageview');
</script>

Ethics in Web Analytics

Privacy by Design

Principles:

  1. Proactive not reactive
    • Build privacy in from the start
  2. Privacy as default
    • Most restrictive settings by default
  3. Privacy embedded in design
    • Not an add-on
  4. Full functionality
    • Privacy without sacrificing usability
  5. End-to-end security
    • Protect throughout lifecycle
  6. Visibility and transparency
    • Keep it open
  7. Respect for user privacy
    • User-centric approach

Privacy by Design Framework

Privacy by Design: 7 Foundational Principles

Applied to Web Analytics:

  • Only track essential metrics
  • Anonymize IP addresses
  • Use session-based analytics (no persistent IDs)
  • Provide clear opt-out mechanisms
  • Regular data deletion

Ethical Web Analytics Checklist

✅ Before Implementing Analytics:

  1. Necessity: Do you really need this data?
  2. Consent: Have users explicitly opted in?
  3. Minimization: Collect only what’s essential
  4. Anonymization: Can you aggregate instead of tracking individuals?
  5. Transparency: Is your privacy policy clear and accessible?
  6. Security: How will you protect the data from breaches?
  7. Retention: When will you delete old data?
  8. Access Control: Who can access analytics data?
  9. Third Parties: Are you sharing data? With whom?
  10. User Rights: Can users view, export, delete their data?

Best Practice: Default to privacy-preserving methods (e.g., Plausible, Matomo)

ShopSocial Example: Ethical Dilemmas

Scenario: ShopSocial’s analytics team proposes:

  1. Track users across devices to provide seamless experience
    • Ethical concern: Cross-device tracking highly invasive
  2. Record all mouse movements and clicks for UX optimization
    • Ethical concern: Session replay without explicit consent
  3. Analyze shopping cart abandonment to send reminder emails
    • Ethical concern: Persistent tracking, potential manipulation
  4. Share anonymized purchase data with third-party analytics providers
    • Ethical concern: Re-identification risk, lack of control

Discussion Questions:

  • Which of these are ethically acceptable?
  • How could they be made more privacy-preserving?
  • What information should users be given?

Web Measurement

ClickStream

What is ClickStream Data?

  • Tracks the sequence of clicks a user makes while navigating through a website or application.
  • Provides insights into user behavior and preferences.
Term Definition
Hit Any request for a file from the web server.
Page View A request to load a single page of a website.
Session A group of user interactions with your website that take place within a given time frame.
Bounce Rate The percentage of visitors who navigate away after viewing only one page.
Conversion Rate The percentage of visitors who take a desired action (e.g., purchase, sign-up).

Analyzing ClickStream Data

  • Identifying patterns and trends in user navigation and interactions.
  • Assessing the effectiveness of website design and content strategy.
  • Enhancing user experience and increasing conversion rates.

ClickStream Analysis

Clickstream Terminology

Building Block Definition
Visitor Uniquely identified individual causing hits (requests for files, pages, etc.).
Visitor Types - Unique Visitor: First-time user.
- Repeat Visitor: Returns within a given time frame.
- Returning Visitor: Previously visited.
- New Visitor: First visit.
Metrics Single page visit; Bounce rate (single page); Exit rate (single page); page time viewd/duration; Average page depth; Click path: the route through the website

Important

\[ \text{Bounce Rate (single page)} = \frac{\text{Number of Single Page Sessions}}{\text{Total Number of Sessions}} \]

\[ \text{Exit Rate (single page)} = \frac{\text{Sessions Ending on Page}}{\text{Total Visits containing that Page}} \]

\[ \text{Average Page Depth} = \frac{\text{Total Number of Pages Viewed}}{\text{Total Visits}} \]

Example

  • Calculate the following:
    1. The exit rate of the home page.
    2. The bounce rate of the home page.
    3. The conversion rate (purchase confirmed).
    4. The average page depth.
Visitor 1 Visitor 2 Visitor 3 Visitor 4 Visitor 5
Home Home Home Home Products
Products About Products
Product 1 Products Basket
Basket Home Checkout
Checkout
Purchase confirmed

Solution

  • Calculate the following:
    1. The exit rate of the home page. 2/4
    2. The bounce rate of the home page.1/4
    3. The conversion rate (purchase confirmed). 1/5
    4. The average page depth. 16/5
Visitor 1 Visitor 2 Visitor 3 Visitor 4 Visitor 5
Home Home Home Home Products
Products About Products
Product 1 Products Basket
Basket Home Checkout
Checkout
Purchase confirmed

Bounce Rate

  • Reason
    • Surfer clicks the back button.
    • Surfer closes the browser.
    • Types a new URL.
    • Does nothing.
  • Not All High Bounce Rates Are Bad
    • Purchase confirmation page.
    • Contact page.
    • Single-page site (e.g., blog).

Example: My Personal Website Contact Me

Funnel Analysis

  • Funnel Analysis: Mapping the User Journey
    • A method to track and analyze the steps a user takes towards a specific goal or conversion on a website or app.
    • Helps identify where users drop off and what drives them to convert.
    • Components of a funnel
Component Description
Entry Point Where users begin their journey (e.g., landing page).
Intermediate Steps Key actions users take towards the goal (e.g., adding items to cart, filling out forms).
Conversion The final goal or action (e.g., completing a purchase, signing up).
Drop-Off Points Stages where users exit without converting.
  • Optimizing the user experience to increase conversions.
  • Identifying and addressing barriers in the conversion process.
  • Tailoring marketing strategies based on funnel insights.

Funnel Analysis

Customer Journey

  • Customer Journey: Navigating the Path to Conversion
    • The complete sequence of experiences customers go through when interacting with your company and brand.
    • Related to funnel analysis, but more holistic.
    • Not just a single interaction but a series of touchpoints from initial awareness to post-purchase engagement.
    • Stages of the Customer Journey
Stage Description
Awareness Customer becomes aware of a need and your brand.
Consideration Customer researches potential solutions and evaluates your offerings.
Decision Customer decides to purchase your product or service.
Retention Post-purchase experiences and customer loyalty.
Advocacy Satisfied customers recommend your brand to others.
  • Importance
    • Helps in creating targeted marketing strategies.
    • Identifies key touchpoints for customer engagement and conversion.
    • Enhances customer experience and satisfaction.
  • Example: The full experience of the customer with the company, e.g., Successor of Customer Lifetime Value (CLV):

Customer Lifetime Value

Google Analytics

Install with web builder
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2PMCK59SQC"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-2PMCK59SQC');
</script>

Install manually

Web Future

Heat Maps

  • Overlay on top of a website:
    • The site is divided into pixels.
    • Colored according to the number of clicks in each area.
  • Insights from Heat Maps:
    • Complementary to funnel analysis.
    • Helps answer questions like:
      • Do users click on advertisements?
      • Do users find a particular topic more interesting?

Heatmap Example

Eye Tracking

  • Improvement on Heat Maps:
    • A device is applied to a person while looking at a screen.
    • Generates a more precise image of how users scan a website or application.
  • Provides Information On:
    • Duration of gaze.
    • Sequence and timing.
    • Intensity of focus.

Heatmap Eye Image.

Tobii Dynavox

Take Home Messages

  • Evolution of Web and Web Analytics
    • Web 1.0 and Web Analytics 1.0
    • Web 2.0 and Web Analytics 2.0
    • Web 3.0 and Web Analytics 3.0
  • Web Tracking Technology
    • Cookies
    • Web Logs
    • Web Beacons/Bugs
    • JavaScript
    • Packet Sniffing
  • Web Design Tools
    • HTML
    • CSS
    • JavaScript
  • Web Measure Tools
    • Clickstream
    • Funnel Analysis
    • Heatmaps
    • Eye Tracking
    • …

References

Downes, Cathy. 2015. “Rapidly Evolving, Digitally-Enabled Learning Environments: Implications for Institutional Leaders, Educators and Students.” Innovative Learning: A Key to National Security, 101–32.