Homepage Tile Link - Technical Overview

⚠️ Important: This use case demonstrates sponsored brand tiles on browser homepages with simple click-through behavior. When clicked, the tile opens the advertiser's landing page in a new tab - no morphing animation or chat interface.

📺 Live Demo: See this implementation in action at https://demo-aura.affinity.net/homepage-tile-link

Executive Summary

This document outlines how browser publishers can integrate sponsored brand tiles into new tab pages using standard IAB Native Ads 1.2 format. When users click a sponsored tile, they are directly navigated to the advertiser's landing page in a new tab - providing a simple, effective monetization solution for browser homepages.

Key Benefits:

Simple Integration: Straightforward click-through behavior
Direct Navigation: Opens advertiser landing page in new tab
Industry Standard: Uses OpenRTB 2.6 + IAB Native Ads 1.2 specification
Easy Integration: Works with existing ad tech ecosystem (DSPs, SSPs, ad servers)
Performance-Based: Revenue from clicks to advertiser sites
Privacy-First: Contextual targeting without PII requirements
Low Complexity: No chat interface or complex animations

Compare With:

Homepage Tile Agent uses morphing animation to transform into branded chat experience
AI Search Product Ads displays product cards in search results

Use Case Example

User Action: User opens new tab in browser and sees homepage with sponsored Walmart tile

Initial State:

┌─────────────────────────────────────────────────────────────────┐
│                           GLIMPSE                               │
│                  ┌────────────────────────────┐                 │
│                  │ 🔍 Search Google or type URL │               │
│                  └────────────────────────────┘                 │
│     ┌───┐  ┌───┐  ┌───┐  ┌───┐  ┌───┐  ┌───┐  ┌───┐  ┌───┐   │
│     │ ▢ │  │ ▢ │  │ ▢ │  │ ▢ │  │🏪│  │ ▢ │  │ ▢ │  │ ▢ │   │
│     │   │  │   │  │   │  │   │  │AD │  │   │  │   │  │   │   │
│     └───┘  └───┘  └───┘  └───┘  └───┘  └───┘  └───┘  └───┘   │
│     (grey content tiles)   (Walmart)   (grey content)           │
└─────────────────────────────────────────────────────────────────┘

User Clicks Walmart Tile:

Click tracker fires (max 200ms)
New tab opens with Walmart landing page
User lands on advertiser site to browse/shop

Result: Simple, direct navigation to advertiser's website

Why IAB Native Ads for Brand Tiles?

1. Industry Standard

Built on OpenRTB 2.6 and IAB Native Ads 1.2 specification
No custom integrations needed for each brand
Works with existing ad tech ecosystem (DSPs, SSPs, ad servers)
Broad support across the advertising industry

2. Structured Brand Presentation

Brands provide structured data via native assets
Standard asset types ensure consistency and quality
Logo, brand name, and category clearly defined

3. Privacy-First Design

No PII required in bid requests
Contextual targeting based on homepage context
GDPR/CCPA compliant by design

4. Rich Analytics

Track impressions (when tile appears on homepage)
Track clicks (when users click the tile)
Standard tracking mechanisms across all publishers

5. Quality Control

IAB Native specification defines asset requirements
Validation ensures quality before serving
Publisher controls which brands to display

Architecture Overview

Key Points:

Browser provides the homepage - The browser renders the new tab page
Affinity AI Bid API provides brand tiles - standard OpenRTB auction
Direct navigation - Click opens advertiser URL in new tab
Standard tracking - impression and click tracking via OpenRTB

IAB Native Ads Asset Mapping

Brand Tile Native Assets

Following IAB Native Ads 1.2 specification, brand tiles use these standard asset types:

Required Assets:

IAB Asset Type	ID	Data Type	Purpose
Title	1	-	Brand name
Image (Logo)	2	type: 2	Brand logo

Optional Assets:

IAB Asset Type	ID	Data Type	Purpose
Data (Desc)	3	type: 2	Brand category

Native Request Structure

The native request follows IAB Native Ads 1.2 specification:

