Interactieve afbeeldingen interactive-images

U kunt statische afbeeldingen eenvoudig verrijken en aantrekkelijke ervaringen voor klanten creëren door 'onoverzichtelijke' hotspots naar een afbeelding te slepen. Slepbare hotspots combineren aanvullende informatie over een product of service met een directe, verkooppuntfunctie 'Toevoegen aan winkelwagentje' of 'Kopen'. Klanten kunnen deze hotspots selecteren die rechtstreeks aan het product of de service zijn gekoppeld, deze aan een winkelwagentje toevoegen of aan een webpagina zijn gekoppeld. Directe ervaringen zoals deze verhogen de betrokkenheid van klanten en conversies op uw website.

Hier volgt een blaasbare banner met een pop-upvenster van QuickView. Een gebruiker activeert de Snelle weergave door op de cirkel of de hotspot op het model te tikken.

Zie interactieve beelden in actieop de Web-pagina hierboven wordt afgebeeld.

Controleren hoe interactieve afbeeldingsbanners worden gemaakt watch-how-interactive-image-banners-are-created

Bekijk een analyse op hoe de interactieve beeldbanners(10 minuten en 33 seconden) worden gecreeerd. U leert ook hoe u interactieve afbeeldingsbanners kunt voorvertonen, bewerken en leveren.

Snel starten: Interactieve afbeeldingen quick-start-interactive-images

De volgende stapsgewijze beschrijving van de workflow is ontworpen om u te helpen snel aan de slag te gaan met interactieve afbeeldingen in Adobe Experience Manager Assets.

Zoek de rubriek van het Voorbeeld binnen sommige van de Snelle taken van het Begin. Het bevat een korte zelfstudie die op a Web-pagina voorbeeld gebaseerd is dat nog geen Interactieve Beelden heeft die aan hetworden toegevoegd.

De zelfstudie helpt u de stappen te illustreren voor het integreren van interactieve afbeeldingen op uw eigen website.

Stappen voor interactieve afbeeldingen:

(Optioneel) Hotspotvariabelen identificeren optional-identifying-hotspot-variables

Begin door dynamische variabelen te identificeren die door uw bestaande implementatie van QuickView worden gebruikt zodat u hotspot gegevens kunt ingaan om het interactieve beeld tot stand te brengen.

Wanneer u hotspots toevoegt aan een bannerafbeelding in Experience Manager Assets, wijst u een SKU (Stock Keeping Unit) toe. SKU is een uniek herkenningsteken voor elk verschillend product of de dienst die u aanbiedt. Voeg desgewenst extra optionele variabelen toe aan elke hotspot. Dergelijke hotspotvariabelen worden later gebruikt om hotspots te laten overeenkomen met Quickview-inhoud.

Het is belangrijk om het aantal en het type variabelen correct te identificeren om met hotspot gegevens te associëren. Elke hotspot die aan een bannerafbeelding wordt toegevoegd, moet voldoende informatie bevatten om het product ondubbelzinnig te identificeren in het bestaande back-endsysteem.

Er zijn verschillende manieren om een set variabelen te identificeren die voor hotspot-gegevens moet worden gebruikt.

Soms is het voldoende om IT-specialisten te raadplegen die verantwoordelijk zijn voor de bestaande implementatie van QuickView. Dergelijke mensen zullen waarschijnlijk weten wat de minimumreeks gegevens wordt vereist om Snelle mening in het systeem te identificeren. Het is echter ook mogelijk om eenvoudig het bestaande gedrag van de front-end code te analyseren.

De meeste implementaties van de Snelle mening gebruiken het volgende paradigma:

Vervolgens kunt u verschillende delen van de bestaande website bezoeken waar de functie QuickView is geïmplementeerd. Vervolgens activeert u de Quickview en de Ajax-URL die via webpagina is verzonden, om de gegevens of inhoud van de Snelle weergave te laden.

Normaal is er geen behoefte aan u om het even welke gespecialiseerde het zuiveren hulpmiddelen te gebruiken. Moderne webbrowsers beschikken over webinspecteurs die hun werk naar behoren doen. Hieronder volgen enkele voorbeelden van webbrowsers met webcontroles:

Wanneer netwerkcontrole in browser wordt aangezet, teweeg de Snelle mening op de pagina.

