Step 1: Configure ad placements in Constructor

You can define placements in Constructor via the dashboard. You will need to create a separate placement with a unique placement ID for each area of your webpage and/or app where you wish for an ad to appear.

For example, if you wanted an ad to appear on the homepage and on product listing pages, then you would create two placements: homepage_banner and product_listing. You can name placements however you wish.

Step 2: Design ad placement locations on your website

Your team is responsible for identifying where on your website you wish for display ads to appear and designing those placements.

Step 3: Create a test campaign

Once you have set up ad placements, you can run a test campaign with an existing advertiser. You can learn how to create a Display Ads campaign here.

Step 4: Call display ads on target pages

Once you have created a display ad campaign for a specific placement, you can use the Display Ads API to request and display the ad in the placement.

This will return up to one ad for each placement, which includes image URLs for different screen sizes and pixel densities, the target URL for the ad, and metadata like title, description, and call-to-action text for native rendering.

Request parameters

Example response

{
  "display_ads": {
    "home_page_hero": {
      "ad_id": "GsSOmrGIwtIg4dEOSYUssOPD6xYKnNxPOrz9RMdIqFo/JjtKDdgfU0atXBZIN15RlUqD3PDbfnZuUVHlM+haqVtFCOE+k7w1npGOitQvFuE=",
      "advertiser": "Adidas",
      "image_banner": {
        "title": "Adidas Running Shoes",
        "description": "Get your running shoes from Adidas",
        "cta": "Shop now",
        "target_url": "https://example.com/promo-page",
        "srcset": [
          {
            "src": "https://example.com/running-shoes.jpg",
            "pixel_density": 1
          },
          {
            "src": "https://example.com/[email protected]",
            "pixel_density": 2
          }
        ],
        "images": [
          {
            "srcset": [
              {
                "src": "https://example.com/running-shoes.jpg",
                "pixel_density": 1
              },
              {
                "src": "https://example.com/[email protected]",
                "pixel_density": 2
              }
            ],
            "media": "(min-width: 1024px)"
          }
        ]
      }
    },
    "home_page_side_banner": {
      "ad_id": "XtHJdYiQlKzP8vLpRfMnTxBa3cWeFbVsUyA2hCmDkG5r/OqNjEg7ZSa9IuoXy6vYdzHxJ4wQpCt1iAl0nPvRVDmkrE6UfGb5yLjW3a8oBsS=",
      "advertiser": "Adidas",
      "image_banner": {
        "title": "Adidas Running Shoes",
        "description": "Get your running shoes from Adidas",
        "cta": "Shop now",
        "target_url": "https://example.com/promo-page",
        "srcset": [
          {
            "src": "https://example.com/running-shoes-tall.jpg",
            "pixel_density": 1
          },
          {
            "src": "https://example.com/[email protected]",
            "pixel_density": 2
          }
        ]
	  "images": [],
      }
    }
  }
}

Step 5: Validate ad rendering and impression count

Guidelines for rendering display ads

• Responsive images: For web, use the picture element to let the browser select the most appropriate version.
• Avoid Cumulative Layout Shift (CLS): Reserve placement space before the ad loads.
• Fallback behavior: If no ad is returned, show organic content or keep the slot empty.

Display ads tracking

Constructor’s beacon detects ads and identifies when they’ve been visible for long enough to be considered a billable impression (i.e., when 50% of the ad is visible in the viewport for a least one second).

You can validate impression counts within Retail Media section of the Constructor dashboard. Please refer to the Display Ads campaign listing for specific metrics on a campaign.