Overview

The Commerce Video Spotlight format contains a video section with controls, and a product zone. On desktop, the product zone is presented beside the video. On mobile, the product zone appears below the video.

Flagship_fields (1).jpg — Web (top) and mobile showcases (bottom) of the Commerce Video Spotlight format

Response Keys

The following is a description of the different keys used to render ads.

In the Rendering Section

Key	Description
`optional_legal_text`	Legal text add-on for the video. Max 90 characters long including spaces. Desktop: visible when you hover the “i” icon on the video. Mobile and App: visible at all times below the video.
`optional_redirect_target`	(only applicable for web). Can be ignored if no`ClickThrough` link is provided in the VAST. Redirection target, can have the following values: “`_blank`”: redirects to a new tab “`_self`”: redirects in the same tab
`background_video_alt_text`	Video alternative text
`color_mode`	There are two default settings for the legal text box, buttons, and options (`play/pause`; `mute/unmute`; legal text “i” icon) to ensure visibility over any video file provided. It can have one of the following values: `lightcommand`: #000000 `darkcommand`: #FFFFFF

Format/Placement VAST Options

Depending on your integration configuration, you may find one of the following VAST options for the video placement in the ad response.

Key	Description
`TagVideoVAST`	A URL to load a VAST XML that includes all information to render the video.
OR	-
`XmlVideoVAST`	A VAST XML to provide a video player

Sample Response

Commerce Video Spotlight: VAST Tag