Zoek nu de URL van Quickview Ajax in het netwerklogboek en kopieer de geregistreerde URL voor toekomstige analyse. Gewoonlijk wanneer u de Quickview teweegbrengt zijn er talrijke verzoeken die naar de server worden verzonden. De URL van Quickview Ajax is doorgaans een van de eerste in de lijst. Het heeft een complex gedeelte of pad voor een querytekenreeks en het MIME-type voor reactie is text/html , text/xml of text/javascript .

Tijdens dit proces is het belangrijk om verschillende delen van uw website te bezoeken, met verschillende productcategorieën en typen. De reden hiervoor is dat URL's in de Snelle weergave onderdelen kunnen bevatten die algemeen gelden voor een bepaalde categorie websites. Ze veranderen echter alleen als u een ander gedeelte van de website bezoekt.

In het eenvoudigste geval, is het enige veranderlijke deel in Quickview URL productSKU. In dit geval is de SKU-waarde het enige gegevensstuk dat u nodig hebt om hotspots toe te voegen aan de bannerafbeelding.

In complexe gevallen heeft de URL van de Snelle weergave echter naast de SKU ook verschillende elementen. Variabele elementen kunnen bijvoorbeeld categorie-id, kleurcode en code voor grootte zijn. In dergelijke gevallen is elk element een afzonderlijke variabele in de definitie van hotspot-gegevens in de functie voor onoverzichtelijke interactieve afbeeldingen in Experience Manager Assets.

Bekijk de volgende voorbeelden van URL's van QuickView en de resulterende hotspot-variabelen:

Voorbeeld

U kunt de zelfde benadering toepassen die in de drie bovenstaande voorbeelden op de demo Web-paginawordt gebruikt.

De demo-webpagina heeft verschillende productminiaturen, elk met een Quickview-knop met het label "Meer weergeven". Selecteer elke knop terwijl het foutopsporingsprogramma van uw webbrowser nog is geactiveerd en noteer de opgenomen URL's van de Snelle weergave. Nadat u alle vier de product Snelle meningen activeert beschikbaar op de pagina, hebt u de volgende lijst van de verzoeken van de Snelle mening die aan het achterste eind worden gemaakt:

Wanneer u de serveraanroepen bekijkt, ziet u dat productspecifieke informatie alleen aanwezig is in het aanvraagpad. U merkt ook op dat het vraagkoord helemaal niet wordt gebruikt en er zijn twee verschillende types van betrokken gegevensstukken:

Op basis van deze informatie heeft de volledige URL van de Snelle weergave het volgende patroon:

/datafeed/$categoryId$-$SKU$.json

Op basis van een dergelijke analyse gebruikt u categoryId en SKU voor hotspots.

U kunt nu een afbeeldingsbanner uploaden en er hotspots aan toevoegen met de functie voor onoverzichtelijke interactieve afbeeldingen in Experience Manager Assets.

(Optioneel) Een voorinstelling voor een interactieve afbeeldingsviewer maken optional-creating-an-interactive-image-viewer-preset

U kunt de standaardvoorinstelling voor een interactieve afbeeldingsviewer buiten de box met de naam Shoppable_Banner gebruiken die bij Experience Manager Assets wordt geleverd. U kunt ook uw eigen aangepaste viewer-voorinstelling maken voor gebruik met interactieve afbeeldingen.

Wanneer u een aangepaste voorinstelling voor een interactieve afbeeldingsviewer maakt, kunt u de weergave van hotspots in de afbeeldingsbanner bepalen. Als onderdeel van het maken van de viewervoorinstelling kunt u een hotspot-afbeelding uit een galerie met vooraf gedefinieerde afbeeldingen gebruiken.

Nadat u de viewervoorinstelling hebt opgeslagen, wordt deze automatisch geactiveerd (ingeschakeld) op de pagina met de lijst met voorinstellingen voor viewers in Experience Manager Assets. Deze functionaliteit houdt in dat het zichtbaar is in de Interactieve component van Media en wanneer u activa bekijkt. Nochtans, om te leveren een interactieve banner met deze vooraf ingestelde kijker, publiceert ook uw vooraf ingestelde kijker. Deze regel geldt voor aangepaste of uit-van-box viewer-voorinstellingen.

om een Interactieve de kijker van het Beeld tot stand te brengen vooraf ingesteld:

