Geo Banner 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

The Geo Banner widget displays location-aware promotional banners that automatically adapt content based on user geography. It provides a powerful way to show region-specific casino promotions, bonuses, and campaigns with optimized image loading and full tracking integration.

Key Features:

  • Geo-Targeting: Automatically displays region-specific banners based on country/language
  • Performance Optimized: Advanced image loading with fetchpriority and lazy loading support
  • Click Tracking: Built-in analytics with customizable tracking parameters
  • SEO Control: Configurable link attributes (rel, target)
  • Responsive Images: Automatically adapts to screen sizes
  • Banner Management: Centralized banner configuration via CMS
  • Brand Integration: Links to casino brands with cloaked URLs

Basic Usage

Expand me...

With Tracking Target

Expand me...

With Priority Loading

Expand me...

Lazy Loading (Below Fold)

Expand me...

Attributes Reference

Attribute Type Required Default Description
id string Yes - Must be “geobanner”
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”)

Banner IDs are unique identifiers configured in Sanity CMS:

Naming Convention:

{campaign-name}-{date}
{position}-{type}-{variation}

Examples:

  • geo-banner-demo-20250605 - Demo banner from June 5, 2025
  • summer-promo-2025 - Summer promotion campaign
  • hero-banner-main - Main hero section banner
  • sidebar-promo-new-users - Sidebar banner for new users
  • footer-banner-welcome-bonus - Footer welcome bonus banner

Best Practices:

  • Use descriptive names that indicate purpose
  • Include date for time-sensitive campaigns
  • Use consistent naming across campaigns
  • Avoid special characters except hyphens

Image Loading Optimization

Fetchpriority

Controls resource loading priority for optimal performance:

Value Use Case Example
high Above-the-fold hero banners Main page headers, hero sections
medium Important but not critical (default) Mid-page banners, featured promotions
low Below-the-fold content Footer banners, sidebar bottom

Example Usage:

<!-- Hero banner - load immediately -->
<nw-blocks id="geobanner" bannerID="hero-banner" fetchpriority="high" loading="eager" \>
</nw-blocks>

<!-- Sidebar banner - lower priority -->
<nw-blocks id="geobanner" bannerID="sidebar-banner" fetchpriority="low" loading="lazy" \>
</nw-blocks>

Loading Strategy

Controls when images are loaded:

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

Automatic Optimization:

  • If fetchpriority="high", loading automatically becomes “eager”
  • If loading="lazy", also adds decoding="async" for performance
  • Browser-native lazy loading for optimal performance

Performance Tips:

<!-- Hero banner (immediate load) -->
<nw-blocks id="geobanner" bannerID="hero" fetchpriority="high" \>
</nw-blocks>

<!-- Mid-page banner (default lazy) -->
<nw-blocks id="geobanner" bannerID="mid-page" \>
</nw-blocks>

<!-- Footer banner (explicit lazy) -->
<nw-blocks id="geobanner" bannerID="footer" loading="lazy" fetchpriority="low" \>
</nw-blocks>

Geo-Targeting

Country-Based Targeting

Banners can be configured to display based on user location:

<!-- UK-specific banner -->
<nw-blocks id="geobanner" bannerID="uk-welcome-bonus" country="UK" \>
</nw-blocks>

<!-- German banner -->
<nw-blocks id="geobanner" bannerID="de-freispiele" country="DE" language="de" \>
</nw-blocks>

<!-- French banner -->
<nw-blocks id="geobanner" bannerID="fr-bonus-bienvenue" country="FR" language="fr" \>
</nw-blocks>

Multi-Region Banners

Use country="ZZ" for global/fallback banners:

<!-- Global banner (any country) -->
<nw-blocks id="geobanner" bannerID="global-promo" country="ZZ" \>
</nw-blocks>

Language Variants

Display language-specific versions:

<!-- English version -->
<nw-blocks id="geobanner" bannerID="welcome-2025" language="en" country="UK" \>
</nw-blocks>

<!-- Spanish version -->
<nw-blocks id="geobanner" bannerID="bienvenida-2025" language="es" country="ES" \>
</nw-blocks>

Click Tracking

Tracking URL Structure

Banners generate tracking URLs automatically:

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

Example:

<nw-blocks 
  id="geobanner" 
  bannerID="main-promo" 
  trackinglinktarget="homepage" \>
</nw-blocks>

<!-- Generates: /go/brand-casino/homepage?wid=geobanner -->

Tracking Strategies

By Page Type:

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

By Position:

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

By Campaign:

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

Common Use Cases

Hero Banner (Above the Fold)

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

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

Multi-Language Campaign

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

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

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

<nw-blocks 
  id="geobanner" 
  bannerID="footer-subscribe" 
  language="en" 
  country="CA" 
  loading="lazy" 
  fetchpriority="low"
  trackinglinktarget="footer-cta"
  rel="nofollow" \>
</nw-blocks>

Time-Sensitive Campaign

