Geo Banner 2 Widget

Migration Notice: We are transitioning from <bw-widget> to <nw-blocks> tags. While both are currently supported for backward compatibility, <nw-blocks> is now the recommended tag for all new implementations. Existing <bw-widget> implementations will continue to function.

Overview

Geo Banner 2 is an enhanced version of the geo-targeting banner widget with improved TypeScript implementation and optimized rendering. It provides the same geo-aware promotional banner functionality with refined performance characteristics and better type safety.

Key Features:

  • Enhanced Type Safety: Full TypeScript implementation for better reliability
  • Geo-Targeting: Automatic region-specific banner display
  • Performance Optimized: Advanced image loading with fetchpriority and lazy loading
  • Click Tracking: Built-in analytics with tracking parameters
  • SEO Control: Configurable link attributes (rel, target)
  • Responsive Design: Adapts to all screen sizes
  • Cache Optimization: Improved caching strategy for faster delivery

Basic Usage

Expand me...

dcKey 2475c46aa304373cca66259992ceb559, imgUrl /content/cms-images/4e0364d9a9cf4c48f071bb5952e04d0892bb64b9-1237x306.png, hrefValue /go/1xbet-casino/se/homepage?country=ZZ&language=en&wid=id9c8c3b98-4961-453d-b671-58688e51bedc

With Priority Loading

Expand me...

GEO_EXCLUDED: geobanner2, cfRayID a56384163df1845c, short: undefined, product: undefined, country: UK, language: en, currency: undefined, detail: banner "geoBanner2-hero-banner-main" has no variant for locale en

Regional Campaign

Expand me...

dcKey ffe8d377ac09b55fdaa748f3d1b85676, imgUrl /content/cms-images/2ecfdf35ccd867c56a6a0051c3ee69ae761cc1ee-924x300.webp, hrefValue /go/wild-sultan-casino/se/summer-campaign?country=DE&language=de&wid=ide9437e9c-b4a5-478e-af12-4f33064a31e3

Lazy Loading (Below Fold)

Expand me...

dcKey 8155549f3da99343388e4184691dd220, imgUrl /content/cms-images/f53d130145ce10133f184534cbcd70c3897636a7-1600x500.webp, hrefValue /go/interwetten-sport/se/footer-section?country=FR&language=fr&wid=idda12a36b-99ae-4e0b-bac1-4ed535b4950c

Attributes Reference

Attribute Type Required Default Description
id string Yes - Must be “geobanner2”
bannerID string Yes - Unique banner identifier from CMS
language string No “en” ISO 639-1 language code for banner content
country string No “ZZ” ISO 3166-1 country code for geo-targeting
trackinglinktarget string No "" Tracking parameter for analytics
target string No “_blank” Link target attribute (how link opens)
rel string No “nofollow” Link rel attribute for SEO control
loading string No “lazy” Image loading strategy (“lazy” | “eager”)
fetchpriority string No “medium” Image fetch priority (“high” | “low” | “medium”)

Widget Features

Enhanced Type Safety

Geo Banner 2 uses full TypeScript implementation:

  • Type-Safe Props: All attributes strongly typed
  • Runtime Validation: Better error catching
  • IDE Support: Enhanced autocomplete and hints
  • Compile-Time Checks: Catch errors before deployment

Image Loading Optimization

Fetchpriority Strategy:

Value Use Case Example
high Critical above-the-fold banners Hero sections, main promotions
medium Important content (default) Mid-page banners
low Below-the-fold content Footer, sidebar bottom

Loading Strategy:

Value Behavior Best For
eager Load immediately Above-the-fold banners
lazy Load when near viewport Below-the-fold content

Automatic Optimization:

  • High priority automatically uses eager loading
  • Lazy loading adds async decoding for performance
  • Browser-native implementation for best results

Geo-Targeting Capabilities

Country-Based:

  • Target specific countries with ISO codes
  • Use country="ZZ" for global fallback
  • Automatic regional content selection

Language-Based:

  • Display localized banner variants
  • Support for all major languages
  • Automatic translation integration

Click Tracking

URL Structure:

