Branded Products

← Formats 🗄️ Backend (SSR) 🖥️ Frontend (CSR)

Sponsored

Nike Air Force 1 '07 (CW2288-111) white/white

94,40 €

Nike Air Max 90

86,40 €

Nike Hoodie Club Fleece (BV2645)

// Format pages - dynamic routing app.get('/formats/:format', async (req, res) => { const formatSlug = req.params.format; // Find format configuration const formatConfig = FORMATS.find(f => f.slug === formatSlug); if (!formatConfig) { return res.status(404).render('404', { requestedFormat: formatSlug }); } // Determine rendering mode from query param // Formats with no SSR equivalent default to frontend mode const frontendOnlyFormats = ['sponsored-products-offers']; const defaultMode = frontendOnlyFormats.includes(formatConfig.slug) ? 'frontend' : 'backend'; const mode = ['backend', 'frontend'].includes(req.query.mode) ? req.query.mode : defaultMode; // Extract debug parameters from URL query string const debugParams = { adbeta: req.query.adbeta || null, test_area: req.query.test_area || null, test_site: req.query.test_site || null, test_kwrd: req.query.test_kwrd || null, test_tid: req.query.test_tid || null, }; // Incoming headers for debug tracking const incomingHeaders = req.headers; if (Object.values(debugParams).some(Boolean)) { console.log('[Server] Debug params:', debugParams); } if (incomingHeaders['x-adp-event-track-id']) { console.log('[Server] Debug tracking ID:', incomingHeaders['x-adp-event-track-id']); } let adData = null; let adData2 = null; // Second slot for sponsored-single-tile let bidderDebugUrl = null; // Only fetch bid server-side for backend mode if (mode === 'backend') { try { // ═══════════════════════════════════════════════════════════════ // SPONSORED SINGLE TILE: Multi-slot request (2 independent tiles) // Mirrors frontend: one bid request with 2 imp objects // ═══════════════════════════════════════════════════════════════ if (formatSlug === 'sponsored-single-tile') { const { slots: slotResults, bidderDebugUrl: debugUrl } = await bidder.fetchMultiSlotBid({ site: 'demo_page', slots: [ { id: 'sponsored-tile', tagId: formatConfig.tagId, containerId: formatConfig.containerId }, { id: 'sponsored-tile-2', tagId: 'product-tile2', containerId: 'sponsored-product-container-2' } ], networkId: formatConfig.networkId, keyvalues: { manufacturer_id: '12345678', npa: 0 }, debugParams, incomingHeaders }); bidderDebugUrl = debugUrl; // Extract per-slot adData const slot1 = slotResults['sponsored-tile']; const slot2 = slotResults['sponsored-tile-2']; adData = slot1?.hasAd ? slot1.adData : null; adData2 = slot2?.hasAd ? slot2.adData : null; // Process shop data for each slot independently [adData, adData2].forEach(data => { if (!data) return; if (typeof data.redirectToOffers === 'undefined') { data.redirectToOffers = true; // default matches frontend } data.shopDataMap = {}; if (data.redirectToOffers === false && data.offers && data.offers.length > 0) { console.log('[Server] FLOW: Sponsored Product (shop data needed)'); const productId = data.offers[0].product_id; if (productId) { const shopProducts = productService.getProductsByIds([productId]); if (shopProducts.length > 0) { const p = shopProducts[0]; data.shopDataMap[productId] = { url: p.url, name: p.name, image: p.image, price: p.price }; } } } else { console.log('[Server] FLOW: Sponsored Offer (ad server data only)'); } }); } // ═══════════════════════════════════════════════════════════════ // SPONSORED PRODUCT SLIDER: Multi-slot request (2 slider slots) // Uses product-tile-slider tagId for horizontal carousel layout // ═══════════════════════════════════════════════════════════════ else if (formatSlug === 'sponsored-product-slider') { const { slots: slotResults, bidderDebugUrl: debugUrl } = await bidder.fetchMultiSlotBid({ site: 'demo_page', slots: [ { id: 'slider-slot-1', tagId: 'product-tile-slider', containerId: 'slider-sponsored-1' }, { id: 'slider-slot-2', tagId: 'product-tile-slider2', containerId: 'slider-sponsored-2' } ], networkId: formatConfig.networkId, keyvalues: { main_category_id: '101', npa: 0 }, debugParams, incomingHeaders }); bidderDebugUrl = debugUrl; const slot1 = slotResults['slider-slot-1']; const slot2 = slotResults['slider-slot-2']; adData = slot1?.hasAd ? slot1.adData : null; adData2 = slot2?.hasAd ? slot2.adData : null; // Enrich shop data for each slot (same logic as sponsored-single-tile) [adData, adData2].forEach(data => { if (!data) return; if (typeof data.redirectToOffers === 'undefined') { data.redirectToOffers = true; // default matches frontend } data.shopDataMap = {}; if (data.redirectToOffers === false && data.offers && data.offers.length > 0) { console.log('[Server] FLOW: Sponsored Product (shop data needed)'); const productId = data.offers[0].product_id; if (productId) { const shopProducts = productService.getProductsByIds([productId]); if (shopProducts.length > 0) { const p = shopProducts[0]; data.shopDataMap[productId] = { url: p.url, name: p.name, image: p.image, price: p.price }; } } } else { console.log('[Server] FLOW: Sponsored Offer (ad server data only)'); } }); } // ═══════════════════════════════════════════════════════════════ // ALL OTHER FORMATS: Single-slot request // ═══════════════════════════════════════════════════════════════ else { const { result: bidResult, bidderDebugUrl: debugUrl } = await bidder.fetchBid({ site: 'demo_page', tagId: formatConfig.tagId, containerId: formatConfig.containerId, networkId: formatConfig.networkId, keyvalues: { manufacturer_id: '12345678', npa: 0 }, debugParams, incomingHeaders }); bidderDebugUrl = debugUrl; adData = bidResult?.hasAd ? bidResult.adData : null; // For branded-products: look up product details using IDs from ad server if (formatSlug === 'branded-products' && adData) { const originalOffers = adData.offers || []; const productIds = originalOffers.map(o => o.product_id).filter(Boolean); console.log('[Server] Looking up product IDs from ad server:', productIds.join(', ')); const shopProducts = productService.getProductsByIds(productIds); adData.shopDataMap = {}; if (shopProducts.length > 0) { shopProducts.forEach(p => { adData.shopDataMap[p.productId] = { url: p.url, name: p.name, image: p.image, price: p.price }; }); console.log('[Server] Shop data loaded for', shopProducts.length, 'products'); } else { console.log('[Server] Product IDs not in shop catalog, shopDataMap empty'); } } } } catch (error) { console.error(`[Server] Error fetching bid for ${formatSlug}:`, error.message); adData = null; adData2 = null; } } console.log(`[Server] Rendering ${formatSlug} in ${mode.toUpperCase()} mode`); res.render(`formats/${formatSlug}`, { adData, adData2, mode, format: formatConfig, formats: FORMATS, sourceCode: SOURCE_CODE_BY_FORMAT[formatSlug] || SOURCE_CODE_BY_FORMAT['brand-store'], bidderDebugUrl: bidderDebugUrl || null }); });

