<script>
    dlApi = {
        target: "DEMO_PAGE/HOMEPAGE", // Format: SITE/AREA. For mobile: M_SITE/AREA
        tid: 'EA-<<NETWORK_ID>>',        // your tenant ID - provided by Ring DAS
        dsainfo: 1,               // enable DSA transparency info
        cmd: []                   // command queue
    };
</script>
<!-- SDK URL - provided by your Ring DAS account manager -->
<script src="https://<<DAS_CDN>>/<<NETWORK_ID>>/build/dlApi/minit.boot.min.js" async></script>

dlApi.cmd.push(function (dlApi) {
    dlApi.consent({npa: 0});  // 0 = consent given, 1 = no consent
});

dlApi.cmd.push(function (dlApi) {
    dlApi.addKeyValue('offer_ids', ['10', '20', '1234']);           // offers IDs from current page
    dlApi.addKeyValue('category_ids', [101, 205]);            // category IDs for targeting
    dlApi.addKeyValue('main_category_id', 101);               // main product category ID
    dlApi.addKeyValue('IP', '202603041502158687149647');            // page view ID
    dlApi.addKeyValue('IV', '202603041502158687149647');            // page view unique ID (changes on SPA transitions)
    dlApi.addKeyValue('TABID', 'tab-7f3e2a');                      // browser tab identifier
});

dlApi.cmd.push(function (dlApi) {
    dlApi.fetchNativeAd({
        slot: 'display',                            // fixed value for Branded Products
        div: 'ad-branded-products',          // container ID for viewability tracking
        opts: {
            offers_limit: 5                         // maximum number of products returned from ad server
        },
        tplCode: '1746213/Sponsored-Product-Plus',  // fixed value for Branded Products
        asyncRender: true,                          // manually count impression with ad.render()
    }).then(async function (ad) {
        if (!ad) {
            console.log('[Branded Products] No ad available');
            return;
        }

        console.log('[Branded Products] Ad response:', ad);

        // 1. Extract data from ad server
        const bannerImage = ad.fields?.bannerImage || '';      // Brand logo URL
        const urlRedirect = ad.fields?.urlRedirect || '';      // Logo click URL (optional)
        const offers = ad.fields?.feed?.offers || [];
        const dsaInfo = ad.dsa;

        // 2. Extract product IDs from offers
        const productIds = offers.map(offer => offer.product_id);
        console.log('[Branded Products] Product IDs to fetch:', productIds);

        // 3. Fetch product details from YOUR shop (implement this function)
        const productDetails = await fetchProductDetailsFromShop(productIds);

        // 4. Combine shop data with ad server tracking URLs
        const productsWithTracking = productDetails.map((product, index) => ({
            ...product,
            trackingUrl: offers[index]?.adclick || ''
        }));

        // 5. Render the ad with combined data
        renderBrandedProducts(bannerImage, productsWithTracking, dsaInfo, urlRedirect);

        // 6. Count impression after rendering
        ad.render();
    }).catch(function (err) {
        console.error('[Branded Products] Ad could not be loaded:', err);
    });

    // Trigger ad fetch
    dlApi.fetch();
});

/**
 * Fetch product details from your shop's product API
 * @param {string[]} productIds - Array of product IDs from ad server
 * @returns {Promise<Array>} - Product details with image, price, name, URL
 */
async function fetchProductDetailsFromShop(productIds) {
    // Example: Call your shop's product API
    const products = await Promise.all(
        productIds.map(async (productId) => {
            // Replace with your actual product API endpoint
            const response = await fetch(`/api/products/${productId}`);
            const product = await response.json();

            return {
                product_id: productId,
                image: product.imageUrl,
                name: product.title,
                price: product.price,
                url: product.detailPageUrl
            };
        })
    );

    return products.filter(p => p !== null);  // Filter out any failed fetches
}

