<script>
    dlApi = {
        target: "DEMO_PAGE/LISTING", // 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: 'sponsored',                             // fixed value for Sponsored Single Tile
        div: 'ad-sponsored',                           // container ID for viewability tracking
        opts: {
            pos: 1,                                    // slot position (1, 2, ... for multiple slots)
            offers_limit: 3                            // request up to 3 offers to increase fill rate
        },
        tplCode: '1746213/Sponsored-Product',  // fixed value for Sponsored Single Tile
        asyncRender: true,                             // manually count impression with ad.render()
    }).then(async function (ad) {
        if (!ad) {
            console.log('[Sponsored Tile] No ad available');
            return;
        }

        console.log('[Sponsored Tile] Ad response:', ad);

        // 1. Extract offers from the feed
        var offers = (ad.fields?.feed?.offers) || [];
        if (offers.length === 0) {
            console.log('[Sponsored Tile] No offers in response');
            return;
        }

        var dsa = ad.dsa || null;
        var redirectToOffers = ad.fields?.feed?.redirectToOffers;

        // 2. Find the first offer available in your shop catalog
        var offer = null;
        var shopProduct = null;

        for (var i = 0; i < offers.length; i++) {
            var candidate = offers[i];
            var product = redirectToOffers
                ? await fetchProductDetailsFromShop(candidate.product_id, candidate.offer_id)
                : await fetchProductDetailsFromShop(candidate.product_id);
            if (product) {
                offer = candidate;
                shopProduct = product;
                break;
            }
        }
        if (!offer) {
            console.log('[Sponsored Tile] No matching product found in shop catalog');
            return;
        }

        // 3. Determine the flow based on redirectToOffers flag

        if (redirectToOffers === false) {
            // SPONSORED PRODUCT: tile links to product page on your shop
            renderSponsoredProduct(offer, shopProduct, dsa);
        } else {
            // SPONSORED OFFERS: tile with CTA button linking to merchant's shop
            renderSponsoredOffer(offer, shopProduct, dsa);
        }

        // 4. Count impression after rendering
        ad.render();

    }).catch(function (err) {
        console.error('[Sponsored Tile] Ad could not be loaded:', err);
    });

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

/**
 * Render Sponsored Product tile - links to product page on your shop
 */
function renderSponsoredProduct(offer, shopProduct, dsa) {
    var container = document.getElementById('ad-sponsored');

    // Use product data from your shop catalog
    var productUrl = shopProduct.url;
    var productImage = shopProduct.image;
    var productName = shopProduct.name;
    var productPrice = new Intl.NumberFormat('de-DE', {
        style: 'currency',
        currency: 'EUR'
    }).format(shopProduct.price);

    // Build DSA transparency info
    var dsaHtml = '';
    if (dsa) {
        dsaHtml = '<div class="dsa-info">'
            + '<span class="dsa-icon" title="Ad transparency">i</span>'
            + '<div class="dsa-tooltip">'
            + '<div>Advertiser: ' + escapeHtml(dsa.behalf || 'N/A') + '</div>'
            + '<div>Paid by: ' + escapeHtml(dsa.paid || 'N/A') + '</div>'
            + '</div></div>';
    }

    container.innerHTML = ''
        + dsaHtml
        + '<span class="sponsored-badge">Sponsored Product</span>'
        + '<a href="' + escapeHtml(productUrl) + '" target="_blank" rel="noopener nofollow sponsored"'
        + ' onclick="new Image().src=\'' + escapeHtml(offer.adclick || '') + '\';">'
        + '<img src="' + escapeHtml(productImage) + '" alt="' + escapeHtml(productName) + '">'
        + '<div class="product-name">' + escapeHtml(productName) + '</div>'
        + '<div class="product-price">' + productPrice + '</div>'
        + '</a>';
}

/**
 * Render Sponsored Offer tile - CTA button links to merchant's shop
 * Product data (image, name, price) comes from your shop catalog
 */
function renderSponsoredOffer(offer, shopProduct, dsa) {
    var container = document.getElementById('ad-sponsored');

    // Get shop name from your shop catalog (fetched alongside product data)
    var shopName = shopProduct.shopName || 'Shop';

    // Use product data from your shop catalog
    var productImage = shopProduct.image;
    var productName = shopProduct.name;
    var productPrice = new Intl.NumberFormat('de-DE', {
        style: 'currency',
        currency: 'EUR'
    }).format(shopProduct.price);

    // Build DSA transparency info
    var dsaHtml = '';
    if (dsa) {
        dsaHtml = '<div class="dsa-info">'
            + '<span class="dsa-icon" title="Ad transparency">i</span>'
            + '<div class="dsa-tooltip">'
            + '<div>Advertiser: ' + escapeHtml(dsa.behalf || 'N/A') + '</div>'
            + '<div>Paid by: ' + escapeHtml(dsa.paid || 'N/A') + '</div>'
            + '</div></div>';
    }

    container.innerHTML = ''
        + dsaHtml
        + '<span class="sponsored-badge">Sponsored Offer</span>'
        + '<img src="' + escapeHtml(productImage) + '" alt="' + escapeHtml(productName) + '">'
        + '<div class="product-name">' + escapeHtml(productName) + '</div>'
        + '<div class="product-price">' + productPrice + '</div>'
        + '<a class="cta-button" href="' + escapeHtml(offer.offer_url) + '" target="_blank" rel="noopener nofollow sponsored"'
        + ' onclick="new Image().src=\'' + escapeHtml(offer.adclick || '') + '\';">'
        + escapeHtml(shopName) + '</a>';
}

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

