> ## Documentation Index
> Fetch the complete documentation index at: https://developers.criteo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Showcase

> Here is a breakdown of the requirements for your Showcase placement to pass both technical and design QA

# Beaconing

<table>
  <thead>
    <tr>
      <th>
        <p>
          Level
        </p>
      </th>

      <th>
        <p>
          Name
        </p>
      </th>

      <th>
        <p>
          Response field
        </p>
      </th>

      <th>
        <p>
          Explanation
        </p>
      </th>

      <th>
        <p>
          Mandatory
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          Format
        </p>
      </td>

      <td>
        <p>
          Impression
        </p>
      </td>

      <td>
        <p>
          <code>
            onLoadBeacon
          </code>
        </p>
      </td>

      <td>
        <p>
          URL to be called when the whole placement is loaded onto the page. For display ads, the placement is considered "loaded" when the entire unit is rendered.
        </p>

        <p>
          This beacon should only be fired once.
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Format
        </p>
      </td>

      <td>
        <p>
          View
        </p>
      </td>

      <td>
        <p>
          <code>
            onViewBeacon
          </code>
        </p>
      </td>

      <td>
        <p>
          URL to be called when the placement is viewed according to IAB's viewable ad impression measurement guidelines. At least 50% of the unit must be in the user's viewport for at least 1 uninterrupted second.
        </p>

        <p>
          This beacon should only be fired once.
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Format
        </p>
      </td>

      <td>
        <p>
          Click
        </p>
      </td>

      <td>
        <p>
          <code>
            onClickBeacon
          </code>
        </p>
      </td>

      <td>
        <p>
          URL to be called when the user clicks on the placement itself.
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Format
        </p>
      </td>

      <td>
        <p>
          File download
        </p>
      </td>

      <td>
        <p>
          <code>
            onFileClickBeacon
          </code>
        </p>
      </td>

      <td>
        <p>
          URL to be called when a click is made by the user on a CTA button, or from the creative image of the format, which leads to a file download.
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Product
        </p>
      </td>

      <td>
        <p>
          Impression
        </p>
      </td>

      <td>
        <p>
          <code>
            onLoadBeacon
          </code>
        </p>
      </td>

      <td>
        <p>
          URL to be called when the individual product tile is loaded onto the page. If leveraging

          <a href="/retailer-integration/docs/legacy-universal-beacons">
            universal beacons
          </a>

          , this field will be blank.
        </p>

        <p>
          This beacon should only be fired once.
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Product
        </p>
      </td>

      <td>
        <p>
          View
        </p>
      </td>

      <td>
        <p>
          <code>
            onViewBeacon
          </code>
        </p>
      </td>

      <td>
        <p>
          URL to be called when the individual product tile is viewed according to IAB's viewable ad impression measurement guidelines. At least 50% of the placement must be in the user's viewport for at least 1 uninterrupted second.
        </p>

        <p>
          This beacon should only be fired once per product.
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Product
        </p>
      </td>

      <td>
        <p>
          Click
        </p>
      </td>

      <td>
        <p>
          <code>
            productPage
          </code>
        </p>

        <p>
          and/or
        </p>

        <p>
          <code>
            onClickBeacon
          </code>
        </p>
      </td>

      <td>
        <p>
          <b>
            productPage
          </b>
        </p>

        <p>
          This element is a URL that will send an

          <code>
            OnClickBeacon
          </code>

          beacon to Criteo and then redirect the shopper to the item's PDP link (pulled from the product feed).
        </p>

        <p>
          It is possible to use this as the

          <code>
            href
          </code>

          value for the sponsored product as a way to track clicks instead of calling the

          <code>
            OnClickBeacon
          </code>

          URL.
        </p>

        <p>
          <b>
            onClickBeacon
          </b>
        </p>

        <p>
          URL to be called when the individual product tile is clicked. This refers to *any*
        </p>

        <p>
          click interaction with the product tile outside of adding to cart or adding to wishlist (see next two rows).
        </p>

        <p>
          This beacon should fire on all of the range of clicks; left click, middle click, right click to open in a new tab and keyboard shortcuts that simulate a click.
        </p>

        <p>
          <b>
            Both
          </b>
        </p>

        <p>
          This beacon should be fired on every click event. Criteo will deduplicate clicks for billing purposes internally.
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Product
        </p>
      </td>

      <td>
        <p>
          Add-to-cart
        </p>
      </td>

      <td>
        <p>
          <code>
            onBasketChangeBeacon
          </code>
        </p>
      </td>

      <td>
        <p>
          URL to be called when a product is added to or removed from the basket/cart. You can add the quantity of products as a query string parameter. If no

          <code>
            quantity
          </code>

          parameter is provided, it defaults to

          <code>
            1
          </code>

          .
        </p>

        <p>
          This beacon should be fired on *every* add-to-cart click event. Criteo will deduplicate clicks for billing purposes internally.
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Product
        </p>
      </td>

      <td>
        <p>
          Add-to-wishlist
        </p>
      </td>

      <td>
        <p>
          <code>
            onWishlistBeacon
          </code>
        </p>
      </td>

      <td>
        <p>
          URL to be called when the product is added to the wishlist/favorites.
        </p>

        <p>
          This beacon should be fired on *every* add-to-wishlist click event. Criteo will deduplicate clicks for billing purposes internally.
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>
  </tbody>