{
    "status": "OK",
    "placements": [
        {
            "viewHome_API_desktop-Flagship": [
                {
                    "format": "CVS",
                    "products": [
                        {
                          "ProductId": "134679258",
                          "OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=gLYh9%2fxsFGq%2b67gaahP4kVXGGZXfgfgU1JA8o1zBL%2bVeGhkRciu4XrLOsI4T7SC%2bNbEtyqg3GhqGgDtwtWLWaTC0EBVHxpNlqJcrfrUzWk3IBuDj7ZAr8t28y7EJfH3BnEZQxAvbjEP3nRJYq9z9TfOhi0mWVLYxVFIURTPBvcp0cVPY5qaHvmPC6%2bppv7TH9Kja6zXlrKhib2DOtKo4aEMw3FQqRbnCeTVdjqmFbHK8s%3d&ev=2",
                          "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=aLSOJrKI2G%2fY8SwmqYnI5SqMi2jvKfgfgnJDZb06hiInWkDeRqN4Tu%2fKZnJgmGIrIuQVurCYsVELSi%2byX2oOKpicAj5tACVgpEYVcGZxNOU68BYLhRUxn80y3s4USfHLmeeOvP9wxb6RlGyydpJ4U4k%2fM7uL3DawyB9O%2bC9qebO%2bKTIUZ2fbQV5EuwvNxzYqCcfSjxWkMF%2fC5XfdIeovQeU5%2b7UpYhV62LdPj910grWaLwAIZ1BFFDCShQC%2fNTvqXt&ev=2",
                          "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=S82J7C%2fY88eObEWE7XzLk2PMzSUfgfgTawyt81nDP2IJov%2byGjGihnQ6n4aM8AN03iCTSLqrRZTClsvRLjR3xIKFGaqgilehlQj2WuFQK5Eht9iUY9Pe9S9fRvms7BB055liFkgZqzmChn6L06LcP0MOPdwUT3dsUhokauwiziBsb3nVQF5k51wvEy%2fQ0YrxsM2ZlOOBmpNrWij8%2fnRxJiCMylA%2fOxqr6%2bJw5nCICO18dWz8SvNAyV0TeI2h9mUSk3jOljbyNUUAK%2fpNYfzRPDuw%3d%3d&ev=2",
                          "OnBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=LQNEHBKa5%2bIRktK7%2bD%2fR5fgfgD1xYrFDDNLffHIbCiNsnssxDZSllOGbux%2f88BUiFFUTugPFOhm0oaM9DsesFQmoNghWjKaIr76vj9B7fcvNR1zZmYOOseWCbQZlkpozMPlugkYyH0W33iV6j2w%2fRdBY%2bQVgQT0BBmYdVPRODed3SIOgkAxOZF4upAfAxSf83%2bp4Nh8bvlY6b840bGvL9UMgQHy1FM8ncNj90PsUwnANQrLmidsAghSTnZELKUpQZYmFXAVPPk%2bBHu%2bpB6QhkK8twFzGcDVBp5MCtpmZGe%2brg%3d&ev=2",
                          "OnWishlistBeacon": "//b.us5.us.criteo.com/rm?rm_e=8yGOJDbiWkOj%2bHVuvsc59my1UyuWPnozIfwfOFm5ZtZmX4a4bi3IZLEYS57LOv59wkboF346v%2fKa4X8Zim7YSCjw9tNN2yBYCr%2fb%2fgfgb9QELv2JEprUOfBSZ1ZIwILrpD5CgOWkvQpEnYP137RzR4LFirlrSnfXe0Tanl8sHU5PjOXA%2f9iKHps%2bYB2aD35M02Br8%2fPx%2b2%2bDlQq4RKw4xMuAmnlafk2dUWI%2f%2bjGVwATj0LfINKS2LSt77USBGLOcWw5cDekIMvWptqyccI3oKCQQ%3d%3d&ev=2"
                        },
                        {
                            // other products
                        },
                    ],
                    "products_order": [
                        {
                            "products": [
                                "134679258"
                            ],
                            "isMandatory": false
                        },
                        {
                            // other products
                        }
                    ],
                    "rendering": {
                        "optional_legal_text": "This is the optional legal text.",
                        "optional_redirect_target": "_blank",
                        "background_video_alt_text": "this is the video alternative text",
                        "color_mode": "lightcommand",
                    },
                    "TagVideoVAST": "//rm-v.us5.eu.criteo.com/v?rm_e=cTPHYkD46JXqUp9svzl4FwDN_Re-KWTFmSn1QREFzvxlBjtyuwqDRDnVL8lIDel4Th9npJBHSThNiJLriLBlmmJlLg3E7oRRs-IIthJ3MTTQGMWNlOPHOebj8aiWu-YTK7Esx7vZ_fdMtLSLuHYbwqZnpT2xb3zqTJ96A2TPZWaVJPUqCO8KuUd5MBgT1mvs_o-L4lim6g9KZmIWT4c0EbOwA&ev=4",
                  	"OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=2DP313G8ktSXXaFvImaO4VKMqFSCkvmlcTz98dfgdfmtngUKQgwShE9%bvNSjDndYD%2bnpLT4PWDoNaCb862AMTvSopOdYNFGidZfBHggUmtpL%2fYOudEdDP7kANk%2bGmsBy3OCIm58C0uAYEJSHBdruRC%2fhbWLKUdZ2VdHdFwvBg8IT9Yt4V0DS%2bufcBDtvWbEhioZmIPaBY3uuykPSXyOlpMPFfHqZ%2bg%3d%3d&ev=2",
                    "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=YIfuO34D8lTreAuY8MIlZiNjtIYz48eDlYzK0kXFMIuhZjwV6cVwkirv6Tbbixk6Wgh7TLqia3Gw1uOcHcNCs%2f4hpPjT2yIGBXUv36EjR20dfgdfgsjFkZFPx8QGY9uakIYTCoH73BwvmoZdM5ForssG%2fkumRGMydeN9VqXHDdF8PxDvlVFUP3M%2fgFsSYQcCTO%2brLIhUs4%2bTKzg3mOxt%2fzSrsyOkQzOP7b7x5lupA2unc%3d&ev=2",
                    "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=Db34znl4Lx0Oq1zpo6o%2f5W7GNmopfgN3f4DEpjSxb8eBUtw1dsIWqH82fbjaLIwGVlIukvlY5suhA5G%2fYZcU2Lx0aiFdfgdfgR7hNwL%2blregzZewZ6wuArnzW9sBqia4vvWq%2bBsGU39FRUuYm94OcSReYRutW%2fXtQ5Vx7lExUKg0P3%2fQRk%2bWuroBUmFR5M0atLoYvduF7Qmb4Vms1Ma4dOAwiCKtgh0t27j5Z5IPvlm3I%2fwHMEiS3jnBSD&ev=2",
                    "OnFileClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=Db34znl4Lx0Oq1zpo6o%2Nf4DE5lpjSxbBUtw1dsIWqH8%2fbjLIwGVlIukvlY5suhA5G%2fYZcU2Lx0aiFdfgdfgR7hNwL%2blregzZewZ6wuArnzW9sBqia4vvWq%2bBsGU39FRUuYm94OcSReYRutW%2fXtQ5Vx7lExUKg0P3%2fQRk%2bWuroBUmFR5M0atLoYvduF7Qmb4Vms1Ma4dOAwiCKtgh0t27j5Z5IPvlm3I%2fwHMEiS3jnBSD&ev=2",
                    "OnBundleBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=EPQZxjkhpjUK980SuOfCsTUVMLvFuugK%2f7NaEZDdh5JUt8YNx8PZUKRY2b93LwBFzLYDA3EppPd336FlC3y9%2dfgdfgbUcOP6qdW5k27ef5KwplDMOMh%2bnhF%2blpeguQpact691q70oFry4KYaNbRhKHmCm9wtVmDBbiwGBNW77%2f0lIKintx2O3Dv%2fuCEymreHBITagpX7GXLP0pTQ6O0%2fdMEH%2fI4Z2dPtUHa3ps7G4V%2fvDspyR&ev=2"
                }
            ]
        }
    ],
}