// Node.js backend
const NETWORK_ID = '${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: 'product-tile',                         // product-tile (first/best) or product-tile2 (additional positions, requires pos)
        secure: 1,
        native: { request: "{}" },
        ext: {
            no_redirect: true,                         // adclick URLs fire tracking only, no redirect
            offers_limit: 3                            // request up to 3 offers to increase fill rate
        }
    }],
    site: {
        id: 'DEMO_PAGE',                               // your site ID (UPPERCASE)
        ext: {
            area: 'SEARCH'                             // SEARCH for search results pages, LISTING/CATEGORY for category pages
        }
    },
    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: {
            page_type: 'SEARCH',                       // SEARCH or CATEGORY — page context
            search_query: 'nike shoes',                // optional: search query for SEARCH pages
            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
        },
        offerids: ['12345', '67890'],                  // optional: product IDs from current page
        categoryids: [101, 205],                       // optional: category IDs for targeting
        excluded_offer_ids: ['1011'],                 // optional: exclude organic offer IDs to prevent duplicates
        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');
    return null;
}

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 offer data and redirectToOffers flag
const offers = adm.fields?.feed?.offers || [];
const redirectToOffers = adm.fields?.feed?.redirectToOffers;

if (offers.length === 0) {
    return null;  // No offers in response
}

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

// 3. Find the first offer available in your shop catalog
let offer = null;
let shopData = null;

for (const candidate of offers) {
    const product = redirectToOffers
        ? await fetchProductFromDatabase(candidate.product_id, candidate.offer_id)
        : await fetchProductFromDatabase(candidate.product_id);
    if (product) {
        offer = candidate;
        shopData = product;
        break;
    }
}
if (!offer) {
    console.log('No matching product found in shop catalog');
    return null;
}

// 4. Determine the flow based on redirectToOffers flag
if (redirectToOffers === false) {
    console.log('Sponsored Product flow - product:', offer.product_id);
} else {
    console.log('Sponsored Offers flow - product:', offer.product_id);
}

// 5. Prepare data for rendering
const adData = {
    offer,
    redirectToOffers,
    shopData,                 // product data from your shop catalog
    dsaInfo,
    adm: adm,
    containerId: 'ad-sponsored'
};

<div id="ad-sponsored">

    <% if (adData.redirectToOffers === false) { %>
    <!-- SPONSORED PRODUCT: tile links to product page on your shop -->
    <div class="tile">
        <% if (adData.dsaInfo) { %>
        <div class="dsa-info">
            <span>Advertiser: <%= adData.dsaInfo.advertiser %></span>
            <span>Paid by: <%= adData.dsaInfo.payer %></span>
        </div>
        <% } %>
        <span class="sponsored-badge">Sponsored Product</span>
        <a href="<%= adData.shopData.url %>"
           target="_blank" rel="noopener nofollow sponsored"
           onclick="new Image().src='<%= adData.offer.adclick %>';">
            <img src="<%= adData.shopData.image %>" alt="<%= adData.shopData.name %>">
            <div class="product-name"><%= adData.shopData.name %></div>
            <div class="product-price">
                <%= new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(adData.shopData.price) %>
            </div>
        </a>
    </div>

    <% } else { %>
    <!-- SPONSORED OFFERS: product data from shop catalog + CTA button links to merchant's shop -->
    <div class="tile">
        <% if (adData.dsaInfo) { %>
        <div class="dsa-info">
            <span>Advertiser: <%= adData.dsaInfo.advertiser %></span>
            <span>Paid by: <%= adData.dsaInfo.payer %></span>
        </div>
        <% } %>
        <span class="sponsored-badge">Sponsored Offer</span>
        <img src="<%= adData.shopData.image %>" alt="<%= adData.shopData.name %>">
        <div class="product-name"><%= adData.shopData.name %></div>
        <div class="product-price">
            <%= new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(adData.shopData.price) %>
        </div>
        <a class="cta-button" href="<%= adData.offer.offer_url %>"
           target="_blank" rel="noopener nofollow sponsored"
           onclick="new Image().src='<%= adData.offer.adclick %>';">
            <%= adData.shopData.shopName || 'Shop' %>
        </a>
    </div>
    <% } %>

</div>

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

const requestBody = {
    id: 'request-123',
    imp: [
        {
            id: 'ad-sponsored-1',                       // unique ID for first slot
            tagid: 'product-tile',                      // first/best position — no pos required
            secure: 1,
            native: { request: "{}" },
            ext: {}
        },
        {
            id: 'ad-sponsored-2',                       // unique ID for second slot
            tagid: 'product-tile2',                     // additional positions — pos required
            secure: 1,
            native: { request: "{}" },
            ext: { pos: 1 }                            // position index (1, 2, ...)
        }
    ],
    // ... rest of request unchanged
};

const bids = bidResponse?.seatbid?.[0]?.bid || [];
bids.forEach(bid => {
    const impressionId = bid.impid;  // matches imp[].id from request
    // Parse each bid independently - each may have different redirectToOffers value
    const adm = JSON.parse(bid.adm);
    const redirectToOffers = adm.fields?.feed?.redirectToOffers;

    // Handle each slot's dual flow independently
});

// Slot 1 (position 1 in the grid)
dlApi.fetchNativeAd({
    slot: 'sponsored',
    div: 'ad-sponsored-1',
    opts: { pos: 1 },
    tplCode: '1746213/Sponsored-Product',
    asyncRender: true
}).then(async function (ad) {
    // Handle ad response for slot 1
});

// Slot 2 (position 4 in the grid)
dlApi.fetchNativeAd({
    slot: 'sponsored',
    div: 'ad-sponsored-2',
    opts: { pos: 2 },
    tplCode: '1746213/Sponsored-Product',
    asyncRender: true
}).then(async function (ad) {
    // Handle ad response for slot 2
});

dlApi.fetch();