</table>

# Ad design

<table>
  <thead>
    <tr>
      <th>
        <p>
          Check
        </p>
      </th>

      <th>
        <p>
          Explanation
        </p>
      </th>

      <th>
        <p>
          Mandatory
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          Breakpoint adherence
        </p>
      </td>

      <td>
        <ul>
          <li>
            <b>
              1.
            </b>

            Ensure the breakpoints for the banners are correct.
          </li>

          <li>
            <b>
              2.
            </b>

            For the desktop version, verify the image cropping is as specified.
          </li>

          <li>
            <b>
              3.
            </b>

            Ensure the banner switches to its mobile version at the appropriate breakpoint.
          </li>

          <li>
            <b>
              4.
            </b>

            Use mock-ups to verify the correct spacing around the banner.
          </li>

          <li>
            <b>
              5.
            </b>

            Ensure the "sponsored" badge is displayed correctly for every breakpoint, as shown in the mock-ups provided by Criteo.
          </li>
        </ul>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Redirection button formatting
        </p>
      </td>

      <td>
        <p>
          Ensure that the button's shape, font, font size, and position are aligned with the provided mock-ups.
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Redirection button text
        </p>
      </td>

      <td>
        <p>
          Ensure that the button text supports up to 20 characters in length.
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Mockup adherence
        </p>
      </td>

      <td>
        <p>
          The design of the mock-ups should be followed, ensuring the following:
        </p>

        <ul>
          <li>
            <b>
              Background image ratio:
            </b>

            The image resizes proportionally on mobile, maintaining the correct ratio.
          </li>

          <li>
            <b>
              Backgrounds per product:
            </b>

            Up to 5 different backgrounds per product are displayed.
          </li>

          <li>
            <b>
              Image cropping:
            </b>

            The image is cropped correctly for different screen resolutions, keeping the safe zone visible.
          </li>

          <li>
            <b>
              CSS colors:
            </b>

            Extra CSS colors are displayed correctly.
          </li>

          <li>
            <b>
              Branding and product zones:
            </b>

            The ratio between the branding zone and the product zone follows the mock-ups.
          </li>

          <li>
            <b>
              Product information:
            </b>

            The layout, price, rating, text orientation, and text centering match the mock-ups.
          </li>

          <li>
            <b>
              Title:
            </b>

            The font style matches the mock-ups.
          </li>

          <li>
            <b>
              Text:
            </b>

            Text placement, font family, font size, and colors match the mock-ups.
          </li>

          <li>
            <b>
              Contour:
            </b>

            A contour around the solution follows the mock-up design.
          </li>

          <li>
            <b>
              Sponsored text:
            </b>

            The text placement, font family, font size, and color match the mock-ups
          </li>
        </ul>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>
  </tbody>
</table>

# API features

<table>
  <thead>
    <tr>
      <th>
        <p>
          Check
        </p>
      </th>

      <th>
        <p>
          Explanation
        </p>
      </th>

      <th>
        <p>
          Mandatory
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          Leveraging regiondata
        </p>
      </td>

      <td>
        <ul>
          <li>
            <b>
              Format:
            </b>

            Ensure that the region IDs in the ad call match what is passed in the product feed
          </li>

          <li>
            <b>
              Adherence:
            </b>

            Ensure that Criteo is adhering properly to the region in our ad response
          </li>
        </ul>
      </td>

      <td>
        <p>
          Yes, if regiondata has been implemented
        </p>
      </td>
    </tr>
  </tbody>
</table>

# Click options

***Note that only one of these options will be available per format***

<table>
  <thead>
    <tr>
      <th>
        <p>
          Option
        </p>
      </th>

      <th>
        <p>
          Check
        </p>
      </th>

      <th>
        <p>
          Mandatory
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          No redirection
        </p>
      </td>

      <td>
        <p>
          Nothing happens
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Redirection URL
        </p>
      </td>

      <td>
        <p>
          The user gets redirected to the URL provided in the ad response
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          File download
        </p>
      </td>

      <td>
        <p>
          The user downloads the file provided
        </p>
      </td>

      <td>
        <p>
          Yes
        </p>
      </td>
    </tr>
  </tbody>
</table>