{
  "ver": "1.2",
  "assets": [
    {
      "id": 1,
      "required": 1,
      "title": {
        "len": 50
      }
    },
    {
      "id": 2,
      "required": 1,
      "img": {
        "type": 2,
        "w": 96,
        "h": 96
      }
    },
    {
      "id": 3,
      "required": 0,
      "data": {
        "type": 2,
        "len": 50
      }
    }
  ]
}

Key Points:

Asset ID 1: Brand name (required, max 50 chars)
Asset ID 2: Brand logo (required, 96x96px, type 2 = logo)
Asset ID 3: Category (optional, max 50 chars, data type 2 = description)

OpenRTB Integration

Note: We use standard OpenRTB 2.6 with IAB Native Ads 1.2 for brand tiles.

Bid Request Structure

Your browser sends standard OpenRTB 2.6 bid requests with native ad placement:

{
  "id": "homepage-tiles-req-001",
  "imp": [
    {
      "id": "imp-1",
      "native": {
        "request": "{\"ver\":\"1.2\",\"assets\":[{\"id\":1,\"required\":1,\"title\":{\"len\":50}},{\"id\":2,\"required\":1,\"img\":{\"type\":2,\"w\":96,\"h\":96}},{\"id\":3,\"data\":{\"type\":2}}]}"
      },
      "bidfloor": 0.5,
      "bidfloorcur": "USD"
    }
  ],
  "site": {
    "id": "tiles-homepage.com",
    "domain": "demo-aura.affinity.net",
    "page": "https://demo-aura.affinity.net/homepage-tile-link"
  },
  "device": {
    "language": "en",
    "geo": {
      "country": "US"
    }
  }
}

Key Request Components:

Request ID: Unique identifier for the bid request
Impressions: Single impression object for one tile slot
Native Request: JSON-encoded IAB Native Ads 1.2 specification
Site: Publisher site information
Device: User device and geo information for targeting

Bid Response Structure

Brands respond with standard IAB Native Ads 1.2 format:

{
  "id": "homepage-tiles-req-001",
  "seatbid": [
    {
      "seat": "veve-bidder",
      "bid": [
        {
          "id": "veve-tile-1",
          "impid": "imp-1",
          "price": 1.5,
          "adm": "{\"native\":{\"ver\":\"1.2\",\"assets\":[{\"id\":1,\"required\":1,\"title\":{\"text\":\"Walmart\"}},{\"id\":2,\"required\":1,\"img\":{\"url\":\"https://static-02.veve.com/96x96/walmart-logo.png\",\"w\":96,\"h\":96}},{\"id\":3,\"data\":{\"type\":2,\"value\":\"Shopping\"}}],\"link\":{\"url\":\"https://ww55.affinity.net/sssdomweb?cid={click_id}\"},\"imptrackers\":[\"https://imptrk.siteplug.com/impTrk.php?cid={click_id}\"]}}",
          "crid": "walmart-tile-001",
          "adomain": ["walmart.com"]
        }
      ]
    }
  ],
  "cur": "USD"
}

Native Response Breakdown:

The adm field contains a JSON-encoded IAB Native Ads 1.2 response:

Link: Click tracking URL with macros - REQUIRED for navigation
Assets:
- Asset 1 (Title): Brand name - "Walmart"
- Asset 2 (Image): Brand logo URL (96x96px)
- Asset 3 (Data/Category): Brand category - "Shopping" (data type 2)
Impression Trackers: Array of impression tracking URLs

Important: The link.url field is required for this use case as it specifies where to navigate when the tile is clicked. The native response can be in the adm field directly or wrapped in a native object for legacy compatibility.

Tile Display Integration

Parsing Native Ad Response

Your browser extracts brand tile information from the IAB Native Ads 1.2 assets:

Parse the JSON-encoded adm field from the bid response
Handle both wrapped ({native: {...}}) and unwrapped formats
Extract native assets by ID:
- Asset ID 1 (Title) → Brand name
- Asset ID 2 (Image) → Brand logo URL (96x96px)
- Asset ID 3 (Data type 2) → Brand category (optional)
- Link URL → Click destination URL (REQUIRED)
- Impression trackers → Array of tracking URLs
Validate all URLs are HTTPS
Validate link.url is present (required for navigation)
Sanitize text content to prevent XSS
Render tile on homepage

