Set up Prebid.js for native

Publishers selling native ad inventory can integrate with Prebid.js An open-source library for publishers to implement header bidding on their websites and manage multiple header bidding partners. and include Index Exchange (Index) as a bidder to access Index’s native demand. Index supports the native ad format The format of the ad space on the publisher's site. Banner and video are kinds of ad formats. for web through the Prebid.js header bidding Publishers offer their inventory programmatically to multiple ad exchanges before calling their chosen ad server. adapter.

Before you begin:

  1. Complete the Index-specific configuration steps on the Index Exchange Prebid documentation page on the Prebid site.

  2. Complete the steps provided in the Prebid.js Native Implementation Guide on the Prebid site.

    Note: We support the following three native template rendering options that are provided in the Prebid.js implementation guide: AdServer-Defined Template, AdUnit-Defined Template, and Custom Renderer. Index recommends that you use the adserver-defined template or adunit-defined template option for a quick setup.

Examples of native ad unit code set up

Example 1: The following code is an example of a Prebid native setup using the adserver-defined template option in Google Ad Manager, but the concept and implementation should be similar for other ad servers.

pbjs.addAdUnits({
    code: slot.code,
    mediaTypes: {
        native: {
            ortb: {
                assets: [{
                    id: 1,
                    required: 1,
                    img: {
                        type: 3,
                        w: 150,
                        h: 50,
                    }
                },
                {
                    id: 2,
                    required: 1,
                    title: {
                        len: 80
                    }
                },
                {
                    id: 3,
                    required: 1,
                    data: {
                        type: 1
                    }
                },
                {
                    id: 4,
                    required: 1,
                    data: {
                        type: 2
                    }
                },
                {
                    id: 6,
                    required: 1,
                    img: {
                        type: 1,
                        w: 50,
                        h: 50,
                    }
                }]
            }
        }
    },
    bids: [{
       bidder: 'ix',
        params: {
            siteId: '9999990'
        }
    }]
});

Example 2: The following code is an example of a Prebid native setup using the adUnit-defined template option:

pbjs.addAdUnits({
    code: slot.code,
    mediaTypes: {
        native: {
            adTemplate: "<div class=\"sponsored-post\">\r\n  <div class=\"thumbnail\" style=\"background-image: url (##hb_native_image##);\"><\/div> \r\n  <div class=\"content2\" style=\"background-color: #24D624;>\r\n  <h1>\r\n<a href=\"%%CLICK_URL_UNESC%%##hb_native_linkurl##\" target=\"_blank\" class=\"pb-click\">\r\n  ##hb_native_title##\r\n <\/a>\r\n <\/h1>\r\n <p>##hb_native_body##<\/p>\r\n \t<div class=\"attribution\">\r\n \t##hb_native_brand##\r\n \t<\/div>\r\n\t<\/div>\r\n<\/div>",
            ortb: {
                assets: [
                    {
                        id: 1,
                        required: 1,
                        img: {
                            type: 3,
                            w: 989,
                            h: 742,
                        }
                    }
                    {
                        id: 2,
                        required: 1,
                        title: {
                            len: 800,
                        }
                    },
                    {
                        id: 3,
                        required: true,
                        data: {
                            type: 1
                        }
                    },
                    {
                        id: 4,
                        required: true,
                        data: {
                            type: 2
                        }
                    }
                ]
            }
          },
    bids: [{
        bidder: 'ix',
        params: {
            siteId: '9999990'
        }
    }]
});