Web and Social Network Analytics

Week 1: Web Analytics

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

Jan-2025

Table of Contents

Welcome

Generated by DALL-E-3

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

Analytics from Web

  • 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.

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>

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.