⚡ Global AdTech Dynamic Ads Engine

A high-performance, modular AdTech display banner engine. Programmed in pure Vanilla JavaScript and utilizing the GSAP (GreenSock) animation suite for hardware-accelerated rendering. Built with a manifest-driven JSON feed model, allowing real-time product updates and multi-language support without redeploys.

---

📈 Business Case & Real-World Impact

Global brands face strict loading requirements for programmatic display ads. Slow banners hurt page load times, damage publisher SEO, and yield poor click-through rates. Furthermore, updating products or translation copy manually across multiple banner sizes (IAB standards) is slow and prone to errors.

The Solution:

I architected a lightweight, zero-dependency standalone ad engine:

• 0.4s Average Load Time: Raw Javascript without heavy frameworks (Next, React) ensure sub-millisecond execution.
• GSAP Powered Timelines: Fluid, hardware-accelerated animations running at 60 FPS even on lower-end mobile devices.
• Dynamic JSON Feed: Configurable properties (feed.json) containing active product listings, CTAs, colors, and layout guidelines.
• Multiple Layout Modes: Carousel (slides with auto-rotation) or Static Product Grid, toggled programmatically via URL search parameters.
• IAB Banner Size Compliant: Layout structures configured for Skyscraper (160x600), Medium Rectangle (300x250), Half Page (300x600), Leaderboard (728x90), and Mobile Banner (320x50).

Results:

• Used to serve 20+ countries for multinational cosmetic brands (e.g. L'Oréal group).
• 0.4s load speeds (well below industry benchmarks).
• 40% increase in user interaction and CTR (Click-Through Rate) over benchmark.

---

📸 Screenshots

Here is a preview of the rendering formats:

Dynamic Carousel Banner	Static Grid Mode

---

🏗️ Technical Architecture & Directory Structure

global-adtech-dynamic-ads-vanillajs/
├── data/
│   ├── feed.json          # Live product listings, logo paths, theme colors
│   └── products.js        # Vanilla parser converting JSON properties to HTML
├── half-page/             # 300x600 Layout Assets & styles
├── leaderboard/           # 728x90 Layout Assets & styles
├── medium-rect/           # 300x250 Layout Assets & styles
├── mobile-banner/         # 320x50 Layout Assets & styles
└── skyscraper/            # 160x600 Layout Assets & styles

Manifest-Driven Architecture:

The layout and contents are declared in data/feed.json. The JS engine parses this file at initialization, injecting elements dynamically:

{
  "products": [
    {
      "id": 1,
      "name": "Classic Retro-X Fleece",
      "price": "$199.00",
      "image": "../assets/images/fleece.png",
      "url": "https://www.patagonia.com/product/..."
    }
  ],
  "settings": {
    "headline": "Warmth for the Wilderness",
    "cta_text": "Shop Now",
    "cta_style": "fill",
    "background_color": "#ffffff",
    "auto_slide_interval": 4000
  }
}

---

⚙️ Setup & Local Execution

No compilations or dependencies are needed to run! The project runs directly in any browser.

1. Clone this repository.
2. Serve the directory using any local web server (e.g., VS Code Live Server, python http server, or Node http-server):

   # Using Python 3
   python -m http.server 8000
   
   # Using Node.js
   npx http-server -p 8000

3. Access any banner size directly in your browser:
   • Medium Rectangle (300x250): http://localhost:8000/medium-rect/index.html
   • Skyscraper (160x600): http://localhost:8000/skyscraper/index.html

Toggling Layouts via URL Parameters:

Add query params to switch visual modes:

• Carousel (Default): http://localhost:8000/medium-rect/index.html?layout=carousel
• Static Grid: http://localhost:8000/medium-rect/index.html?layout=grid

---

🇧🇷 Resumo em Português

O Motor AdTech Global é uma engine de anúncios dinâmicos de alta performance focada em conversão e velocidade de carregamento.

• Problema: Anúncios gráficos globais precisam carregar em milissegundos e suportar atualizações constantes de produtos e idiomas sem necessidade de novos deploys.
• Solução: Arquitetura Vanilla JavaScript puro que consome dados de um feed JSON local/remoto e aplica animações fluidas 60 FPS com a biblioteca GSAP, respeitando os principais padrões do IAB.
• Resultados: Tempo médio de carregamento de 0.4s, servindo mais de 20 países para marcas globais e gerando 40% mais interações em comparação aos benchmarks tradicionais.

---

Developed with ❤️ by João Melo