Een afbeeldingsbanner uploaden uploading-an-image-banner

Als u reeds de beelden hebt geüpload die u wilt gebruiken, aan de volgende stap vooruitgaan, toevoegend hotspots aan een beeldbanner.

om een beeldbanner te uploaden:

Hotspots toevoegen aan een afbeeldingsbanner adding-hotspots-to-an-image-banner

U kunt hotspots toevoegen aan een afbeeldingsbanner met de editor op de pagina Hotspot-beheer.

Wanneer u hotspots toevoegt, kunt u deze definiëren als een pop-upweergave in QuickView, als een hyperlink of als een Experience-fragment.

Zie Fragmenten van de Ervaring.

Opties voor Ongedaan maken en Opnieuw worden in de rechterbovenhoek van de pagina ondersteund tijdens de huidige sessie voor maken en bewerken.

Wanneer u klaar bent met het maken van uw interactieve afbeelding, kunt u Voorvertoning gebruiken om een voorstelling te zien van hoe uw interactieve afbeelding eruit ziet voor klanten.

Zie (Optioneel) Een voorvertoning weergeven van interactieve afbeeldingen.

om hotspots aan een beeldbanner toe te voegen:

(Optioneel) Interactieve afbeeldingen voorvertonen optional-previewing-interactive-images

Met Voorvertoning kunt u zien hoe uw interactieve afbeelding er uitziet voor klanten. Met Voorvertoning kunt u ook de hotspots van de afbeelding testen om te controleren of deze zich naar behoren gedragen.

Als u tevreden bent met de interactieve afbeelding, kunt u deze publiceren.
Zie de Video of Kijker van het Beeld op een Web-paginainbedden.
Zie Verbinding URLs aan uw Webtoepassing. De op URL gebaseerde methode van het verbinden is niet mogelijk als uw interactieve inhoud verbindingen met relatieve URLs, in het bijzonder verbindingen met Experience Manager Sites pagina's heeft.
Zie Dynamic Media Assets aan Pagina'stoevoegen.

aan voorproef interactieve beelden:

Interactieve Publish-afbeeldingselementen publishing-interactive-image-assets

Zie Publish Assetsvoor details op hoe te om interactieve beeldactiva te publiceren.

Een interactieve afbeelding met uw website integreren integrating-an-interactive-image-with-your-website

Nadat u een bannerafbeelding hebt geüpload, hotspots hebt toegevoegd en de interactieve afbeelding hebt gepubliceerd, kunt u deze toevoegen aan uw websitepagina.

Als u een Experience Manager Sites-klant bent, kunt u de interactieve afbeelding toevoegen door de component Interactieve media naar de pagina te slepen. Zie Dynamic Media Assets aan Pagina'stoevoegen.

Als u een zelfstandige Experience Manager Assets-klant bent, kunt u de interactieve afbeelding handmatig aan uw website toevoegen, zoals in deze sectie wordt beschreven.

Voorbeeld

Gebruikend de demowebsite als voorbeeld, merk op dat het beeld van de drie individuen een statische IMG markering is:

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

Integratie is net zo eenvoudig als het verwijderen van de tag IMG en het vervangen door de gekopieerde insluitcode uit Experience Manager Assets. U kunt zien dat het resultaat het shoppable interactieve beeld op de pagina met drie cirkelhotspotstoont.

Als u een 'uitsnijding' wilt toepassen op een verwisselbare interactieve afbeelding voor een responsieve omgeving, neemt u het configuratiekenmerk Interactive Image ZoomView.iscommand op in het pad. In dit geval wordt de component ZoomView aangeroepen en is iscommand de opdracht "uitsnijden" voor het bedienen van afbeeldingen die u toepast.

Zie ZoomView.iscommandconfiguratieattributen.

Zie gewasbeeld het dienen bevel.

U bent nu klaar om de interactieve afbeelding te integreren met een bestaande QuickView op uw website.

Een interactieve afbeelding integreren met een bestaande QuickView integrating-an-interactive-image-with-an-existing-quickview

De laatste stap in dit proces is het integreren van de interactieve afbeelding met een bestaande Quickview-implementatie op uw website. Er is geen oplossing voor de integratie die in alle gevallen werkt. Elke implementatie van Quickview is uniek en een specifieke benadering is nodig. Daarom is het nuttig om de hulp van een front-end IT-persoon in te roepen.