function renderBrandedProducts(bannerImage, products, dsaInfo, urlRedirect) {
    const container = document.getElementById('ad-branded-products');
    const MAX_PRODUCTS = 5;

    // Build products HTML using shop data + ad server tracking URLs
    let productsHtml = '';
    products.slice(0, MAX_PRODUCTS).forEach(function(product) {
        const price = new Intl.NumberFormat('de-DE', {
            style: 'currency',
            currency: 'EUR'
        }).format(product.price);

        productsHtml += `
            <a href="${product.url}" class="product-tile"
               target="_blank" rel="noopener nofollow sponsored"
               onclick="new Image().src='${product.trackingUrl}';">
                <img src="${product.image}" alt="${escapeHtml(product.name)}">
                <div class="product-name">${escapeHtml(product.name)}</div>
                <div class="product-price">${price}</div>
            </a>
        `;
    });

    // Build DSA info HTML (Digital Services Act transparency)
    let dsaHtml = '';
    if (dsaInfo) {
        dsaHtml = `
            <div class="dsa-info">
                <span class="dsa-icon" title="Ad transparency">i</span>
                <div class="dsa-tooltip">
                    <div>Advertiser: ${dsaInfo.behalf || 'N/A'}</div>
                    <div>Paid by: ${dsaInfo.paid || 'N/A'}</div>
                </div>
            </div>
        `;
    }

    // Render complete format
    // bannerImage = from ad server
    // products = from YOUR shop + trackingUrl from ad server
    container.innerHTML = `
        <div class="sponsored-header">
            <span class="sponsored-badge">Sponsored</span>
            ${dsaHtml}
        </div>
        <div class="brand-section">
            ${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="${bannerImage}" alt="Brand Logo">`}
        </div>
        <div class="products-section">
            ${productsHtml}
        </div>
    `;
}

// Helper function to escape HTML special characters
function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Node.js backend
const NETWORK_ID = `${NETWORK_ID}`;  // Branded Products network ID
const BIDDER_URL = `https://das.idealo.com/${NETWORK_ID}/bid`;

// User identifiers — replace with actual values from your system
const SESSION_ID = 'your-session-id';      // session-level identifier (no GDPR consent required)
const TRACKING_ID = 'your-tracking-id';    // device-level tracking identifier (GDPR consent required)

const requestBody = {
    id: Math.random().toString(16).substring(2, 15),
    imp: [{
        id: 'imp-1',
        tagid: 'display',                           // fixed value for Branded Products
        secure: 1,
        native: { request: "{}" },
        ext: {
            offers_limit: 5,                       // maximum number of products returned from ad server
            no_redirect: true                      // adclick URLs fire tracking only, no redirect
        }
    }],
    site: {
        id: 'DEMO_PAGE',                            // your site ID (UPPERCASE)
        ext: {
            area: 'HOMEPAGE'                        // page type (UPPERCASE): HOMEPAGE, PRODUCT_DETAIL, LISTING, SEARCH
        }
    },
    user: {
        eids: [{
            source: 'your-domain.com',
            inserter: 'your-domain.com',
            uids: [
                {
                    id: SESSION_ID,
                    atype: 500,
                    ext: { id_type: 'session', consent_required: false }
                },
                {
                    id: TRACKING_ID,
                    atype: 1,
                    ext: { id_type: 'tracking', consent_required: true }
                }
            ]
        }],
        ext: {
            npa: false,                             // false = consent given, true = no consent
            ids: {
                lu: '202408221036415499301131'      // Ring DAS internal session ID (from ea_uuid cookie)
            }
        }
    },
    ext: {
        network: NETWORK_ID,
        keyvalues: {
            IP: '202603041502158687149647',          // page view ID
            IV: '202603041502158687149647',          // page view unique ID
            TABID: 'tab-7f3e2a',                    // browser tab identifier
            ab_variant: 'variant-b',                // optional: A/B test variant identifier
        },                                          // optional targeting parameters
        offerids: ['2345', '67890'],                // optional: product IDs from current page
        categoryids: [101, 205],                    // optional: category IDs for targeting
        is_non_prebid_request: true,
        src: 's2s'                                  // optional: indicates server-to-server request
    },
    regs: {
        gdpr: 1,                                    // 1 = GDPR applies, 0 = does not apply
        gpp: 'YOUR_GPP_STRING',                     // optional: TCF-compliant consent string from CMP
        ext: {
            dsa: 1                                  // request DSA transparency info
        }
    },
    tmax: 1000                                      // request timeout in milliseconds
};

// Send as GET request with body in data= parameter
const encodedData = encodeURIComponent(JSON.stringify(requestBody));
const response = await fetch(`${BIDDER_URL}?data=${encodedData}`);