<nw-blocks 
  id="geobanner" 
  bannerID="black-friday-2025-11-29" 
  language="en" 
  country="US" 
  fetchpriority="high"
  trackinglinktarget="black-friday-special"
  rel="nofollow" 
  target="_blank" \>
</nw-blocks>

<nw-blocks 
  id="geobanner" 
  bannerID="sponsored-partner-banner" 
  language="en" 
  country="UK" 
  rel="sponsored nofollow"
  trackinglinktarget="sponsored-placement" \>
</nw-blocks>

Best Practices

Performance Optimization

  • Hero Banners: Use fetchpriority="high" and loading="eager"
  • Above Fold: Set high priority for immediately visible banners
  • Below Fold: Use loading="lazy" and fetchpriority="low"
  • Sidebar/Footer: Always use lazy loading
  • Image Size: Optimize banner images (WebP format, compressed)
  • Responsive Images: Ensure banners adapt to screen sizes

Geo-Targeting Strategy

  • Create country-specific banner variants for major markets
  • Use language parameter to show localized content
  • Maintain global fallback banner (country="ZZ")
  • Test banners in different regions before launch
  • Consider cultural differences in banner design

SEO and Compliance

  • Use rel="nofollow" for affiliate banners (default)
  • Use rel="sponsored" for paid promotional content
  • Set target="_blank" to open in new tab (default)
  • Include alt text in banner images (handled by CMS)
  • Use descriptive banner IDs for content clarity

Tracking Implementation

  • Use descriptive tracking targets for analytics clarity
  • Maintain consistent naming across campaigns
  • Track by position (hero, sidebar, footer)
  • Include campaign identifiers in tracking
  • Monitor conversion rates per banner position
  • Use clear, descriptive banner IDs
  • Include dates in time-sensitive campaigns
  • Keep banner content updated in CMS
  • Test banner loading in different browsers
  • Monitor banner performance metrics

Accessibility

  • Ensure banner images have descriptive alt text (CMS)
  • Maintain sufficient color contrast
  • Avoid flashing or animated banners
  • Make banners keyboard-navigable
  • Test with screen readers

Advanced Configuration

Priority Loading Matrix

Position Fetchpriority Loading Use Case
Hero Section high eager Main promotional banner
Top Sidebar medium lazy Important secondary content
Mid-Page medium lazy In-content promotions
Bottom Sidebar low lazy Lower priority content
Footer low lazy Lowest priority banners 
<!-- Affiliate banner -->
<nw-blocks id="geobanner" bannerID="..." rel="nofollow" \></nw-blocks>

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

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

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

<!-- Trusted partner (follow link) -->
<nw-blocks id="geobanner" bannerID="..." rel="follow" \></nw-blocks>

Target Attribute Options

<!-- Open in new tab (default) -->
<nw-blocks id="geobanner" bannerID="..." target="_blank" \></nw-blocks>

<!-- Open in same tab -->
<nw-blocks id="geobanner" bannerID="..." target="_self" \></nw-blocks>

<!-- Open in parent frame -->
<nw-blocks id="geobanner" bannerID="..." target="_parent" \></nw-blocks>

<!-- Open in top window -->
<nw-blocks id="geobanner" bannerID="..." target="_top" \></nw-blocks>

Data Requirements

Sanity CMS Structure

Banner configuration in Sanity CMS:

{
  bannerID: "geo-banner-demo-20250605",
  brand: {
    name: "Casino Brand",
    cloakedLink: "brand-casino"
  },
  image: {
    url: "https://cdn.../banner-image.webp",
    alt: "Welcome Bonus Banner"
  },
  targetCountries: ["UK", "DE", "FR"],
  targetLanguages: ["en", "de", "fr"],
  startDate: "2025-06-05",
  endDate: "2025-12-31",
  isActive: true,
  clickTrackingEnabled: true
}

Required Fields:

  • bannerID: Unique identifier
  • brand.cloakedLink: Link to casino brand
  • image.url: Banner image URL
  • image.alt: Alt text for accessibility

Optional Fields:

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

KV Storage

Banner data is cached for fast delivery:

  • Key: GEO_BANNER:{bannerID}:{country}:{language}
  • TTL: 1 hour
  • Invalidation: On banner update in CMS

Error Handling

Missing Banner

If banner ID doesn’t exist:

  • No banner displayed
  • Check banner ID spelling
  • Verify banner exists in CMS
  • Ensure banner is active

Invalid Configuration

If required attributes missing:

  • Widget may not render
  • Check all required attributes provided
  • Verify attribute names (case-sensitive)

Geo-Targeting Mismatch

If banner not available for region:

  • Fallback to global banner if configured
  • Check country/language targeting in CMS
  • Verify geo-targeting rules

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="geobanner" 
  language="fr" 
  country="ZZ" 
  bannerID="geo-banner-demo-20250605" 
  rel="nofollow" 
  target="_blank" \>
</bw-widget>

<!-- New syntax (recommended) -->
<nw-blocks 
  id="geobanner" 
  language="fr" 
  country="ZZ" 
  bannerID="geo-banner-demo-20250605" 
  rel="nofollow" 
  target="_blank" \>
</nw-blocks>

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