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

dcKey bc2654b62738618c38f1ebf80d0ab291, imgUrl /content/cms-images/7b08b0d55770e163bd347cc85a73b129a11ee256-850x450.webp, hrefValue /go/all-right-casino/se/homepage?country=ZZ&language=fr&wid=id515bedc2-637a-4b34-96d1-85bde96bfc93

With Tracking Target

Expand me...

With Priority Loading

Expand me...

Lazy Loading (Below Fold)

Expand me...

dcKey c95ef9072cb65c25e96d916d03fdedc2, imgUrl /content/cms-images/ef29d509fa903436008bafc41e6f87fd834f8b08-1000x272.webp, hrefValue /go/22bet-sport/se/sidebar?country=DE&language=de&wid=id59d759fd-5c75-42a8-84c1-0bf4e748f24e

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.