Branded Products
Loading branded products...
// 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
const mode = ['backend', 'frontend'].includes(req.query.mode)
? req.query.mode
: 'backend'; // Default to backend (SSR)
let adData = null;
// Only fetch bid server-side for backend mode
if (mode === 'backend') {
try {
const bidResult = await bidder.fetchBid({
site: 'demo_page',
tagId: formatConfig.tagId,
containerId: formatConfig.containerId,
networkId: formatConfig.networkId, // Use format-specific network ID
keyvalues: {
manufacturer_id: '12345678',
npa: 0 // 0 - user has all required consent, 1 - user has not given consent
}
});
adData = bidResult?.hasAd ? bidResult.adData : null;
// For branded-products: use mock product service
// This simulates how a real shop would fetch product details from their catalog
if (formatSlug === 'branded-products' && adData) {
console.log('[Server] Using mock product service for branded-products...');
const mockProducts = productService.getProductsByIds(
IdealoClient.getDemoProductIds().slice(0, 5)
);
const mockOffers = productService.toOfferFormat(mockProducts);
// Merge mock product data with original offer_url from ad server (for tracking)
// - product_url: URL produktu z mock danych (dla href)
// - offer_url: tracking URL z ad servera (dla onclick)
const originalOffers = adData.offers || [];
adData.offers = mockOffers.map((mockOffer, index) => ({
...mockOffer,
// Product URL from mock data (destination link)
product_url: mockOffer.offer_url,
// Tracking URL from ad server (click tracking)
offer_url: originalOffers[index]?.offer_url || ''
}));
adData.mockProductsUsed = true;
console.log('[Server] Mock products integrated:', mockProducts.length);
}
} catch (error) {
console.error(`[Server] Error fetching bid for ${formatSlug}:`, error.message);
adData = null;
}
}
console.log(`[Server] Rendering ${formatSlug} in ${mode.toUpperCase()} mode`);
res.render(`formats/${formatSlug}`, {
adData,
mode,
format: formatConfig,
formats: FORMATS,
sourceCode: SOURCE_CODE_BY_FORMAT[formatSlug] || SOURCE_CODE_BY_FORMAT['brand-store']
});
});/**
* 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
* @returns {Object} OpenRTB bid request body
*/
buildRequestBody({ site, tagId, networkId, keyvalues = {} }) {
return {
id: generateRequestId(),
imp: [{
id: 'imp-1',
tagid: tagId,
secure: 1,
native: { request: "{}" },
ext: {
offers_limit: 10
}
}],
site: {
id: site
},
user: {
ext: {
npa: false // false = consent given, true = no consent
}
},
ext: {
network: networkId,
keyvalues: {
kvIV: generateRequestId(),
kvIP: generateRequestId(),
...keyvalues
},
is_non_prebid_request: true
},
at: 1,
tmax: 1000,
regs: {
gdpr: 1,
gpp: '',
ext: {
dsa: 1 // Request DSA transparency info
}
}
};
}
// ─────────────────────────────────────────────────────────────────────────
// RESPONSE PARSING
// ─────────────────────────────────────────────────────────────────────────
/**
* Parse bid response and extract ad data
*
* DATA SOURCES:
* ─────────────────────────────────────────────────────────────────────────
* FROM AD SERVER (returned in response):
* - bannerImage: Brand logo URL
* - offers[]: Array with product_id for each product
* - dsaInfo: DSA transparency information
* - clickUrl: Click tracking URL
* - rawResponse: Full response for viewability tracking
*
* FROM SHOP (must be fetched separately using product_id):
* - Product image, name, price, URL
*
* For demo purposes, offers contain full product data (simulating shop lookup).
* ─────────────────────────────────────────────────────────────────────────
*
* @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) {
try {
const bid = response?.seatbid?.[0]?.bid?.[0];
if (!bid) {
console.log('[BidderClient] No bid in response');
return null;
}
// Parse adm (it's a JSON string containing ad creative data)
const adm = JSON.parse(bid.adm);
// ─────────────────────────────────────────────────────────────────
// EXTRACT DATA FROM AD SERVER
// ─────────────────────────────────────────────────────────────────
// 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 && fieldsClick)
? metaAdclick + encodeURIComponent(fieldsClick)
: null;
// Branded Products data from ad server
const bannerImage = adm?.fields?.bannerImage || null; // Brand logo
const offers = adm?.fields?.feed?.offers || []; // Product IDs (+ demo data)
// Impression tracking URL
const impressionUrl = bid?.ext?.ems_link;
// ─────────────────────────────────────────────────────────────────
// BUILD RESPONSE OBJECT
// ─────────────────────────────────────────────────────────────────
return {
hasAd: true,
adData: {
// Container for viewability tracking
containerId,
// Full response for dlApi.registerBidResponse()
rawResponse: response,
// ─────────────────────────────────────────────────────────
// FROM AD SERVER:
// ─────────────────────────────────────────────────────────
// Brand logo URL (render directly)
bannerImage,
// Product IDs from ad server
// In real implementation: use product_id to fetch from shop's DB
// For demo: contains full product data (simulating shop lookup)
offers,
// DSA transparency info
dsaInfo,
// Click tracking
clickUrl,
metaAdclick, // Base URL for constructing tracking URLs
impressionUrl,
// Metadata
adId: adm?.meta?.adid,
templateCode: adm?.tplCode,
// ─────────────────────────────────────────────────────────
// FROM SHOP (Brand Store only):
// ─────────────────────────────────────────────────────────
...getBrandStoreShopData()
}
};
} catch (error) {
console.error('[BidderClient] Error parsing response:', error.message);
return null;
}
}
// ─────────────────────────────────────────────────────────────────────────
// MAIN FETCH METHOD
// ─────────────────────────────────────────────────────────────────────────
/**
* Fetch bid from Ring DAS CSR bidder
*
* @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
* @returns {Promise<Object|null>} Bid result or null if no ad
*/
async fetchBid({ site, tagId, containerId, networkId, keyvalues = {} }) {
const effectiveNetworkId = networkId || this.networkId;
const bidUrl = `https://csr.onet.pl/${effectiveNetworkId}/bid`;
const requestBody = this.buildRequestBody({
site,
tagId,
networkId: effectiveNetworkId,
keyvalues
});
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));
try {
// Send as GET request with body in data= parameter (as per documentation)
const encodedData = encodeURIComponent(JSON.stringify(requestBody));
const response = await fetch(`${bidUrl}?data=${encodedData}`);
console.log('[BidderClient] Response status:', response.status);
if (!response.ok) {
console.error('[BidderClient] HTTP error:', response.status, response.statusText);
return null;
}
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] - 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;
} catch (error) {
console.error('[BidderClient] Fetch error:', error.message);
return null;
}
}
}
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:
* bannerImage: string, // Brand logo URL
* metaAdclick: string, // Base URL for click tracking
* offers: Array<{ // Product offers with tracking URLs
* product_id,
* offer_url // Click tracking parameter (append to metaAdclick)
* }>,
*
* // FROM SHOP (simulated for demo with offer data):
* products: Array<{
* productId: string,
* image: string,
* name: string,
* price: number,
* url: string, // Shop's product URL (destination)
* trackingUrl: string // Ad server tracking URL (metaAdclick + offer_url)
* }>,
*
* // TRACKING:
* dsaInfo: { advertiser, payer }, // DSA transparency info
* rawResponse: object, // Full response for viewability
* 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);
}
/**
* DEMO: Simulate fetching product details from shop's database
* In real implementation, this happens in server.js before rendering
*
* IMPORTANT: In production:
* - url: comes from YOUR shop's product database (destination)
* - trackingUrl: metaAdclick + encodeURIComponent(offer_url) (click tracking)
*/
function getProductsFromShop(offers, metaAdclick) {
// For demo: use offer data directly (simulating shop lookup)
// Note: In real implementation, 'url' would be fetched from shop's database
return (offers || []).map(offer => ({
productId: offer.product_id || offer.offer_id,
image: offer.offer_image,
name: offer.offer_name,
price: offer.offer_price,
url: offer.product_url || offer.offer_url, // Product URL (destination) - prefer product_url if available
// Construct tracking URL: base URL + encoded offer_url parameter
// If metaAdclick is empty, use offer_url directly (without encoding)
trackingUrl: metaAdclick
? metaAdclick + encodeURIComponent(offer.offer_url || '')
: (offer.offer_url || '')
}));
}
// Get products (from shop's database, simulated for demo)
const products = adData ? getProductsFromShop(adData.offers, adData.metaAdclick) : [];
%>
<% if (adData) { %>
<div class="branded-products-container" id="<%= adData.containerId || 'branded-products-container' %>">
<!-- ═══════════════════════════════════════════════════════════════════
HEADER: Sponsored badge + DSA info (from AD SERVER)
═══════════════════════════════════════════════════════════════════ -->
<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>
<!-- ═══════════════════════════════════════════════════════════════════
BRAND SECTION: Logo from AD SERVER
═══════════════════════════════════════════════════════════════════ -->
<div class="brand-section">
<% if (adData.bannerImage) { %>
<!-- Brand logo URL provided by ad server -->
<img class="brand-logo" src="<%= adData.bannerImage %>" alt="Brand Logo">
<% } else { %>
<div class="brand-logo-placeholder">Brand Logo</div>
<% } %>
</div>
<!-- ═══════════════════════════════════════════════════════════════════
PRODUCTS SECTION: Details from SHOP (fetched using product_id)
═══════════════════════════════════════════════════════════════════ -->
<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) { %>
<!--
Product data comes from SHOP's database
(looked up using product_id from ad server)
Click tracking URL (trackingUrl) comes from AD SERVER
-->
<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 { %>
<!-- Placeholder when no products available -->
<% 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>
<!-- ═══════════════════════════════════════════════════════════════════════
TRACKING: Register bid response for viewability measurement
═══════════════════════════════════════════════════════════════════════ -->
<script>
dlApi.cmd.push(function() {
var rawResponse = <%- JSON.stringify(adData.rawResponse || {}) %>;
if (rawResponse && Object.keys(rawResponse).length > 0) {
dlApi.registerBidResponse(rawResponse, '<%= adData.containerId || 'branded-products-container' %>');
console.log('[Viewability] Bid response registered');
}
});
</script>
<% } else { %>
<!-- No ad data available -->
<div class="no-ad-state">
No ad data available (Backend mode)
</div>
<% } %>
<!-- Branded Products - Frontend Mode (CSR) -->
<!--
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)
MOCK DATA NOTICE:
This demo uses hardcoded Nike product data from mock service.
No real API calls are made - all data comes from /api/products endpoint.
Available mock product IDs (Nike catalog snapshot from 2026-01-30):
- 1370489 : Nike Air Force 1 '07 (60,14 €)
- 6065629 : Nike Air Max 270 (59,99 €)
- 6610284 : Nike P-6000 (61,14 €)
- 206006876: Nike Vomero 18 (89,40 €)
- 203337086: Nike Shox TL Women (49,90 €)
- 6724390 : Nike Shox TL (84,99 €)
- 920965 : Nike Air Max 90 (86,40 €)
- 201783101: Nike Socks 6-Pack (16,99 €)
- 206254161: Nike V5 RNR Women (42,50 €)
- 206190211: Nike V5 RNR (45,00 €)
-->
<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
// Returns hardcoded Nike product data (no real API calls)
productApiUrl: '/api/products'
};
// =========================================================================
// MOCK PRODUCT IDS (Nike catalog)
// =========================================================================
// These IDs represent the shop's product catalog for demo purposes.
// In production, the shop would have their own product database.
const MOCK_PRODUCT_IDS = [
'1370489', // Nike Air Force 1 '07 - 60,14 €
'6065629', // Nike Air Max 270 - 59,99 €
'6610284', // Nike P-6000 - 61,14 €
'206006876', // Nike Vomero 18 - 89,40 €
'203337086', // Nike Shox TL Women - 49,90 €
'6724390', // Nike Shox TL - 84,99 €
'920965', // Nike Air Max 90 - 86,40 €
'201783101', // Nike Socks 6-Pack - 16,99 €
'206254161', // Nike V5 RNR Women - 42,50 €
'206190211' // Nike V5 RNR - 45,00 €
];
// =========================================================================
// 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 mock product service
* Simulates shop's product catalog lookup
*
* NOTE: This is a MOCK service - returns hardcoded Nike product data
* No real API calls are made to external services
*
* @param {Array<string>} productIds - Product IDs to fetch
* @returns {Promise<Array>} - Product details from mock service
*/
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 [];
}
}
/**
* SHOP'S RESPONSIBILITY: Fetch product details
* Uses mock product service with hardcoded Nike data
*
* @returns {Promise<Array>} - Product details
*/
async function fetchProductDetailsFromShop() {
// Use predefined mock product IDs
return await fetchProductsFromMockService(MOCK_PRODUCT_IDS);
}
// =========================================================================
// 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)
*/
function renderBrandedProducts(bannerImage, products, dsaInfo) {
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
? `<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">
<!-- Brand logo from AD SERVER -->
${brandHtml}
</div>
<div class="products-section">
<!-- Product details from SHOP -->
${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: 'branded_products', // 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 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'}`);
});
console.log('[Ad Server] Note: Product IDs from ad server are ignored in this demo');
console.log('[Ad Server] Using mock product IDs instead:', MOCK_PRODUCT_IDS.slice(0, CONFIG.maxProducts).join(', '));
// ─────────────────────────────────────────────────────────────
// STEP B: Fetch product details from SHOP (Mock Service)
// ─────────────────────────────────────────────────────────────
const products = await fetchProductDetailsFromShop();
// ─────────────────────────────────────────────────────────────
// STEP C: Combine shop data with ad server tracking URLs
// ─────────────────────────────────────────────────────────────
// href = shop URL (destination), onclick = tracking URL (meta.adclick + offer_url)
// If meta.adclick is empty, use offer_url directly (without encoding)
const productsWithTracking = products.map((product, index) => ({
...product,
trackingUrl: ad.meta.adclick
? ad.meta.adclick + encodeURIComponent(offers[index]?.offer_url || '')
: (offers[index]?.offer_url || '')
}));
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);
// ─────────────────────────────────────────────────────────────
// 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>