Rendering Brand Tile

Display the brand tile on the homepage:

Brand Logo: From Asset ID 2 (96x96px source, scaled to 40px display)
Brand Name: From Asset ID 1 (displayed below logo)
AD Badge: Small "AD" badge in top-right corner
Clickable Tile: Entire tile is clickable

Visual Design:

┌───────────────┐
│ [Logo 40px]   │ ← AD badge
│               │
│  Brand Name   │
└───────────────┘

Loading State:

Gray circle placeholder (80px diameter)
Pulse animation while loading
Fades to brand tile when loaded

Click Behavior

When user clicks the sponsored tile:

Fire Click Tracker: Send beacon to click tracking URL (max 200ms wait)
Open Landing Page: Open link.url in new tab with security flags
Security: Use window.open(url, '_blank', 'noopener,noreferrer')

Implementation:

function handleTileClick(tile: AgentTile) {
  // Fire click tracker
  if (navigator.sendBeacon && tile.clickUrl) {
    const clickUrl = replaceMacros(tile.clickUrl, {
      click_id: generateClickId(),
      imp_id: tile.impId,
    })
    navigator.sendBeacon(clickUrl)
  }

  // Open advertiser URL in new tab
  setTimeout(() => {
    window.open(tile.clickUrl, '_blank', 'noopener,noreferrer')
  }, 50) // Small delay to ensure beacon fires
}

Tracking Implementation

Fire tracking pixels at appropriate times using navigator.sendBeacon() with image pixel fallback:

Impression Trackers: When tile becomes 50% visible in viewport (Intersection Observer)
Click Trackers: When user clicks on tile (max 200ms wait before navigation)

Implementation Details:

Uses Intersection Observer API with 0.5 threshold (50% visibility)
Fires impression only once per tile per session
Fires impression before click if not already fired
All tracking URLs validated as HTTPS
Graceful degradation if tracking fails

Macro Replacement:

Replace macros in tracking URLs:

{click_id} → Generate unique click ID
{imp_id} → Use impression ID from bid

User Experience Flow

1. Homepage Display

User opens new tab in browser
Gray placeholder circle appears while loading tile
Sponsored tile loads with brand logo, name, and AD badge
7 grey content tiles (static, non-interactive) + 1 sponsored tile
Entire sponsored tile is clickable

User clicks sponsored tile
Click trackers fire (max 200ms wait)
New tab opens with advertiser's landing page
User lands on advertiser site

3. Tracking Events

Impression: Fired when tile becomes 50% visible (once per session)
Click: Fired when user clicks tile (before opening URL)

4. Error Handling

Graceful degradation if no tiles returned
Error message displayed if API fails
No mock data fallback - real API only

Benefits for Browser Publishers

Revenue Generation

Performance-Based: Revenue tied to clicks to advertiser sites
Premium Placements: Homepage tiles command premium rates
Brand Partnerships: Direct relationships with major brands
Standard Tracking: Industry-standard impression and click tracking

User Experience

Simple Navigation: Direct path to advertiser content
Fast: No complex animations or loading
Familiar: Standard click-through behavior users expect
Transparent: Clear presentation as sponsored content per IAB guidelines

Technical Advantages

Industry Standard: OpenRTB 2.6 + IAB Native Ads 1.2
Easy Integration: Works with existing ad tech infrastructure
Low Complexity: Simple click-through behavior
Scalable: Handle millions of homepage views per day
Broad Support: Compatible with all major ad platforms

Analytics & Optimization

Standard Metrics: Track impressions, clicks via IAB mechanisms
A/B Testing: Test different tile layouts
Performance Data: Optimize based on click-through rates
Revenue Reporting: Standard programmatic advertising metrics

Implementation Considerations

Quality Control

Asset Validation: Ensure all required native assets are present (title, logo, clickUrl)
HTTPS Validation: All URLs (images, tracking, landing page) must be HTTPS
XSS Prevention: Sanitize all text content before rendering
Image Quality: Validate logo URLs are accessible
Flexible Parsing: Handle both wrapped and unwrapped native response formats
Performance: Target <50ms per tile parsing
URL Validation: Ensure link.url is present and valid

