Expand my Community achievements bar.

Ask our product team on how to best grow your experimentation and personalization strategies with Target during our AMA on May 6th!

Mark Solution

This conversation has been locked due to inactivity. Please create a new post.

Images in responsive Website

Avatar

Level 2

7/22/19

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:

  1. Edit HTML and replace all urls -> Not applicable for business analysts
  2. Create modification an replace urls via CSS selector -> Not applicable for business analysts
  3. 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.