Tracking Basics

Web analytics runs on a few core technologies: tags, pixels, SDKs, and tag managers. Each plays a specific role in how data gets collected.

How We Got Here

Tracking started with server logs and visit counters. JavaScript tags came next. Then tag managers. Now privacy-first tracking is the new baseline.

graph LR
    A[1990s: Server Logs] --> B[2000s: JavaScript Tags]
    B --> C[2010s: Tag Management]
    C --> D[2020s: Privacy-first Tracking]

Each shift reflects new business needs and tighter privacy rules.

Pixels

How Pixels Work

A tracking pixel is a transparent 1x1 image loaded from an external server. The request itself carries the data.

<img src="https://tracking.example.com/pixel.gif?
  page=homepage&
  user_id=123456&
  timestamp=1634567890"
  width="1" height="1" style="display:none" />

Common Uses

Email tracking. Pixels track opens, device, and geo. Useful for send-time optimization and personalization.

Conversion pixels. Facebook Pixel, LinkedIn Insight Tag, and others use pixels to track conversions and build retargeting audiences.

Facebook Pixel Flow

User sees ad on Facebook
Visits site and buys
Pixel captures the conversion
Facebook links purchase to ad impression
Data feeds campaign optimization

Limitations

Problem	Impact	Workaround
Image blocking	20-40% emails untracked	Track clicks instead
Ad blockers	Conversion data loss	Server-side tracking
Privacy modes	Incomplete data	First-party pixels
GDPR/CCPA	Consent required	Consent management

SDKs

What an SDK Does

An SDK (Software Development Kit) integrates analytics directly into application code. It runs at the app level, not in a browser, which gives it deeper access.

Why SDKs Help

Deep integration. SDKs reach device and OS APIs:

Device info (model, OS, memory)
Network state (WiFi/mobile)
Battery and performance
Sensors and geolocation

Offline tracking:

// iOS SDK example with offline buffering
Analytics.track("Product Viewed") { properties in
    properties["product_id"] = "SKU-123"
    properties["price"] = 29.99
    properties["offline"] = !Reachability.isConnected
}
// Events are saved locally and sent when connection is restored

Reliability. SDKs run inside the app, bypassing browser blockers. Data collection from active users hits nearly 100%.

Popular SDKs

Google Analytics for FirebaseAmplitude SDKMixpanel SDK

Features:

Auto event collection
Firebase integration
Predictive analytics
Unlimited reporting

Platforms: iOS, Android, Unity, C++

Features:

Behavioral cohorts
User journey mapping
Revenue tracking
Experimentation

Platforms: iOS, Android, Web, React Native

Features:

Funnel analysis
A/B testing
Push notifications
In-app messaging

Platforms: iOS, Android, Web, Unity

SDK Setup

SDK Best Practices

Initialization:

Initialize as early as possible in the app lifecycle
Use separate keys for dev/staging/production
Enable debug mode in development

Performance:

Batch event sends
Set queue size limits
Monitor app performance impact

Privacy:

Provide opt-out
No PII without explicit consent
Follow App Store and Google Play guidelines

Tag Management Systems

The Concept

A Tag Management System (TMS) is a single interface for managing all tracking tags on a site. Update tags without touching site code.

Google Tag Manager

GTM became the default. It's free and tied to Google's ecosystem.

graph TB
    A[GTM Container] --> B[Triggers]
    A --> C[Tags]
    A --> D[Variables]
    B --> E[Page View]
    B --> F[Click]
    B --> G[Form Submit]
    C --> H[GA4]
    C --> I[Google Ads]
    C --> J[Facebook Pixel]
    D --> K[Data Layer]
    D --> L[Cookies]
    D --> M[Custom JS]

Core Components

Container. The main organizational unit. Holds all tags, triggers, and variables for a site or app.

Tags. Code that runs when triggers fire. GTM ships dozens of templates plus custom HTML/JavaScript.

Triggers. Conditions that fire tags:

Page view (with URL filters)
Clicks (by element, class, ID)
Form submissions
Scroll depth
Timers
Custom events

Variables. Dynamic values for tags and triggers:

// Data Layer variable
dataLayer.push({
  'event': 'purchase',
  'transactionId': '12345',
  'transactionTotal': 99.99,
  'transactionProducts': [{
    'sku': 'SKU123',
    'name': 'Product Name',
    'category': 'Category',
    'price': 99.99,
    'quantity': 1
  }]
});