De bestaande implementatie van QuickView vertegenwoordigt normaal gesproken een reeks onderling samenhangende acties die op de webpagina in de volgende volgorde plaatsvinden:

Deze vraag vertegenwoordigt niet noodzakelijk onafhankelijke openbare API vraag die door de Web-pagina logica van een willekeurige stap wordt geroepen. In plaats daarvan, is het een geketende vraag waar elke volgende stap in de laatste fase (callback) van de vorige stap verborgen is.

Wanneer de verschuifbare interactieve afbeelding stap 1 en gedeeltelijk stap 2 vervangt, tikt een gebruiker op een hotspot in de verschuifbare afbeelding. Deze gebruikersinteractie wordt door de viewer afgehandeld. De viewer retourneert een gebeurtenis naar de webpagina die alle hotspotgegevens bevat die eerder aan Experience Manager Assets zijn toegevoegd.

In een dergelijke gebeurtenishandler doet de front-end code het volgende:

De insluitcode die door Experience Manager Assets wordt geretourneerd, heeft een gebruiksklare gebeurtenishandler die als commentaar wordt gemarkeerd, zoals in het volgende gemarkeerde codefragment wordt getoond:

        var s7interactiveimageviewer = new s7viewers.InteractiveImage({
            "containerId" : "s7interactiveimage_div",
            "params" : {
                "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
                "contenturl" : "https://aodmarketingna.assetsadobe.com/",
                "config" : "/etc/dam/presets/viewer/Shoppable_Media",
                "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
        })
        /* // Example of interactive image event for Quickview.
             s7interactiveimageviewer.setHandlers({
                "quickViewActivate": function(inData) {
                    var sku=inData.sku; //SKU for product ID
                    //To pass other parameter from the hotspot, add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //See your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

Het is dus alleen nodig de commentaarmarkering van de code ongedaan te maken en de dummy-handlertekst te vervangen door de code die specifiek is voor de specifieke webpagina.

Het proces voor het samenstellen van de URL van de Snelle weergave is tegengesteld aan het proces voor het identificeren van hotspot-variabelen die eerder zijn behandeld.

Zie hotspot variabelenidentificeren.

Met behulp van de vorige URL-voorbeelden van Quickview kunt u in de volgende voorbeelden zien hoe de URL van de QuickView in elk geval wordt samengesteld:

De laatste stap om de Quickview URL teweeg te brengen en het paneel van de Snelle mening te activeren vereist de hulp van een front-end persoon van IT van uw werk. Zij hebben de kennis om het best te weten hoe te om de implementatie van de Snelle mening van de juiste stap nauwkeurig teweeg te brengen, die een klaar-aan-gebruiksKickview URL hebben.

U kunt zien hoe deze stappen worden toegepast op de demo-website om een onoverzichtelijke interactieve afbeelding volledig te integreren met de Quickview-code. Eerder werd de structuur van de URL van de Snelle weergave als volgt geïdentificeerd:

/datafeed/$categoryId$-$SKU$.json

Als u deze URL wilt reconstrueren binnen de quickViewActivate -handler, kunt u de velden categoryId en SKU gebruiken. Deze velden zijn beschikbaar in het inData -object dat door de code van de viewer wordt doorgegeven aan de handler:

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

De demowebsite activeert het dialoogvenster Snelle weergave met een eenvoudige functieaanroep loadQuickView() . Deze functie heeft slechts één argument, namelijk de gegevens-URL van de Snelle weergave. De laatste stap voor het integreren van de verschuifbare interactieve afbeelding is dan ook het toevoegen van de volgende coderegel aan de quickViewActivate -handler:

loadQuickView(quickViewUrl);

Hier volgt de volledige broncode:

 var s7interactiveimageviewer = new s7viewers.InteractiveImage({
  "containerId" : "s7interactiveimage_div",
  "params" : {
   "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
   "contenturl" : "https://aodmarketingna.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Media",
   "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
 })
   s7interactiveimageviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku;
     var categoryId=inData.categoryId;
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   });
 s7interactiveimageviewer.init();

De definitieve demowebsite met het volledig geïntegreerde interactieve beeld.

Aangepaste pop-ups maken met Snelle weergave using-quickviews-to-create-custom-pop-ups

Zie douane pop-up Windows® gebruikend QuickViewcreëren.