/go/{cloaked-link}/{tracking-target}?wid={widget-id}

Tracking Benefits:

  • Widget-level attribution
  • Campaign performance metrics
  • Position-based analytics
  • Conversion tracking

Common Use Cases

Hero Banner (Critical Load)

<nw-blocks 
  id="geobanner2" 
  bannerID="hero-welcome-2025" 
  language="en" 
  country="UK" 
  fetchpriority="high" 
  loading="eager"
  trackinglinktarget="hero-main"
  rel="nofollow" 
  target="_blank" \>
</nw-blocks>

<nw-blocks 
  id="geobanner2" 
  bannerID="sidebar-bonus-offer" 
  language="en" 
  country="US" 
  loading="lazy"
  trackinglinktarget="sidebar-right"
  rel="nofollow" \>
</nw-blocks>

Multi-Language Campaign

<!-- English UK -->
<nw-blocks 
  id="geobanner2" 
  bannerID="christmas-promo-en" 
  language="en" 
  country="UK" 
  trackinglinktarget="xmas-campaign" \>
</nw-blocks>

<!-- German -->
<nw-blocks 
  id="geobanner2" 
  bannerID="weihnachten-promo-de" 
  language="de" 
  country="DE" 
  trackinglinktarget="xmas-campaign" \>
</nw-blocks>

<!-- French -->
<nw-blocks 
  id="geobanner2" 
  bannerID="noel-promo-fr" 
  language="fr" 
  country="FR" 
  trackinglinktarget="xmas-campaign" \>
</nw-blocks>

Mobile-Optimized Banner

<nw-blocks 
  id="geobanner2" 
  bannerID="mobile-app-download" 
  language="en" 
  country="CA" 
  loading="lazy"
  trackinglinktarget="mobile-banner"
  target="_blank" \>
</nw-blocks>

<nw-blocks 
  id="geobanner2" 
  bannerID="footer-newsletter" 
  language="es" 
  country="ES" 
  loading="lazy" 
  fetchpriority="low"
  trackinglinktarget="footer-cta" \>
</nw-blocks>

<nw-blocks 
  id="geobanner2" 
  bannerID="partner-spotlight-2025" 
  language="en" 
  country="AU" 
  rel="sponsored nofollow"
  trackinglinktarget="sponsored-banner" \>
</nw-blocks>

Best Practices

Performance Optimization

  • Hero Banners: Always use fetchpriority="high" and loading="eager"
  • Above Fold: Prioritize immediately visible banners
  • Below Fold: Use loading="lazy" and fetchpriority="low"
  • Image Format: Use modern formats (WebP, AVIF) in CMS
  • Image Size: Optimize and compress banner images
  • Responsive: Serve appropriate sizes for different screens

Geo-Targeting Strategy

  • Create country-specific variants for major markets
  • Use language parameter for proper localization
  • Maintain global fallback (country="ZZ")
  • Test banners across different regions
  • Consider time zones for time-sensitive campaigns

SEO and Compliance

  • Use rel="nofollow" for affiliate banners (default)
  • Use rel="sponsored" for paid promotional content
  • Set target="_blank" for external links (default)
  • Ensure banner images have descriptive alt text
  • Use clear banner IDs for content identification

Tracking Implementation

  • Use descriptive tracking targets for clarity
  • Maintain consistent naming conventions
  • Track by position (hero, sidebar, footer)
  • Include campaign identifiers
  • Monitor click-through rates by banner

Cache Optimization

  • Widget includes cache key for debugging
  • Data cached per banner/country/language combination
  • Automatic cache invalidation on updates
  • Fast delivery through KV storage

Advanced Configuration

Priority Loading Matrix

Position Fetchpriority Loading Use Case
Hero Section high eager Main promotional banner
Top Content high eager Important above-fold
Mid-Page medium lazy In-content promotions
Sidebar medium lazy Secondary content
Footer low lazy Lowest priority banners 
<!-- Affiliate banner (default) -->
<nw-blocks id="geobanner2" bannerID="..." rel="nofollow" \></nw-blocks>

<!-- Sponsored content -->
<nw-blocks id="geobanner2" bannerID="..." rel="sponsored" \></nw-blocks>