Commerce Video Spotlight: VAST XML

Embedded in the JSON File

{
  "status": "OK",
  "placements": [
    {
      "viewHome_API_desktop-Flagship": [
        {
          "format": "CVS",
          "products": [
            {
              "ProductId": "134679258",
              "OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
              "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
              "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
              "OnBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
              "OnWishlistBeacon": "//b.us5.us.criteo.com/rm?rm_e=..."
            }
          ],
          "products_order": [
            {
              "products": ["134679258"],
              "isMandatory": false
            }
          ],
          "rendering": {
            "optional_legal_text": "This is the optional legal text.",
            "optional_redirect_target": "_blank",
            "background_video_alt_text": "this is the video alternative text",
            "color_mode": "lightcommand",
          },
          "XmlVideoVAST": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<VAST xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" version=\"4.2\">\n  <Ad id=\"1234567890\">\n    <InLine>\n      <AdSystem>Criteo</AdSystem>\n      <AdTitle>OnsiteVideo</AdTitle>\n      <Impression><![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...]]></Impression>\n      <Error><![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...&ev=4]]></Error>\n      <Creatives>\n        <Creative id=\"12345\">\n          <Linear>\n            <Duration>00:00:20.020</Duration>\n            <TrackingEvents>\n              <Tracking event=\"start\"><![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...&ev=4]]></Tracking>\n              <Tracking event=\"firstQuartile\"><![CDATA[...]]></Tracking>\n              <Tracking event=\"midpoint\"><![CDATA[...]]></Tracking>\n              <Tracking event=\"thirdQuartile\"><![CDATA[...]]></Tracking>\n              <Tracking event=\"complete\"><![CDATA[...]]></Tracking>\n              <Tracking event=\"mute\"><![CDATA[...]]></Tracking>\n              <Tracking event=\"unmute\"><![CDATA[...]]></Tracking>\n              <Tracking event=\"pause\"><![CDATA[...]]></Tracking>\n              <Tracking event=\"resume\"><![CDATA[...]]></Tracking>\n            </TrackingEvents>\n            <VideoClicks>\n              <ClickThrough id=\"Criteo\"><![CDATA[https://retailer.com/category/test]]></ClickThrough>\n              <ClickTracking><![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...&ev=4]]></ClickTracking>\n            </VideoClicks>\n            <MediaFiles>\n              <MediaFile id=\"test_video\" delivery=\"progressive\" width=\"640\" height=\"360\" type=\"video/mp4\" scalable=\"true\" maintainAspectRatio=\"true\">\n                <![CDATA[https://static.criteo.net/design/dt/commerce_max/retailer/test_video.mp4]]>\n              </MediaFile>\n            </MediaFiles>\n          </Linear>\n        </Creative>\n      </Creatives>\n      <AdVerifications>\n        <Verification vendor=\"criteo.com-omid\">\n          <JavaScriptResource apiFramework=\"omid\" browserOptional=\"true\">\n            <![CDATA[https://static.criteo.net/banners/js/omidjs/stable/omid-validation-verification-script-for-retail-media.js]]>\n          </JavaScriptResource>\n          <VerificationParameters><![CDATA[{\"beacons\": {\"omidTrackView\": \"...\"}}]]></VerificationParameters>\n          <TrackingEvents>\n            <Tracking event=\"verificationNotExecuted\"><![CDATA[...]]></Tracking>\n          </TrackingEvents>\n        </Verification>\n      </AdVerifications>\n    </InLine>\n  </Ad>\n</VAST>"
        }
      ]
    }
  ]
}