/** * CSR Bidder Client * ═══════════════════════════════════════════════════════════════════════════════ * Fetches ads from Ring DAS CSR bidder for server-side rendering (SSR). * * SUPPORTED FORMATS: * ───────────────────────────────────────────────────────────────────────────── * 1. Brand Store (brand-store) * - Ad server provides: click tracking URL * - Shop provides: ALL product data (logo, price, URL) * * 2. Branded Products (branded-products) * - Ad server provides: bannerImage (logo) + offers[].product_id * - Shop provides: product details fetched using product_id * * ═══════════════════════════════════════════════════════════════════════════════ * * Usage: * const { BidderClient } = require('./lib/bidder-client'); * const bidder = new BidderClient({ networkId: '1746213' }); * const result = await bidder.fetchBid({ * site: 'demo_page', * tagId: 'branded-products', * containerId: 'ad-container' * }); */ // ═══════════════════════════════════════════════════════════════════════════════ // HELPER FUNCTIONS // ═══════════════════════════════════════════════════════════════════════════════ /** * Returns hardcoded shop display data for Brand Store format. * In real implementation, shop would provide this data. */ function getBrandStoreShopData() { return { shopName: 'AD Partner Shop', price: '€899.00', label: 'Ad' }; } /** * Generates unique request ID for bid requests */ function generateRequestId() { return Math.random().toString(16).substring(2, 15) + Math.random().toString(16).substring(2, 15); } // ═══════════════════════════════════════════════════════════════════════════════ // BIDDER CLIENT CLASS // ═══════════════════════════════════════════════════════════════════════════════ class BidderClient { /** * Create a new BidderClient instance * @param {Object} options * @param {string} [options.networkId='1746213'] - Default network ID */ constructor(options = {}) { this.networkId = options.networkId || '1746213'; this.baseUrl = `https://csr.onet.pl/${this.networkId}/bid`; } // ───────────────────────────────────────────────────────────────────────── // REQUEST BUILDING // ───────────────────────────────────────────────────────────────────────── /** * Build OpenRTB-compatible bid request body * * @param {Object} params * @param {string} params.site - Site identifier (e.g., 'demo_page') * @param {string} params.tagId - Slot tag ID ('brand-store' or 'branded-products') * @param {string} params.networkId - Network ID for this request * @param {Object} [params.keyvalues={}] - Additional targeting key-values * @param {Object} [params.debugParams={}] - Debug overrides (adbeta, test_area, test_site, test_kwrd, test_tid) * @returns {Object} OpenRTB bid request body */ buildRequestBody({ site, tagId, networkId, keyvalues = {}, debugParams = {} }) { const effectiveSiteId = debugParams.test_site || site; const effectiveNetworkId = debugParams.test_tid || networkId; const siteExt = {}; if (debugParams.test_area) siteExt.area = debugParams.test_area; if (debugParams.test_kwrd) siteExt.kwrd = debugParams.test_kwrd; return { id: generateRequestId(), imp: [{ id: 'imp-1', tagid: tagId, secure: 1, native: { request: "{}" }, ext: { offers_limit: 10, no_redirect: true // adclick URLs are pixel-only (no redirect); shop handles redirect via href } }], site: { id: effectiveSiteId, ...(Object.keys(siteExt).length > 0 && { ext: siteExt }) }, user: { ext: { npa: false // false = consent given, true = no consent } }, ext: { network: effectiveNetworkId, keyvalues: { kvIV: generateRequestId(), kvIP: generateRequestId(), ...keyvalues }, is_non_prebid_request: true, ...(debugParams.adbeta && { adbeta: debugParams.adbeta }) }, at: 1, tmax: 1000, regs: { gdpr: 1, gpp: '', ext: { dsa: 1 // Request DSA transparency info } } }; } // ───────────────────────────────────────────────────────────────────────── // RESPONSE PARSING // ───────────────────────────────────────────────────────────────────────── /** * Parse a single bid object and extract ad data. * Core parsing logic shared by parseResponse() and fetchMultiSlotBid(). * * @param {Object} bid - Single bid object from seatbid[].bid[] * @param {string} containerId - Container element ID for viewability * @returns {Object|null} { hasAd, adData } or null on error */ parseSingleBid(bid, containerId) { try { const adm = JSON.parse(bid.adm); // DSA (Digital Services Act) transparency info const dsaData = bid?.ext?.dsa || null; const dsaInfo = dsaData ? { advertiser: dsaData.behalf || null, payer: dsaData.paid || null, adrender: dsaData.adrender || 0 } : null; // Click tracking URL (for Brand Store) const metaAdclick = adm?.meta?.adclick; const fieldsClick = adm?.fields?.click; const clickUrl = metaAdclick ? metaAdclick + encodeURIComponent(fieldsClick || '') : (fieldsClick || null); // Branded Products data from ad server const bannerImage = adm?.fields?.bannerImage || null; const urlRedirect = adm?.fields?.urlRedirect || null; const offers = adm?.fields?.feed?.offers || []; // Extract redirectToOffers flag (determines tile link behavior) let redirectToOffers = undefined; if (typeof adm?.fields?.redirectToOffers !== 'undefined') { redirectToOffers = adm.fields.redirectToOffers; } else if (typeof adm?.fields?.feed?.redirectToOffers !== 'undefined') { redirectToOffers = adm.fields.feed.redirectToOffers; } const impressionUrl = bid?.ext?.ems_link; return { hasAd: true, adData: { containerId, adm: bid.adm, bannerImage, urlRedirect, offers, redirectToOffers, dsaInfo, clickUrl, metaAdclick, impressionUrl, adId: adm?.meta?.adid, templateCode: adm?.tplCode, ...getBrandStoreShopData() } }; } catch (error) { console.error('[BidderClient] Error parsing bid:', error.message); return null; } } /** * Parse bid response (single-slot) and extract ad data. * Delegates to parseSingleBid for the first bid found. * * @param {Object} response - Raw bid response from ad server * @param {string} containerId - Container element ID for viewability * @returns {Object|null} Parsed ad data or null if no bid */ parseResponse(response, containerId) { const bid = response?.seatbid?.[0]?.bid?.[0]; if (!bid) { console.log('[BidderClient] No bid in response'); return null; } return this.parseSingleBid(bid, containerId); } // ───────────────────────────────────────────────────────────────────────── // MAIN FETCH METHOD // ───────────────────────────────────────────────────────────────────────── /** * Fetch bid from Ring DAS CSR bidder (single slot) * * @param {Object} params * @param {string} params.site - Site identifier (e.g., 'demo_page') * @param {string} params.tagId - Slot tag ID ('brand-store' or 'branded-products') * @param {string} params.containerId - Container element ID for viewability * @param {string} [params.networkId] - Network ID (overrides default) * @param {Object} [params.keyvalues={}] - Additional targeting parameters * @param {Object} [params.debugParams={}] - Debug overrides (adbeta, test_area, test_site, test_kwrd, test_tid) * @param {Object} [params.incomingHeaders={}] - Incoming request headers (for forwarding x-adp-event-track-id) * @returns {Promise<{result: Object|null, bidderDebugUrl: string}>} */ async fetchBid({ site, tagId, containerId, networkId, keyvalues = {}, debugParams = {}, incomingHeaders = {} }) { const effectiveNetworkId = debugParams.test_tid || networkId || this.networkId; const bidUrl = `https://csr.onet.pl/${effectiveNetworkId}/bid`; const requestBody = this.buildRequestBody({ site, tagId, networkId: effectiveNetworkId, keyvalues, debugParams }); console.log('[BidderClient] ─────────────────────────────────────────'); console.log('[BidderClient] Fetching bid from:', bidUrl); console.log('[BidderClient] Tag ID:', tagId); console.log('[BidderClient] Request:', JSON.stringify(requestBody, null, 2)); // Build full debug URL with encoded request body const encodedData = encodeURIComponent(JSON.stringify(requestBody)); const bidderDebugUrl = `${bidUrl}?data=${encodedData}`; // Forward x-adp-event-track-id header if present const bidderHeaders = {}; const trackId = incomingHeaders['x-adp-event-track-id']; if (trackId) bidderHeaders['X-ADP-EVENT-TRACK-ID'] = trackId; try { const response = await fetch(bidderDebugUrl, { headers: bidderHeaders }); console.log('[BidderClient] Response status:', response.status); // 204 = no-bid (valid response, no ad available) if (response.status === 204) { console.log('[BidderClient] ✗ No bid (204)'); console.log('[BidderClient] ─────────────────────────────────────────'); return { result: null, bidderDebugUrl }; } if (!response.ok) { console.error('[BidderClient] HTTP error:', response.status, response.statusText); return { result: null, bidderDebugUrl }; } const data = await response.json(); console.log('[BidderClient] Response received'); const result = this.parseResponse(data, containerId); if (result) { console.log('[BidderClient] ✓ Ad found'); console.log('[BidderClient] - Banner image:', result.adData.bannerImage ? 'Yes' : 'No'); console.log('[BidderClient] - URL redirect:', result.adData.urlRedirect ? 'Yes' : 'No'); console.log('[BidderClient] - Products:', result.adData.offers?.length || 0); console.log('[BidderClient] - DSA info:', result.adData.dsaInfo ? 'Yes' : 'No'); } else { console.log('[BidderClient] ✗ No ad available'); } console.log('[BidderClient] ─────────────────────────────────────────'); return { result, bidderDebugUrl }; } catch (error) { console.error('[BidderClient] Fetch error:', error.message); return { result: null, bidderDebugUrl }; } } // ───────────────────────────────────────────────────────────────────────── // MULTI-SLOT FETCH (multiple imp objects in a single request) // ───────────────────────────────────────────────────────────────────────── /** * Fetch multiple ad slots in a single bid request. * Mirrors frontend behavior where the SDK sends one request with multiple imp objects. * * @param {Object} params * @param {string} params.site - Site identifier * @param {Array<{id: string, tagId: string, containerId: string}>} params.slots - Slot definitions * @param {string} [params.networkId] - Network ID (overrides default) * @param {Object} [params.keyvalues={}] - Additional targeting parameters * @param {Object} [params.debugParams={}] - Debug overrides (adbeta, test_area, test_site, test_kwrd, test_tid) * @param {Object} [params.incomingHeaders={}] - Incoming request headers (for forwarding x-adp-event-track-id) * @returns {Promise<{slots: Object, bidderDebugUrl: string}>} */ async fetchMultiSlotBid({ site, slots, networkId, keyvalues = {}, debugParams = {}, incomingHeaders = {} }) { const effectiveNetworkId = debugParams.test_tid || networkId || this.networkId; const bidUrl = `https://csr.onet.pl/${effectiveNetworkId}/bid`; const effectiveSiteId = debugParams.test_site || site; const siteExt = {}; if (debugParams.test_area) siteExt.area = debugParams.test_area; if (debugParams.test_kwrd) siteExt.kwrd = debugParams.test_kwrd; const requestBody = { id: generateRequestId(), imp: slots.map((slot, index) => ({ id: slot.id, tagid: slot.tagId, secure: 1, native: { request: "{}" }, ext: { pos: String(index + 1), swidth: 220, no_redirect: true // adclick URLs are pixel-only (no redirect); shop handles redirect via href } })), site: { id: effectiveSiteId, ...(Object.keys(siteExt).length > 0 && { ext: siteExt }) }, user: { ext: { npa: false } }, ext: { network: effectiveNetworkId, keyvalues: { kvIV: generateRequestId(), kvIP: generateRequestId(), ...keyvalues }, is_non_prebid_request: true, ...(debugParams.adbeta && { adbeta: debugParams.adbeta }) }, at: 1, tmax: 1000, regs: { gdpr: 1, gpp: '', ext: { dsa: 1 } } }; console.log('[BidderClient] ─────────────────────────────────────────'); console.log('[BidderClient] Multi-slot bid request:', slots.length, 'slots'); console.log('[BidderClient] Fetching from:', bidUrl); console.log('[BidderClient] Slots:', slots.map(s => s.id).join(', ')); // Build full debug URL with encoded request body const encodedData = encodeURIComponent(JSON.stringify(requestBody)); const bidderDebugUrl = `${bidUrl}?data=${encodedData}`; // Forward x-adp-event-track-id header if present const bidderHeaders = {}; const trackId = incomingHeaders['x-adp-event-track-id']; if (trackId) bidderHeaders['X-ADP-EVENT-TRACK-ID'] = trackId; try { const response = await fetch(bidderDebugUrl, { headers: bidderHeaders }); console.log('[BidderClient] Response status:', response.status); // 204 = no-bid (valid response, no ad available) if (response.status === 204) { console.log('[BidderClient] ✗ No bid (204)'); console.log('[BidderClient] ─────────────────────────────────────────'); return { slots: {}, bidderDebugUrl }; } if (!response.ok) { console.error('[BidderClient] HTTP error:', response.status, response.statusText); return { slots: {}, bidderDebugUrl }; } const data = await response.json(); // Collect all bids by impid const bidsById = {}; for (const seatbid of (data.seatbid || [])) { for (const bid of (seatbid.bid || [])) { bidsById[bid.impid] = bid; } } const results = {}; for (const slot of slots) { const bid = bidsById[slot.id]; if (bid) { const parsed = this.parseSingleBid(bid, slot.containerId); if (parsed) { results[slot.id] = parsed; console.log('[BidderClient] Slot', slot.id, '→ ad found, offers:', parsed.adData.offers?.length || 0); } } else { console.log('[BidderClient] Slot', slot.id, '→ no bid'); } } console.log('[BidderClient] ─────────────────────────────────────────'); return { slots: results, bidderDebugUrl }; } catch (error) { console.error('[BidderClient] Multi-slot fetch error:', error.message); return { slots: {}, bidderDebugUrl: bidUrl }; } } } module.exports = { BidderClient };