<!-- Sponsored + nofollow combination -->
<nw-blocks id="geobanner2" bannerID="..." rel="sponsored nofollow" \></nw-blocks>

<!-- User-generated content -->
<nw-blocks id="geobanner2" bannerID="..." rel="ugc" \></nw-blocks>

<!-- Trusted partner -->
<nw-blocks id="geobanner2" bannerID="..." rel="follow" \></nw-blocks>

Tracking Strategies

By Page Type:

<nw-blocks id="geobanner2" bannerID="..." trackinglinktarget="homepage" \></nw-blocks>
<nw-blocks id="geobanner2" bannerID="..." trackinglinktarget="review-page" \></nw-blocks>
<nw-blocks id="geobanner2" bannerID="..." trackinglinktarget="comparison" \></nw-blocks>

By Position:

<nw-blocks id="geobanner2" bannerID="..." trackinglinktarget="hero-section" \></nw-blocks>
<nw-blocks id="geobanner2" bannerID="..." trackinglinktarget="sidebar-top" \></nw-blocks>
<nw-blocks id="geobanner2" bannerID="..." trackinglinktarget="footer-banner" \></nw-blocks>

By Campaign:

<nw-blocks id="geobanner2" bannerID="..." trackinglinktarget="summer-2025" \></nw-blocks>
<nw-blocks id="geobanner2" bannerID="..." trackinglinktarget="black-friday" \></nw-blocks>
<nw-blocks id="geobanner2" bannerID="..." trackinglinktarget="welcome-bonus" \></nw-blocks>

Data Requirements

Sanity CMS Structure

Banner configuration in Sanity CMS:

{
  bannerID: "showcase-test-banners-20250909",
  brand: {
    name: "Casino Brand",
    cloakedLink: "brand-casino"
  },
  image: {
    url: "https://cdn.../banner-image.webp",
    alt: "Promotional Banner"
  },
  targetCountries: ["UK", "US", "DE", "FR"],
  targetLanguages: ["en", "de", "fr"],
  startDate: "2025-09-09",
  endDate: "2025-12-31",
  isActive: true,
  clickTrackingEnabled: true
}

Required Fields:

  • bannerID: Unique identifier
  • brand.cloakedLink: Brand link
  • image.url: Banner image URL
  • image.alt: Accessibility text

Optional Fields:

  • targetCountries: Geo-targeting
  • targetLanguages: Language variants
  • startDate/endDate: Campaign scheduling
  • isActive: Activation status

KV Storage

Enhanced caching strategy:

  • Key: GEO_BANNER_2:{bannerID}:{country}:{language}
  • TTL: 1 hour
  • Cache Key: Included for debugging
  • Invalidation: Automatic on CMS update

Error Handling

Missing Banner

If banner ID doesn’t exist:

  • No banner rendered
  • Check banner ID in CMS
  • Verify spelling and format
  • Ensure banner is active

Type Errors

If invalid attributes provided:

  • TypeScript catches at compile time
  • Runtime validation for dynamic values
  • Console warnings for development
  • Graceful degradation in production

Geo-Targeting Issues

If banner unavailable for region:

  • Falls back to global banner if configured
  • Check targeting rules in CMS
  • Verify country/language codes
  • Review geo-targeting configuration

Backward Compatibility

All examples above use the new <nw-blocks> tag. For backward compatibility, you can still use <bw-widget>:

<!-- Old syntax (still supported) -->
<bw-widget 
  id="geobanner2" 
  bannerID="showcase-test-banners-20250909" 
  language="en" 
  country="ZZ" 
  rel="nofollow" 
  target="_blank" 
  trackinglinktarget="homepage" \>
</bw-widget>

<!-- New syntax (recommended) -->
<nw-blocks 
  id="geobanner2" 
  bannerID="showcase-test-banners-20250909" 
  language="en" 
  country="ZZ" 
  rel="nofollow" 
  target="_blank" 
  trackinglinktarget="homepage" \>
</nw-blocks>

Both tags work identically, but <nw-blocks> is recommended for all new implementations.