UseCase 1:
Use AT VEC to replace images in Header and Teaser in a responsive website
Business users / non-technical users should be able to run A/B test for images in header, teaser or YouTube Videos. For their responsive website they are using images in different ratios / renditions / qualities implemented as html standards like srcset-attribute. So, attributes with several URLs are rendered (in some cases by using DynamicMedia).
Examples:
<img src="https://sxgxx.scene7.com/customerx/Panel" srcset="https://sxgxx.scene7.com/customerx/Panel?$E32-S$ 576w,https://sxgxx.scene7.com/customerx/Panel?$E32-XL$ 1200w,https://sxgxx.scene7.com/customerx/Panel?$E32-XS$ 320w,https://sxgxx.scene7.com/customerx/Panel?$E32-L$ 992w,https://sxgxx.scene7.com/customerx/Panel?$E32-M$ 768w" data-asset-id="1234">
<div class="js-srcset hero_img" data-srcset-xs="https://sxgxx.scene7.com/customerx/oranges?$E21-XS$" data-srcset-sm="https://sxgxx.scene7.com/customerx/oranges?$E21-S$" data-srcset-md="https://sxgxx.scene7.com/customerx/oranges?$E21-M$" data-srcset-lg="https://sxgxx.scene7.com/customerx/oranges?$E21-L$" data-srcset-xl="https://sxgxx.scene7.com/customerx/oranges?$E21-XL$" title="image" data-asset-id="1234" style="background-image: url(“https://sxgxx.scene7.com/customerx/oranges?$E21-XL$”);">
<picture class="a-image a-image--ratio-xl-21x7 a-image--ratio-l-21x7 a-image--ratio-m-21x7 a-image--ratio-s-21x7 a-image--ratio-21x7 a-image--loaded"><source data-srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/xl1440/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/xl2880/r21-7.jpeg 2x" media="(min-width: 1440px)" srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/xl1440/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/xl2880/r21-7.jpeg 2x"> <source data-srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/l1024/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/l2048/r21-7.jpeg 2x" media="(min-width: 1024px)" srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/l1024/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/l2048/r21-7.jpeg 2x"> <source data-srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/m768/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/m1536/r21-7.jpeg 2x" media="(min-width: 768px)" srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/m768/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/m1536/r21-7.jpeg 2x"> <source data-srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/s480/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/s960/r21-7.jpeg 2x" media="(min-width: 480px)" srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/s480/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/s960/r21-7.jpeg 2x"> <source data-srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/xs320/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/xs640/r21-7.jpeg 2x" srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/xs320/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/xs640/r21-7.jpeg 2x"> <img alt="" data-srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/xs320/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/xs640/r21-7.jpeg 2x" srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/xs320/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/xs640/r21-7.jpeg 2x" class="a-image__item lazyloaded"></picture>
<img class="lazyloaded" data-src="/content/dam/master/teaser.png/_jcr_content/renditions/original.web.1280.960.png" data-srcset="/content/dam/master/teaser.png/_jcr_content/renditions/original.web.325.244.png 325w,/content/dam/master/teaser.png/_jcr_content/renditions/original.web.780.585.png 780w,/content/dam/master/teaser.png/_jcr_content/renditions/original.web.1280.960.png 1280w,/content/dam/master/teaser.png/_jcr_content/renditions/original.web.1920.1440.png 1920w" data-sizes="x" alt="test" data-srcset-webp="" sizes="x" srcset="/content/dam/master/teaser.png/_jcr_content/renditions/original.web.325.244.png 325w,/content/dam/master/teaser.png/_jcr_content/renditions/original.web.780.585.png 780w,/content/dam/master/teaser.png/_jcr_content/renditions/original.web.1280.960.png 1280w,/content/dam/master/teaser.png/_jcr_content/renditions/original.web.1920.1440.png 1920w" src="/content/dam/master/teaser.png/_jcr_content/renditions/original.web.1280.960.png">
Issue:
VEC will not replace all the urls just the src attribute -> A/B Tests does not work in responsive design
Proposed workaround:
- Edit HTML and replace all urls -> Not applicable for business analysts
- Create modification an replace urls via CSS selector -> Not applicable for business analysts
- Create HTML Offers with code snipplets -> Doubles effort and developer is needed for each new image
UseCase 2:
Sharing images from AEM with AT over Experience Cloud
Issue: All assets are loaded in a flat hierarchy. That breaks down the performance. It’s not possible to just offer assets for a specific tenant. Also the folder structure which is still there in Experience Cloud Assets is removed.
Customer Rating: Not usable for high amount of assets (> 10k). Business analysts working on target will not be able to work in AEM to move / delete assets in a “shared with target” folder. BA should be able to use whole assets catalog for a country.