<% /** * Branded Products - Backend (SSR) Partial * * DATA FLOW (Hybrid Format): * ───────────────────────────────────────────────────────────────────────────── * 1. Ad Server provides: bannerImage (brand logo) + offers[].product_id * 2. Shop fetches: product details (image, price, name, URL) for each product_id * 3. Shop renders: combined data (logo from ad server + product details from shop) * * For this demo, the server.js fetches from bidder and passes adData here. * In real implementation, shop would fetch product details from its database. * ───────────────────────────────────────────────────────────────────────────── * * Expected adData structure: * { * // FROM AD SERVER (never mutated): * bannerImage: string, // Brand logo URL * urlRedirect: string|null, // Brand logo click destination URL (optional) * metaAdclick: string, // Base URL for click tracking * offers: Array<{ // Original offers from ad server * product_id, * offer_url, // Click tracking parameter (append to metaAdclick) * offer_image, offer_name, offer_price // Fallback display data * }>, * * // FROM SHOP (separate from offers, keyed by product_id): * shopDataMap: { * [productId]: { * url: string, // Shop's product URL (destination) * name: string, // Product name from shop catalog * image: string, // Product image from shop catalog * price: number // Product price from shop catalog * } * }, * * // TRACKING: * dsaInfo: { advertiser, payer }, // DSA transparency info * adm: string, // adm for viewability tracking * containerId: string * } * * NOTE: Number of products is configurable by shop (not limited to 5). */ // Configuration - shop decides how many products to display const MAX_PRODUCTS = 5; /** * Format price in EUR currency */ function formatPrice(price) { return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(price); } /** * Build display-ready product list by merging shop data with ad server offers. * Ad server offers are never mutated — shop data comes from a separate shopDataMap. * * @param {Object} shopDataMap - Shop product data keyed by product_id: { url, name, image, price } * @param {Array} offers - Original offers from ad server (never mutated) * @returns {Array} Products ready for display with tracking URLs */ function getProductsForDisplay(shopDataMap, offers) { return (offers || []).map(offer => { var shop = shopDataMap[offer.product_id] || {}; return { productId: offer.product_id || offer.offer_id, image: shop.image || offer.offer_image, name: shop.name || offer.offer_name, price: shop.price || offer.offer_price, url: shop.url || offer.offer_url, // Per-offer click tracking URL provided directly by the ad server trackingUrl: offer.adclick || '' }; }); } // Get products for display (shop data from shopDataMap, offers from ad server) const products = adData ? getProductsForDisplay(adData.shopDataMap || {}, adData.offers) : []; %> <% if (adData) { %> <div class="branded-products-container" id="<%= adData.containerId || 'branded-products-container' %>">  <div class="sponsored-header"> <span class="sponsored-badge">Sponsored</span> <% if (adData.dsaInfo) { %> <div class="dsa-info-wrapper"> <span class="dsa-info-icon" title="Ad transparency info">i</span> <div class="dsa-info-tooltip"> <div class="dsa-info-row"> <span class="dsa-info-label">Advertiser:</span> <span class="dsa-info-value"><%= adData.dsaInfo.advertiser || 'N/A' %></span> </div> <div class="dsa-info-row"> <span class="dsa-info-label">Paid by:</span> <span class="dsa-info-value"><%= adData.dsaInfo.payer || 'N/A' %></span> </div> </div> </div> <% } %> </div>  <div class="brand-section"> <% if (adData.bannerImage) { %> <% if (adData.urlRedirect) { %>  <a href="<%= adData.urlRedirect %>" target="_blank" rel="noopener nofollow sponsored"> <img class="brand-logo" src="<%= adData.bannerImage %>" alt="Brand Logo"> </a> <% } else { %>  <img class="brand-logo" src="<%= adData.bannerImage %>" alt="Brand Logo"> <% } %> <% } else { %> <div class="brand-logo-placeholder">Brand Logo</div> <% } %> </div>  <div class="products-section"> <% if (products.length > 0) { %> <% // Shop decides how many products to display const displayProducts = products.slice(0, MAX_PRODUCTS); %> <% displayProducts.forEach(function(product) { %>  <a href="<%= product.url %>" class="product-tile" target="_blank" rel="noopener nofollow sponsored" <% if (product.trackingUrl) { %>onclick="new Image().src='<%= product.trackingUrl %>';"<% } %>> <img class="product-image" src="<%= product.image %>" alt="<%= product.name %>"> <div class="product-name"><%= product.name %></div> <div class="product-price"><%= formatPrice(product.price) %></div> </a> <% }); %> <% } else { %>  <% for (let i = 0; i < 3; i++) { %> <div class="product-tile"> <div class="product-image-placeholder">Product <%= i + 1 %></div> <div class="product-name">Sample Product Name</div> <div class="product-price">€99.00</div> </div> <% } %> <% } %> </div> </div>  <script> dlApi.cmd.push(function() { dlApi.registerBidResponse(<%- JSON.stringify(adData.adm) %>, '<%= adData.containerId || 'branded-products-container' %>'); }); </script> <% } else { %>  <div class="no-ad-state"> No ad data available (Backend mode) </div> <% } %>