// Check for no ad available (204 No Content)
if (response.status === 204) {
    console.log('No ad available');
}

const bidResponse = await response.json();

const bid = bidResponse?.seatbid?.[0]?.bid?.[0];
if (!bid) {
    return null;  // No bid in response
}

// Parse adm (it's a JSON string)
const adm = JSON.parse(bid.adm);

// 1. Extract data from ad server
const bannerImage = adm.fields?.bannerImage || null;   // Brand logo URL
const urlRedirect = adm.fields?.urlRedirect || null;   // Logo click URL (optional)
const offers = adm.fields?.feed?.offers || [];          // Array with product_id

// 2. Extract product IDs
const productIds = offers.map(offer => offer.product_id);
console.log('Product IDs from ad server:', productIds);

// 3. Fetch product details from YOUR shop database
const shopProducts = await fetchProductsFromDatabase(productIds);

// 4. Combine shop data with ad server tracking URLs
const products = shopProducts.map((product, index) => ({
    ...product,
    trackingUrl: offers[index]?.adclick || ''
}));

// 5. Extract DSA transparency info
const dsaInfo = bid.ext?.dsa ? {
    advertiser: bid.ext.dsa.behalf,
    payer: bid.ext.dsa.paid
} : null;

// 6. Prepare data for rendering
const adData = {
    bannerImage,              // From ad server
    urlRedirect,              // Logo click URL from ad server (optional)
    products,                 // From YOUR shop + trackingUrl from ad server
    dsaInfo,
    adm: adm,
    containerId: 'ad-branded-products'
};

/**
 * Fetch product details from your database
 * @param {string[]} productIds - Product IDs from ad server
 */
async function fetchProductsFromDatabase(productIds) {
    // Replace with your actual database query
    const products = await db.products.findMany({
        where: { id: { in: productIds } },
        select: {
            id: true,
            imageUrl: true,
            title: true,
            price: true,
            detailPageUrl: true
        }
    });

    return products.map(p => ({
        product_id: p.id,
        image: p.imageUrl,
        name: p.title,
        price: p.price,
        url: p.detailPageUrl
    }));
}

<!-- Render branded products banner -->
<div id="ad-branded-products" class="branded-products">
    <div class="sponsored-header">
        <span class="sponsored-badge">Sponsored</span>
        <% if (adData.dsaInfo) { %>
        <div class="dsa-info">
            <span>Advertiser: <%= adData.dsaInfo.advertiser %></span>
            <span>Paid by: <%= adData.dsaInfo.payer %></span>
        </div>
        <% } %>
    </div>

    <!-- Brand logo from AD SERVER -->
    <div class="brand-section">
        <% 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">
        <% } %>
    </div>

    <!-- Product details from YOUR SHOP + tracking URLs from AD SERVER -->
    <div class="products-section">
        <% adData.products.slice(0, 5).forEach(function(product) { %>
        <a href="<%= product.url %>" class="product-tile"
           target="_blank" rel="noopener nofollow sponsored"
           onclick="new Image().src='<%= product.trackingUrl %>';">
            <img src="<%= product.image %>" alt="<%= product.name %>">
            <div class="product-name"><%= product.name %></div>
            <div class="product-price">
                <%= new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.price) %>
            </div>
        </a>
        <% }); %>
    </div>
</div>

<!-- Register for viewability and impression tracking -->
<script>
    dlApi.cmd.push(function () {
        dlApi.registerBidResponse(<%- JSON.stringify(adData.adm) %>, 'ad-branded-products');
    });
</script>

const requestBody = {
    id: 'request-123',
    imp: [
        {
            id: 'imp-0',                            // unique ID for first slot
            tagid: 'display',
            secure: 1,
            native: { request: "{}" },
            ext: { pos: 1, offers_limit: 5 }
        },
        {
            id: 'imp-1',                            // unique ID for second slot
            tagid: 'display',
            secure: 1,
            native: { request: "{}" },
            ext: { pos: 2, offers_limit: 5 }
        }
    ],
    // ... rest of request unchanged
};

const bids = bidResponse?.seatbid?.[0]?.bid || [];
bids.forEach(bid => {
    const impressionId = bid.impid;  // matches imp[].id from request
    // Render ad for this specific slot
});