XML Video VAST Standalone

This is the content of XmlVideoVAST from the example above, presented as a standalone XML snippet for better readability.

<?xml version="1.0" encoding="utf-8"?>
<VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema"
      version="4.2">
  <Ad id="1234567890">
    <InLine>
      <AdSystem>Criteo</AdSystem>
      <AdTitle>OnsiteVideo</AdTitle>
      <Impression><![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...]]></Impression>
      <Error><![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...&ev=4]]></Error>
      <Creatives>
        <Creative id="12345">
          <Linear>
            <Duration>00:00:20.020</Duration>
            <TrackingEvents>
              <Tracking event="start"><![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...&ev=4]]></Tracking>
              <Tracking event="firstQuartile"><![CDATA[...]]></Tracking>
              <Tracking event="midpoint"><![CDATA[...]]></Tracking>
              <Tracking event="thirdQuartile"><![CDATA[...]]></Tracking>
              <Tracking event="complete"><![CDATA[...]]></Tracking>
              <Tracking event="mute"><![CDATA[...]]></Tracking>
              <Tracking event="unmute"><![CDATA[...]]></Tracking>
              <Tracking event="pause"><![CDATA[...]]></Tracking>
              <Tracking event="resume"><![CDATA[...]]></Tracking>
            </TrackingEvents>
            <VideoClicks>
              <ClickThrough id="Criteo">
                <![CDATA[https://retailer.com/category/test]]>
              </ClickThrough>
              <ClickTracking>
                <![CDATA[https://b.us5.us.criteo.com/rm?rm_e=...&ev=4]]>
              </ClickTracking>
            </VideoClicks>
            <MediaFiles>
              <MediaFile id="test_video"
                         delivery="progressive"
                         width="640"
                         height="360"
                         type="video/mp4"
                         scalable="true"
                         maintainAspectRatio="true">
                <![CDATA[https://static.criteo.net/design/dt/commerce_max/retailer/test_video.mp4]]>
              </MediaFile>
            </MediaFiles>
          </Linear>
        </Creative>
      </Creatives>
      <AdVerifications>
        <Verification vendor="criteo.com-omid">
          <JavaScriptResource apiFramework="omid" browserOptional="true">
            <![CDATA[https://static.criteo.net/banners/js/omidjs/stable/omid-validation-verification-script-for-retail-media.js]]>
          </JavaScriptResource>
          <VerificationParameters>
            <![CDATA[{"beacons": {"omidTrackView": "..."}}]]>
          </VerificationParameters>
          <TrackingEvents>
            <Tracking event="verificationNotExecuted"><![CDATA[...]]></Tracking>
          </TrackingEvents>
        </Verification>
      </AdVerifications>
    </InLine>
  </Ad>
</VAST>

Specifications

General

The Commerce Video Spotlight unit is composed of two parts:
- A branding video zone
- A product zone
The branding zone dimensions will only allow a 16:9 ratio.
The format must be able to host up to 5 products, which is also the maximum number of products.
The product zone is clickable. The user can click on the product zone to be redirected to the product detail page.

Video Specifications

The video asset must meet the following requirements:

Attribute	Specification
File size	≤300 MB
Supported file types	MP4
Video ratio	16:9
Max duration	30 seconds
Max dimensions	640 x 360 px

Legal Text Option

Attribute	Specification
Maximum characters	90 characters (including spaces)

Alt Text

Attribute	Specification
Maximum characters	120 characters, multi-line text field

Closed Captions

Attribute	Specification
File type	`.vtt`
Encoding	UTF-8

Desktop

The desktop version of the Commerce Video Spotlight is designed as follows:
- The branding video zone is on the left,
- The product zone is on the right.
The product zone includes clickable navigation arrows that allow the user to change the displayed product. If there is only one product in the carousel, the arrows will not display.

Mobile

The mobile version of the Commerce Video Spotlight is designed as follows:
- The branding video zone is on the top,
- The product zone is on the bottom. The height is defined by the retailer.
The user can browse the product using the horizontal slider. Below, some dots indicate the user's position on the slider. There is one dot per product. The product viewable dot should be darker to indicate the position. If there is only one product in the slider, the dot is not displayed.

Available Options

The following optional settings allow advertisers to customize the interaction and appearance of the Commerce Video Spotlight format.

Redirection

The branding zone can be clickable and contains the redirection. The user can click anywhere, except on the buttons and legal text, to be redirected.

When a user clicks on the video:
- If a redirection link (ClickThrough) is provided in the VAST XML, users should be redirected to this link.
- If a redirection link is not provided in the VAST XML, the video should pause/resume.

Condition	Behavior
`ClickThrough` link present	Opens the target URL
No `ClickThrough` link	Video toggles play/pause

There are two possible redirection options:
- _self (opens in the same tab),
- _blank (opens in a new tab).

Legal Text

Legal text can be added as an option (90 characters maximum, including spaces).

If the option is enabled:

While hovering over the video, an (i) icon is displayed in the top-left corner, like so:

When hovering the (i) icon, the legal text is displayed on top of the video like so:

On mobile screens, the legal text will always display between the branding video zone and the product zone, increasing the unit's total height.

Color Mode

The advertiser can choose between two preset color modes to ensure the best contrast between the buttons and the video. Buttons and options appear while hovering over the Branding Zone.

Light mode

Background color: #FFFFFF 80%
Icon color: #6A6A6A
Legal text color: #000000

Dark mode

Background color: #6A6A6A 80%
Icon color: #FFFFFF
Legal text color: #FFFFFF

Technical Details

Global

The border should be fixed to 1px and should surround the video creative and the product zone.
Depending on placement size, the format dimensions may vary. However, the video ratio will remain constant at 16:9.

1351 — Placement width ≥ `888 px` Fixed height of 250 px. The product zone adapts to the placement in width

Desktop (placement width > 445 px)

When multiple products are available, the navigation arrows always have the same position within the product zone. Arrows design is customizable to match the retailer UI and native components.
When only one product is available, the navigation arrows are no longer displayed and the product listing is centered horizontally and vertically in the product zone.

Mobile (placement width ≤ 445 px)

There is 10 px padding around each product listing.
Dots indicate the different products for a user to view. Dots design is customizable to match the retailer UI and native components.
When the user releases the slide, the main product displayed is the one with the highest percentage of display.
When multiple products are available :
- For the products on the left and right, 80% of the first product is in view and 20% of the secondary product is in view.
- For the other products, 80% of the main product is in view and 10% of the products on each side are in view.
When only one product is available, the navigation dots and the border around the product zone are no longer displayed. The product listing is centered horizontally and vertically in the product zone.