<div id="branded-products-container" class="branded-products-container"> <div class="loading-state"> <div class="spinner"></div> <span>Loading branded products...</span> </div> </div> <script> (function() { 'use strict'; // ========================================================================= // CONFIGURATION // ========================================================================= const CONFIG = { containerId: 'branded-products-container', maxProducts: 5, // Shop decides how many products to display tplCode: '1746213/Sponsored-Product-Plus', // Mock product service endpoint (simulates shop's product catalog) productApiUrl: '/api/products' }; // ========================================================================= // HELPER FUNCTIONS // ========================================================================= /** * Escape HTML special characters to prevent XSS */ function escapeHtml(text) { if (!text) return ''; const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } /** * Format price in EUR currency */ function formatPrice(price) { return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(price); } /** * Build DSA (Digital Services Act) transparency info HTML */ function buildDsaHtml(dsa) { if (!dsa) return ''; return ` <div class="dsa-info-wrapper"> <span class="dsa-info-icon" title="Ad transparency info">i</span> <div class="dsa-info-tooltip"> <div class="dsa-info-row"> <span class="dsa-info-label">Advertiser:</span> <span class="dsa-info-value">${escapeHtml(dsa.behalf) || 'N/A'}</span> </div> <div class="dsa-info-row"> <span class="dsa-info-label">Paid by:</span> <span class="dsa-info-value">${escapeHtml(dsa.paid) || 'N/A'}</span> </div> </div> </div> `; } // ========================================================================= // SHOP'S PRODUCT DATA FETCHING (MOCK SERVICE) // ========================================================================= /** * Fetch products from shop's product catalog (mock service in this demo) * * @param {Array<string>} productIds - Product IDs to fetch * @returns {Promise<Array>} - Product details from shop catalog */ async function fetchProductsFromMockService(productIds) { console.log('[MockService] ─────────────────────────────────────────'); console.log('[MockService] Fetching products from mock service...'); console.log('[MockService] Requested IDs:', productIds.join(', ')); try { const ids = productIds.slice(0, CONFIG.maxProducts).join(','); const url = `${CONFIG.productApiUrl}?ids=${ids}`; console.log('[MockService] Request URL:', url); const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`); } const data = await response.json(); console.log('[MockService] Response source:', data.source); console.log('[MockService] Products received:', data.count); data.products.forEach((p, i) => { console.log(`[MockService] ${i + 1}. ${p.name} - ${p.formattedPrice}`); }); console.log('[MockService] ─────────────────────────────────────────'); return data.products; } catch (error) { console.error('[MockService] Error:', error.message); console.log('[MockService] ─────────────────────────────────────────'); return []; } } // ========================================================================= // RENDERING // ========================================================================= /** * Build HTML for a single product tile * @param {Object} product - Product with shop data + trackingUrl from ad server */ function buildProductTileHtml(product) { // trackingUrl from ad server for click tracking const trackingOnclick = product.trackingUrl ? `onclick="new Image().src='${product.trackingUrl}';"` : ''; return ` <a href="${escapeHtml(product.url)}" class="product-tile" target="_blank" rel="noopener nofollow sponsored" ${trackingOnclick}> <img class="product-image" src="${escapeHtml(product.image)}" alt="${escapeHtml(product.name)}"> <div class="product-name">${escapeHtml(product.name)}</div> <div class="product-price">${formatPrice(product.price)}</div> </a> `; } /** * Build placeholder HTML when no products available */ function buildPlaceholderHtml(count) { let html = ''; for (let i = 0; i < count; i++) { html += ` <div class="product-tile"> <div class="product-image-placeholder">Product ${i + 1}</div> <div class="product-name">Sample Product Name</div> <div class="product-price">€99.00</div> </div> `; } return html; } /** * Render the complete Branded Products banner * * @param {string} bannerImage - Brand logo URL (from AD SERVER) * @param {Array} products - Product details (from SHOP) * @param {Object} dsaInfo - DSA transparency info (from AD SERVER) * @param {string} urlRedirect - Logo click destination URL (from AD SERVER, optional) */ function renderBrandedProducts(bannerImage, products, dsaInfo, urlRedirect) { const container = document.getElementById(CONFIG.containerId); if (!container) { console.error('[Render] Container not found'); return; } // Build brand section (data from AD SERVER) const brandHtml = bannerImage ? (urlRedirect ? `<a href="${escapeHtml(urlRedirect)}" target="_blank" rel="noopener nofollow sponsored"> <img class="brand-logo" src="${escapeHtml(bannerImage)}" alt="Brand Logo"> </a>` : `<img class="brand-logo" src="${escapeHtml(bannerImage)}" alt="Brand Logo">`) : '<div class="brand-logo-placeholder">Brand Logo</div>'; // Build products section (data from SHOP) const displayProducts = products.slice(0, CONFIG.maxProducts); const productsHtml = displayProducts.length > 0 ? displayProducts.map(buildProductTileHtml).join('') : buildPlaceholderHtml(3); // Render complete banner container.innerHTML = ` <div class="sponsored-header"> <span class="sponsored-badge">Sponsored</span> ${buildDsaHtml(dsaInfo)} </div> <div class="brand-section">  ${brandHtml} </div> <div class="products-section">  ${productsHtml} </div> `; console.log('[Render] Banner rendered with', displayProducts.length, 'products'); } /** * Show empty state when no ad is available */ function renderEmptyState(message) { const container = document.getElementById(CONFIG.containerId); if (container) { container.innerHTML = `<div class="no-ad-state">${escapeHtml(message)}</div>`; } } // ========================================================================= // MAIN: SDK INTEGRATION // ========================================================================= dlApi.cmd.push(function(dlApi) { // Step 2: Fetch ad using fetchNativeAd dlApi.fetchNativeAd({ slot: 'display', // fixed value for Branded Products div: CONFIG.containerId, // container ID for viewability tracking opts: { offers_limit: CONFIG.maxProducts // maximum number of products returned from ad server }, tplCode: CONFIG.tplCode, // fixed value for Branded Products asyncRender: true // manually count impression with ad.render() }).then(async function(ad) { if (!ad) { console.log('[Ad Server] No ad available'); renderEmptyState('No branded products available'); return; } console.log('[Ad Server] Response received:', ad); // ───────────────────────────────────────────────────────────── // STEP A: Extract data from AD SERVER // ───────────────────────────────────────────────────────────── const bannerImage = ad.fields?.bannerImage || ''; // Brand logo const urlRedirect = ad.fields?.urlRedirect || ''; // Logo click URL (optional) const offers = ad.fields?.feed?.offers || []; // Product offers with tracking URLs const dsaInfo = ad.dsa; console.log('[Ad Server] Brand logo:', bannerImage ? 'Yes' : 'No'); console.log('[Ad Server] Offers received:', offers.length); offers.forEach((o, i) => { console.log(`[Ad Server] ${i + 1}. product_id: ${o.product_id}, offer_url: ${o.offer_url ? 'Yes' : 'No'}`); }); // ───────────────────────────────────────────────────────────── // STEP B: Fetch product details from SHOP using ad server IDs // ───────────────────────────────────────────────────────────── const productIds = offers.map(o => o.product_id).filter(Boolean); console.log('[Shop] Looking up product IDs from ad server:', productIds.join(', ')); let products = await fetchProductsFromMockService(productIds); // Fallback: if shop catalog doesn't have these IDs, use offer data directly if (products.length === 0 && offers.length > 0) { console.log('[Shop] Products not found in catalog, using ad server offer data as fallback'); products = offers.map(o => ({ productId: o.product_id, name: o.offer_name, price: o.offer_price, image: o.offer_image, url: o.offer_url })); } // ───────────────────────────────────────────────────────────── // STEP C: Combine shop data with ad server tracking URLs // ───────────────────────────────────────────────────────────── // href = shop URL (destination), onclick = per-offer adclick URL from ad server const productsWithTracking = products.map((product, index) => ({ ...product, trackingUrl: offers[index]?.adclick || '' })); console.log('[Data Merge] Products with tracking URLs:'); productsWithTracking.forEach((p, i) => { console.log(`[Data Merge] ${i + 1}. ${p.name} - tracking: ${p.trackingUrl ? 'Yes' : 'No'}`); }); // ───────────────────────────────────────────────────────────── // STEP D: Render combined data // ───────────────────────────────────────────────────────────── renderBrandedProducts(bannerImage, productsWithTracking, dsaInfo, urlRedirect); // ───────────────────────────────────────────────────────────── // STEP E: Count impression // ───────────────────────────────────────────────────────────── ad.render(); console.log('[Ad Server] Impression counted'); }).catch(function(err) { console.error('[Ad Server] Ad could not be loaded:', err); renderEmptyState('Error loading branded products'); }); // Step 3: Trigger ad request dlApi.fetch(); }); })(); </script>