Overview
The Commerce Video Grid Duet format combines a video file with one or more product SKUs.
The image below showcases the desktop format at the top and the mobile format at the bottom.
Response Keys
The following is a description of the different keys used to render ads.
In the Rendering Section
Key | Description |
|---|
color_mode
| This parameter controls the visibility and color theme of player controls (play/pause, mute/unmute, closed captions, and the legal text “i” icon) to ensure sufficient contrast over the video background. Required:true Default:lightcommand isRadioDisplay:true
There are two default theme options for the control elements to ensure visibility over any video file provided: It can have one of the following values: lightcommand→Light mode#000000darkcommand→Dark mode#FFFFFF
|
optional_redirect_target
| Standard option to open the link on current page or new page. Ignored if noClickThroughis provided in the VAST. Values: _blank(new tab),
_self(same tab).
|
optional_legal_text
| Legal text add-on for the video. Max90 characters, including spaces. Desktop: visible on hover of the “i” icon; Mobile / App: always visible below the video. |
background_color
| Video background color. Required:true Default:#CCCCCC |
background_video_alt_text
| Video alt text. Required:true maxChars:120
|
The video-specific keys (video_background, video_caption_file, video_optional_redirect_url and video_optional_redirect_url_app) are defined at the VAST level and not part of the rendering schema.
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 part (left side). |
OR | |
XmlVideoVAST
| A VAST XML to provide a video player |
Sample Response
Commerce Video Grid Duet: VAST Tag
{
"status": "OK",
"placements": [
{
"viewHome_API_desktop-Flagship": [
{
"format": "CVGD",
"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"
}
],
"rendering": {
"background_color": "#CCCCCC",
"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 Grid Duet: VAST XML
Embedded in the JSON File
{
"status": "OK",
"placements": [
{
"viewHome_API_desktop-Flagship": [
{
"format": "CVGD",
"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"
}
],
"rendering": {
"background_color": "#CCCCCC",
"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>Onsite Branding Video</AdTitle>\n <Description>This is the primary messaging text.</Description>\n <Advertiser>The Brand</Advertiser>\n <Impression><![CDATA[https://b.us5.us.criteo.com/rm?rm_e=IMP_TRACKING_URL]]></Impression>\n <Error><![CDATA[https://b.us5.us.criteo.com/rm?rm_e=ERROR_TRACKING_URL]]></Error>\n <Creatives>\n <Creative id=\"creative123\">\n <Linear>\n <Duration>00:00:20.000</Duration>\n <TrackingEvents>\n <Tracking event=\"start\"><![CDATA[https://tracking/start]]></Tracking>\n <Tracking event=\"firstQuartile\"><![CDATA[https://tracking/firstQuartile]]></Tracking>\n <Tracking event=\"midpoint\"><![CDATA[https://tracking/midpoint]]></Tracking>\n <Tracking event=\"thirdQuartile\"><![CDATA[https://tracking/thirdQuartile]]></Tracking>\n <Tracking event=\"complete\"><![CDATA[https://tracking/complete]]></Tracking>\n </TrackingEvents>\n <VideoClicks>\n <ClickThrough id=\"brandingClick\"><![CDATA[https://retailer.com/branding-landing-page]]></ClickThrough>\n <ClickTracking><![CDATA[https://tracking/click]]></ClickTracking>\n </VideoClicks>\n <MediaFiles>\n <MediaFile delivery=\"progressive\" type=\"video/mp4\" width=\"640\" height=\"360\" scalable=\"true\" maintainAspectRatio=\"true\">\n <![CDATA[https://static.retailer.com/videos/branding_video.mp4]]>\n </MediaFile>\n </MediaFiles>\n </Linear>\n </Creative>\n </Creatives>\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>Onsite Branding Video</AdTitle>
<Description>This is the primary messaging text.</Description>
<Advertiser>The Brand</Advertiser>
<Impression><![CDATA[https://b.us5.us.criteo.com/rm?rm_e=IMP_TRACKING_URL]]></Impression>
<Error><![CDATA[https://b.us5.us.criteo.com/rm?rm_e=ERROR_TRACKING_URL]]></Error>
<Creatives>
<Creative id="creative123">
<Linear>
<Duration>00:00:20.000</Duration>
<TrackingEvents>
<Tracking event="start"><![CDATA[https://tracking/start]]></Tracking>
<Tracking event="firstQuartile"><![CDATA[https://tracking/firstQuartile]]></Tracking>
<Tracking event="midpoint"><![CDATA[https://tracking/midpoint]]></Tracking>
<Tracking event="thirdQuartile"><![CDATA[https://tracking/thirdQuartile]]></Tracking>
<Tracking event="complete"><![CDATA[https://tracking/complete]]></Tracking>
</TrackingEvents>
<VideoClicks>
<ClickThrough id="brandingClick">
<![CDATA[https://retailer.com/branding-landing-page]]>
</ClickThrough>
<ClickTracking><![CDATA[https://tracking/click]]></ClickTracking>
</VideoClicks>
<MediaFiles>
<MediaFile delivery="progressive"
type="video/mp4"
width="640"
height="360"
scalable="true"
maintainAspectRatio="true">
<![CDATA[https://static.retailer.com/videos/branding_video.mp4]]>
</MediaFile>
</MediaFiles>
</Linear>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>
Specifications
General
- The Commerce Video Grid Duet unit is composed of two parts:
- A branding video zone
- A product zone
- The branding zone dimensions will only allow a 9:16 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
Attribute | Specification |
|---|
File size | 300 MB |
Supported file types | MP4 |
Video ratio | 9:16 |
Min duration | 4 seconds |
Max duration | 30 seconds |
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 |
Click Option
User redirection occurs when clicking on the video area, excluding control buttons and the legal text icon.
All clickable elements within the video (e.g., video surface, optional “Add to Cart” button) redirect to the same destination URL defined in the VAST <ClickThrough> section. This ensures a consistent redirection experience across all assets.
Attribute | Specification |
|---|
Redirection URL | There are two possible redirection options: _self(opens in the same tab),
_blank(opens in a new tab).
|
Desktop Overview
The desktop version of the Commerce Video Grid Duet 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 Overview
The mobile version of the Commerce Video Grid Duet is designed as follows:
- The branding video zone is on the left,
- The product zone is on the right,
- 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.
Asset Sizes and 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
9:16.
Width Between 1200px and 1400px
- Between 1440 px and 1200 px browser width, the video remains fixed at 360 × 640 px (9:16 aspect ratio). As the grid narrows, surrounding elements (such as legal text) will wrap and reposition, but the video itself will not scale.
- Video consistently renders at
360 x 640 px and maintains a 9:16 aspect ratio.
- The background color will appear behind the video asset while it’s letterboxed to fill the rest with the video container (top & bottom) to preserve its original aspect ratio.
Width Between 768px and 1200px
- As grid width changes, the unit’s width and height scale automatically with the product grid, while keeping its aspect ratio of 9:16.
- The “Sponsored By” tag will sit below the unit at the bottom right.
- As grid width decreases, the video asset will consistently render, keeping its aspect ratio within the video container.
- The background color will appear behind the video asset while it’s letterboxed to fill the rest with the video container (top & bottom) to preserve its original aspect ratio.
- The legal text is locked at the top of the Video. This area will have a height of 50 px. Messaging text will wrap as unit width changes.
Width Between 480px and 768px
- Below
768 px, the mobile unit renders and resizes to fit the grid width.
- The video asset will scale down to 22% of the video container’s width, maintaining its 9:16 ratio.
- The video and product zone are each 50% of the entire unit.
- The buttons will now render horizontally at the top right of the video area and remain in that position as the video scales.
- The “Sponsored By” tag will sit below the unit at the bottom right.
- Legal text will now render below the video and product zone, across the entire unit. This area will have a height of 50 px. Messaging text will wrap as unit width changes.
Width Below 480px
- As grid width changes, the unit’s width and height adjust.
- The video will render at 100% of the unit’s width. The buttons continue to render horizontally at the top right of the video area.
- The “Sponsored By” tag will sit below the unit at the bottom right.
- Legal text will now render below the video and product zone, across the entire unit. This area will have a height of 50 px. Messaging text will wrap as unit width changes.
What’s next