Why TMS Matters

For marketers:

Independence from IT
Fast campaign rollouts
A/B test tags
Visual configuration

For developers:

Minimal code changes
Versioning and rollback
Debugging tools
Automation API

For business:

Faster time-to-market
Less technical debt
Compliance and governance
Lower error risk

Advanced Capabilities

Server-side TaggingConsent ManagementCustom Templates

GTM Server Container runs on your server. It processes data before sending to analytics.

Advantages:

Bypasses ad blockers
Data control
Server-side enrichment
Better site performance

Integrates with Consent Mode for GDPR:

gtag('consent', 'update', {
  'analytics_storage': 'granted',
  'ad_storage': 'denied'
});

Reusable tag templates for:

Standardized implementation
Non-technical users
Data validation
Documentation

Putting It Together

Hybrid Architecture

Real projects combine technologies. A typical stack:

graph TD
    A[Website] --> B[GTM Container]
    B --> C[GA4 Tag]
    B --> D[Facebook Pixel]
    B --> E[Custom Tags]

    F[Mobile App] --> G[Firebase SDK]
    G --> H[Analytics]
    G --> I[Crashlytics]

    J[Email] --> K[Tracking Pixels]
    K --> L[Email Analytics]

    M[Server] --> N[Server-side GTM]
    N --> O[Measurement Protocol]

Data Layer

The Data Layer is a JavaScript object that bridges the site and tracking systems:

// Enhanced E-commerce Data Layer
dataLayer.push({
  'event': 'view_item',
  'ecommerce': {
    'currency': 'USD',
    'value': 25.99,
    'items': [{
      'item_id': 'SKU_123',
      'item_name': 'T-Shirt',
      'item_category': 'Apparel',
      'item_variant': 'Blue',
      'price': 25.99,
      'quantity': 1
    }]
  },
  'user_data': {
    'user_id': 'USER_456',
    'user_type': 'returning',
    'loyalty_status': 'gold'
  }
});

Debugging

Debugging Tools

Browser extensions:

Google Tag Assistant
Facebook Pixel Helper
Adswerve dataLayer Inspector
WASP (Web Analytics Solution Profiler)

Built-in tools:

GTM Preview Mode
GA4 DebugView
DevTools Network panel

Automated testing:

Tag monitoring services
Selenium for regression
API testing for server-side

Where Tracking Is Heading

Privacy First

Privacy rules are reshaping tracking:

Technical changes:

Third-party cookie deprecation
Fingerprinting limits
Shorter cookie lifetimes
Mandatory consent

Industry response:

First-party data
Server-side tracking
Privacy-preserving analytics
Consent management platforms

What's Next

Edge computing. Process data at CDN level. Lower latency, better privacy.

Machine learning. Predictive analytics and auto-optimization.

Blockchain. Decentralized attribution with transparency.

Statable supports both traditional tracking and privacy-first approaches. We focus on adaptability and ease of use, with universal tag management on the roadmap.

About AI participation in writing articles

This article, like many others on our site, was created, written and proofread by a team of developers. Of course, not without the participation of AI assistants. We don't hide this and believe that modern systems are already quite good at handling simple tasks and, relatively speaking, writing an article about Viewport yourself is quite strange. It won't come out significantly better and will take a lot of time. But providing basic understanding to beginner webmasters is necessary. Of course, after the article is written by assistants - there's always proofreading, and this is where not one or two people participate, and only after that the article is published.

Ready to Set Up Professional Tracking?

Sign up for a free trial of Statable and get the tools to measure digital effectiveness accurately, from basic tags to server-side analytics.

Ready to take control of your web analytics? Try Statable free for 30 days — no credit card required, full feature access, GDPR-compliant by default. Start your free trial or view a live demo.

Tracking Basics

How We Got Here

Tags

What a Tag Is

Tag Types

Implementation Methods

Pixels

How Pixels Work

Common Uses

Limitations

SDKs

What an SDK Does

Why SDKs Help

Popular SDKs

SDK Setup

Tag Management Systems

The Concept

Google Tag Manager

Core Components

Why TMS Matters

Advanced Capabilities

Putting It Together

Hybrid Architecture

Data Layer

Debugging

Where Tracking Is Heading

Privacy First

What's Next