Privacy & Compliance

No PII Required: Contextual targeting only
GDPR Compliant: User consent management
CCPA Compliant: Privacy string support
IAB Guidelines: Follow IAB Native Ads disclosure requirements
Sponsored Labels: Clearly mark tiles as sponsored/ads

Performance

Low Latency: 1000ms timeout for bid request
Image Optimization: Use lazy loading for brand logos
Async Tracking: Fire tracking pixels asynchronously with sendBeacon
Graceful Degradation: Handle no-bid responses gracefully
Performance Targets:
- Bid request construction: <10ms
- Bid API response: <1000ms
- Tile parsing: <50ms per tile
- Impression tracking: <100ms
- Click tracking: <50ms
- URL open: Immediate after tracking
- Page load: <2s complete homepage

Security

New Tab Security: Use noopener,noreferrer flags when opening URLs
URL Validation: Validate all URLs before opening
XSS Prevention: Sanitize all text content
HTTPS Only: Reject non-HTTPS URLs

Demo Implementation

A complete working demo is available at https://demo-aura.affinity.net/homepage-tile-link:

Features:

Real Affinity AI Bid API integration (no mock data)
IAB Native Ads 1.2 format parsing
Direct click-through to advertiser landing page
Intersection Observer impression tracking
Click tracking with sendBeacon
Responsive design (desktop and mobile)
Security flags for new tab opening

Demo Limitations:

Single tile slot (can be expanded to multiple)
No fallback tiles (shows empty state if no bid)

Real Implementation:

Affinity AI Bid API integration
OpenRTB 2.6 protocol
IAB Native Ads 1.2 parsing
Impression/click tracking
Brand tiles from real advertisers

Homepage Tile Agent - Morphing animation to branded chat experience
AI Search Product Ads - Product cards in search results

OpenRTB Components

Request Format - OpenRTB 2.6 bid request format
Response Format - OpenRTB 2.6 bid response format
Native Object - Native ad request structure

External Standards

OpenRTB 2.6 Specification - IAB Tech Lab
IAB Native Ads 1.2 - IAB Tech Lab

Version History

v1.0 (2025-12-19): Initial use case guide
- IAB Native Ads 1.2 specification for brand tiles
- Direct click-through navigation
- Demo implementation details

Conclusion

IAB Native Ads enable browser publishers to monetize homepage tiles through simple, effective click-through advertising. This approach ensures:

Industry Standard: OpenRTB 2.6 + IAB Native Ads 1.2
Easy Integration: Works with all major ad platforms
Simple UX: Direct navigation to advertiser landing pages
Low Complexity: No complex animations or chat interfaces
Strong Revenue: Performance-based monetization
Privacy-First: Contextual targeting without PII
Responsive Design: Adapts to all screen sizes

By using standard IAB Native Ads 1.2 with simple click-through behavior, you can generate revenue from homepage placements while providing users with direct access to advertiser content.

Executive Summary​

Use Case Example​

Why IAB Native Ads for Brand Tiles?​

1. Industry Standard​

2. Structured Brand Presentation​

3. Privacy-First Design​

4. Rich Analytics​

5. Quality Control​

Architecture Overview​

IAB Native Ads Asset Mapping​

Brand Tile Native Assets​

Native Request Structure​

OpenRTB Integration​

Bid Request Structure​

Bid Response Structure​

Tile Display Integration​

Parsing Native Ad Response​

Rendering Brand Tile​

Click Behavior​

Tracking Implementation​

User Experience Flow​

1. Homepage Display​

2. Tile Click → Direct Navigation​

3. Tracking Events​

4. Error Handling​

Benefits for Browser Publishers​

Revenue Generation​

User Experience​

Technical Advantages​

Analytics & Optimization​

Implementation Considerations​

Quality Control​

Privacy & Compliance​

Performance​

Security​

Demo Implementation​

Related Use Cases​

Related Documentation​

OpenRTB Components​

External Standards​

Version History​

Conclusion​