Du kan enkelt skapa statiska bilder med engagerande upplevelser för kunderna genom att dra och släppa"köpbara" hotspot-områden på en bild. De köpbara hotspotten kombinerar ytterligare information om en produkt eller tjänst med en direktförsäljningsfunktion,"Lägg i kundvagnen" eller"Köp". Kunderna kan trycka på dessa hotspot-områden som länkar direkt till produkten eller tjänsten, lägga till den i en kundvagn eller länkas till en webbsida. Direktupplevelser som dessa ökar kundernas engagemang och konverteringar på er webbplats.
Här följer en köpbar banderoll med ett popup-fönster i snabbvyn. En användare aktiverar snabbvyn genom att trycka på cirkeln eller aktiveringspunkten på modellen.
Se interaktiva bilder i praktiken på webbsidan som visas ovan.
Se en genomgång på hur interaktiva bildbanderoller skapas (10 minuter och 33 sekunder). Du får också lära dig hur du förhandsgranskar, redigerar och levererar interaktiva bildbanderoller.
Följande steg-för-steg-beskrivning av arbetsflödet hjälper dig att komma igång snabbt med interaktiva bilder i Adobe Experience Manager Assets.
Leta efter Exempel i vissa snabbstartsåtgärder. Den innehåller en kort självstudiekurs som bygger på en exempel på webbsidor som ännu inte har tillagda interaktiva bilder.
Självstudiekursen visar hur du integrerar interaktiva bilder på din egen webbplats.
Interactive Images:
(Valfritt) Identifiera hotspot-variabler. Om du använder Adobe Experience Manager Assets och Dynamic Media fristående identifierar du dynamiska variabler som används i den befintliga QuickView-implementeringen. Om du gör det kan du ange aktiveringspunktsdata när du skapar den interaktiva bilden. Se (Valfritt) Identifiera hotspot-variabler.
Om du använder Experience Manager Sites, Experience Manager e-handel eller båda är det här steget inte nödvändigt.
(Valfritt) Skapa en förinställning för Interactive Image Viewer. Anpassa den grafiska bild som används för att representera aktiveringspunkter. Du behöver inte skapa en egen förinställning för Interactive Image Viewer om du tänker använda den färdiga Interactive Image Viewer-förinställningen med namnet Shoppable_Banner
i stället.
Se (Valfritt) Skapa en förinställning för Interactive Image Viewer.
Överföra en bildbanderoll. Ladda upp bildbanners som du vill göra interaktiva.
Se Överföra en bildbanderoll.
Lägga till aktiveringspunkter i en bildbanderoll. Lägg till en eller flera hotspot-områden i en bildbanderoll. Associera vart och ett med en åtgärd som en hyperlänk, en snabbvy eller ett Experience Fragment. När du har lagt till aktiveringspunkter avslutar du den här uppgiften genom att publicera den interaktiva bilden.
Se Lägga till aktiveringspunkter i en bildbanderoll.
Se Förhandsgranska interaktiva bilder - Valfritt. Om du vill kan du visa en representation av din köpbara banner och testa dess interaktivitet.
Se Publicera resurser om du vill ha information om hur du publicerar interaktiva bildresurser.
Lägga till en interaktiv bild på din webbplats eller på din webbplats i Experience Manager. Om du använder Webbplatser, e-handel eller båda kan du lägga till interaktiva bilder direkt på en webbsida i Experience Manager. Dra Interactive Media-komponenten till sidan. Se Lägga till Dynamic Media-resurser på sidor.
Om du använder Experience Manager Assets och Dynamic Media fristående kopierar du inbäddningskoden på din webbplats. Integrera den sedan med en befintlig snabbvy. Se Integrera en interaktiv bild med webbplatsen.
Om du använder en WCM-fil (Web Content Manager) från tredje part integrerar du den nya interaktiva videon med den befintliga snabbvyn som används på webbplatsen. Se Integrera en interaktiv bild med en befintlig snabbvy.
Den här aktiviteten krävs bara om följande är sant:
Om din implementering av Experience Manager använder e-handel kan du hoppa över den här uppgiften och fortsätta med nästa uppgift.
Börja med att identifiera dynamiska variabler som används i den befintliga QuickView-implementeringen så att du kan ange hotspot-data för att skapa den interaktiva bilden.
När du lägger till aktiveringspunkter i en banderollbild i Experience Manager Assets tilldelar du en SKU (Stock Keeping Unit). SKU:n är en unik identifierare för varje enskild produkt eller tjänst som du erbjuder. Och lägg till valfria variabler till varje hotspot. Sådana hotspot-variabler används senare för att matcha hotspot-områden med Quickview-innehåll.
Det är viktigt att kunna identifiera antalet och typen av variabler som ska kopplas till hotspot-data. Varje hotspot som läggs till i en banderollbild måste innehålla tillräckligt med information för att entydigt identifiera produkten i det befintliga backend-systemet.
Det finns olika sätt att identifiera en uppsättning variabler som ska användas för hotspot-data.
Ibland räcker det att rådfråga IT-specialister som är ansvariga för den befintliga Quickview-implementeringen. Sådana personer vet troligen vilken minimiuppsättning data som krävs för att identifiera Quickview i systemet. Det går dock även att analysera det befintliga beteendet för koden.
De flesta QuickView-implementeringar använder följande paradigm:
Då besöker man olika delar av den befintliga webbplatsen där QuickView-funktionen används. Starta sedan Quickview och hämta den Ajax-URL som skickats av webbsidan för att läsa in QuickView-data eller -innehåll.
Normalt behöver du inte använda några specialverktyg för felsökning. Moderna webbläsare har webbinspektörer som klarar ett bra jobb. Nedan följer några exempel på webbläsare som innehåller webbinspektörer:
Om du vill visa alla utgående HTTP-begäranden i Google Chrome trycker du på F12 för att öppna panelen Utvecklarverktyg och väljer sedan fliken Nätverk.
Tryck på Command+Option+I på en Mac för att öppna panelen Utvecklarverktyg och välj sedan fliken Nätverk.
I Firefox kan du aktivera plugin-programmet för Firebug genom att trycka på F12 och använda fliken Net. Du kan också använda det inbyggda verktyget Granska och fliken Nätverk.
Tryck på Command+Option+I på en Mac för att öppna panelen Utvecklarverktyg och välj sedan fliken Granska.
När nätverksövervakning är aktiverat i webbläsaren utlöser du snabbvyn på sidan.
Nu kan du hitta Quickview Ajax-URL:en i nätverksloggen och kopiera den inspelade URL:en för framtida analys. Vanligtvis skickas flera begäranden till servern när du utlöser snabbvyn. Vanligtvis är Quickview Ajax-URL en en av de första i listan. Den har antingen en komplex frågesträngsdel eller sökväg och dess MIME-svarstyp är antingen text/html
, text/xml
, eller text/javascript
.
Under den här processen är det viktigt att du besöker olika delar av webbplatsen, med olika produktkategorier och typer. Anledningen är att URL-adresser för snabbvyn kan ha delar som är gemensamma för en viss webbplatskategori. De ändras dock endast om du besöker ett annat område på webbplatsen.
I det enklaste fallet är den enda variabeldelen i snabbvyns URL produktens SKU. I det här fallet är SKU-värdet den enda datadel som du behöver för att lägga till aktiveringspunkter i banderollbilden.
I komplexa fall har dock QuickView-webbadressen olika element förutom SKU:n. Olika element kan till exempel innehålla kategori-ID, färgkod och storlekskod. I sådana fall är varje element en separat variabel i hotspot-datadefinitionen i den interaktiva bildfunktionen som kan köpas i Experience Manager Assets.
Titta på följande exempel på QuickView-URL:er och deras resulterande hotspot-variabler:
En SKU, hittades i frågesträngen. |
De inspelade URL:erna för snabbvyn är bland annat följande:
Den enda variabeldelen i URL:en är värdet på strängparametern productId= och det är tydligt ett SKU-värde. Därför behöver aktiveringspunkter bara SKU-fält med värden som |
En SKU, finns i URL-sökvägen. |
De inspelade URL:erna för snabbvyn är bland annat följande:
Variabeldelen finns i den sista delen av banan och blir SKU-värdet för aktiveringspunkterna: |
SKU och kategori-ID i frågesträngen. |
De inspelade URL:erna för snabbvyn är bland annat följande:
I det här fallet finns det två olika delar i URL:en. SKU:n lagras i Därför är hotspot-definitionerna par. Det vill säga ett SKU-värde och en extra variabel som kallas
|
Exempel
Du kan använda samma metod som i de tre exemplen ovan för demowebbsida.
Demonstrationswebbsidan innehåller flera produktminiatyrbilder med en QuickView-knapp med etiketten"See More". Med webbläsarens felsökningsverktyg fortfarande aktiverat markerar du varje knapp och noterar de inspelade URL:erna för snabbvyn. När du har aktiverat alla fyra snabbvyerna för produkten som finns på sidan, finns följande lista över snabbvybegäranden som har gjorts i serverdelen:
/datafeed/Male-Windbreaker.json
/datafeed/Male-SimpleHenley.json
/datafeed/Male-CamoPullover.json
/datafeed/Female-QuiltedDownJacket.json
Om du tittar på serveranropen kan du se att produktspecifik information bara finns i sökvägen för begäran. Du observerar också att frågesträngen inte används alls och att det finns två olika typer av datadelar:
Med hjälp av den här informationen har hela snabbvyns URL följande mönster:
/datafeed/$categoryId$-$SKU$.json
Baserat på en sådan analys skulle du använda categoryId
och SKU
för aktiveringspunkter.
Du är nu redo att ladda upp en bildbanderoll och lägga till hotspot-områden i den med funktionen för interaktiv bild i Experience Manager Assets.
Du kan välja att använda den förinställda interaktiva bildvisningsprogramvaran som är färdig att användas och som kallas Shoppable_Banner
som kommer med Experience Manager Assets. Du kan också skapa en egen förinställning för visningsprogrammet som kan användas med interaktiva bilder.
När du skapar en anpassad förinställning för Interactive Image Viewer kan du bestämma utseendet på aktiveringspunkter i bildbanderollen. När du skapar visningsförinställningen kan du välja att använda en aktiveringspunktsbild från ett galleri med fördefinierade bilder.
När du har sparat visningsförinställningen aktiveras den automatiskt (aktiveras) på listsidan för visningsförinställningar i Experience Manager Assets. Den här funktionen innebär att den är synlig i komponenten Interactive Media och när du visar en resurs. Men leverera en interaktiv banderoll med den här visningsförinställningen, publicera visningsförinställningen också. Den här regeln gäller för anpassade eller färdiga visningsprogramförinställningar.
Så här skapar du en förinställning för Interactive Image Viewer:
Gå till vänster Tools > Assets > Viewer Presets.
I sidans övre högra hörn trycker du Create.
I dialogrutan Ny visningsförinställning för visningsprogrammet skriver du ett namn som beskriver förinställningen för det interaktiva visningsprogrammet för banderollen.
Titeln visas på listsidan för visningsförinställningar när du har sparat.
I listrutan Multimedietyp väljer du Interactive Image.
Välj Create.
Tryck på knappen Appearance -fliken.
Gör något av följande:
I sidans övre högra hörn trycker du Save.
Var noga med att publicera den nya visningsförinställningen.
Se Publicera förinställningar för visningsprogram.
Du kan nu ladda upp en bildbanderoll.
Om du redan har överfört de bilder du vill använda går du vidare till nästa steg, Lägga till aktiveringspunkter i en bildbanderoll.
Så här överför du en bildbanderoll:
Ladda upp bildbanners som du vill göra interaktiva.
Se Överför resurser.
Nu kan du lägga till hotspot-områden i bildbanderollen; se nästa uppgift nedan.
Du kan lägga till aktiveringspunkter i en bildbanderoll med redigeraren på sidan Hantering av aktiveringspunkter.
När du lägger till aktiveringspunkter kan du definiera dem som en snabbvypopup-visning, som en hyperlänk eller som en upplevelsefragment.
Delningsverktygen för sociala medier i Interactive Image stöds inte när du bäddar in visningsprogrammet i ett Experience Fragment. Använd eller skapa i stället visningsförinställningar som inte har verktyg för delning av sociala medier. Med sådana visningsförinställningar kan du bädda in dem i Experience Fragments.
Alternativen Ångra och Gör om, nära det övre högra hörnet på sidan, stöds under den aktuella skaps-/redigeringssessionen.
När du är klar med att skapa en interaktiv bild kan du använda Förhandsgranska för att se hur den interaktiva bilden ser ut för kunderna.
Se (Valfritt) Förhandsgranska interaktiva bilder.
När du lägger till aktiveringspunkter i en bild i en interaktiv bild eller en Carousel-banderoll lagras hotspot-informationen på samma metadataplats. Platsen är relativ till bildens plats, oavsett om det är en interaktiv bild eller en Carousel Banner. Den här funktionen innebär att du enkelt kan återanvända samma bild tillsammans med dess definierade hotspot-data i båda visningsprogrammen.
Observera dock att Carousel Banners stöder bildscheman på bilder som även kan innehålla hotspot-områden. en interaktiv bild gör det inte. Tänk på detta om du tänker skapa en interaktiv bild eller Carousel Banner som använder samma bild. Du kan i stället skapa interaktiva bilder och Carousel Banners med separata kopior av samma bild.
Se även Carousel Banners.
Om du redigerar interaktiva bilder med aktiveringspunkter och beskär bilden tas dina aktiveringspunkter bort.
Så här lägger du till aktiveringspunkter i en bildbanderoll:
I resursvyn navigerar du till den bildbanderoll som du vill göra interaktiv.
Gör något av följande:
Hovra över bilden och tryck sedan Select (bockmarkeringsikon). Tryck på i verktygsfältet Edit.
Hovra över bilden och tryck sedan More actions (ikon med tre punkter) > Edit.
Tryck på bilden för att öppna den på sidan Detaljvy. Tryck på i verktygsfältet Edit.
I närheten av sidans övre vänstra hörn trycker du på Add Hotspot (pekaren) för att öppna sidan för hantering av hotspot-områden.
Knacka i det övre vänstra hörnet av sidan Hotspot.
Skriv namnet på aktiveringspunkten i textfältet Namn. Det här namnet visas också i listrutan Markerad aktiveringspunkt.
Gör något av följande:
Välj Quickview.
Om du är Experience Manager Sites- eller e-handelskund väljer du produktväljarikonen (förstoringsglas) för att öppna sidan Välj produkt. Välj den produkt du vill använda och tryck sedan på Välj i det övre högra hörnet på sidan. Du återgår till sidan för hantering av hotspot.
Om du not en Experience Manager Sites- eller e-handelskund
category=Mens
är en tillagd variabel.Välj Hyperlink.
Var noga med att ange om länken ska öppnas på en ny webbläsarflik (rekommenderat standardvärde) eller på samma flik.
Se Arbeta med väljare för mer information.
Välj Experience Fragment.
Om du är Experience Manager Sites-kund väljer du sökikonen (förstoringsglas) för att öppna sidan Experience Fragment. Välj det Experience Fragment som du vill använda. Tryck sedan Select i det övre högra hörnet på sidan. Du återgår till sidan för hantering av hotspot.
Se Upplevelsefragment.
Ange bredd och höjd för Experience Fragment så som du vill att det ska visas på banderollen.
Delningsverktygen för sociala medier i Interactive Image stöds inte när du bäddar in visningsprogrammet i ett Experience Fragment. Använd eller skapa i stället visningsförinställningar som inte har verktyg för delning av sociala medier. Med sådana visningsförinställningar kan du bädda in dem i Experience Fragments.
Välj Save om du vill spara ditt arbete och gå tillbaka till sidan Bläddra.
Publicera den interaktiva bilden. Publicering levererar banderollen via molnet och genererar även inbäddningskod som gör att du kan integrera med en tredjepartswebbplats.
När du har lagt till aktiveringspunkter och publicerat den interaktiva bilden kan du nu lägga till den på din befintliga webbplats.
Se Integrera en interaktiv bild med webbplatsen.
Om du redigerar interaktiva bilder med aktiveringspunkter och beskär bilden tas dina aktiveringspunkter bort.
Du kan använda Förhandsgranska för att se hur den interaktiva bilden ser ut för kunderna. Med Förhandsvisa kan du testa bildens aktiveringspunkter för att se om de fungerar som förväntat.
När du är nöjd med den interaktiva bilden kan du publicera den.
Se Bädda in video- eller bildvisningsprogrammet på en webbsida.
Se Länka URL:er till ditt webbprogram. Den URL-baserade länkningsmetoden är inte möjlig om det interaktiva innehållet har länkar till relativa URL-adresser, särskilt länkar till Experience Manager Sites-sidor.
Se Lägga till Dynamic Media-resurser på sidor.
Så här förhandsgranskar du interaktiva bilder:
Se Publicera resurser om du vill ha information om hur du publicerar interaktiva bildresurser.
När du har överfört en banderollbild, lagt till aktiveringspunkter i den och publicerat den interaktiva bilden är du redo att lägga till den på din webbsida.
Om du är kund hos Experience Manager Sites kan du lägga till den interaktiva bilden genom att dra Interactive Media-komponenten till din sida. Se Lägga till Dynamic Media-resurser på sidor.
Om du är en fristående Experience Manager Assets-kund kan du lägga till den interaktiva bilden manuellt på din webbplats enligt beskrivningen i det här avsnittet.
Kopiera den publicerade interaktiva bildens inbäddningskod.
Se Bädda in video- eller bildvisningsprogrammet på en webbsida.
Lägg till den kopierade inbäddningskoden på önskad plats på webbsidan.
Den kopierade inbäddningskoden ställs in för en responsiv miljö så att den automatiskt passar det tilldelade området.
Exempel
Använda demowebbplats som exempel, observera att bilden på de tre personerna är statisk IMG
tagg:
<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">
Integreringen är enkel som att ta bort IMG
tagga och ersätta den med den kopierade inbäddningskoden från Experience Manager Assets. Du ser att resultatet visar den interaktiva bilden som går att handla på sidan med tre cirkelaktiveringspunkter.
Nu är de hotspots som finns på den interaktiva bilden av demowebbplatsen endast avsedda för webben. De är ännu inte integrerade med de befintliga snabbvyerna.
Om du vill tillämpa en beskärning på en interaktiv bild för en responsiv miljö inkluderar du konfigurationsattributet Interactive Image ZoomView.iscommand
till banan. I det här fallet ZoomView
-komponenten anropas och iscommand
är det"beskär" bildserverkommando som du använder.
Se ZoomView.iscommand konfigurationsattribut.
Se beskära kommando för att visa bilder.
Nu kan du integrera den interaktiva bilden med en befintlig Quickview på webbplatsen.
Detta gäller endast om du är en fristående Experience Manager Assets-kund.
Det sista steget i den här processen är att integrera den interaktiva bilden med en befintlig Quickview-implementering på din webbplats. Det finns ingen lösning på integreringen som fungerar i alla fall. Alla QuickView-implementeringar är unika och det krävs en särskild strategi. Det är därför till stor hjälp att hjälpa IT-avdelningen.
Den befintliga Quickview-implementeringen representerar normalt en kedja av interrelaterade åtgärder som inträffar på webbsidan i följande ordning:
Dessa anrop representerar inte nödvändigtvis fristående offentliga API-anrop som anropas av webbsidans logik från ett godtyckligt steg. I stället är det ett kedjat anrop där varje steg döljs i den sista fasen (återanrop) av föregående steg.
När den interaktiva bilden som kan köpas ersätter steg 1 och delvis steg 2 trycker en användare på en hotspot i bilden som kan köpas. Sådan användarinteraktion hanteras av användaren. Visningsprogrammet returnerar en händelse till webbsidan som innehåller alla hotspot-data som tidigare lagts till i Experience Manager Assets.
I en sådan händelsehanterare gör koden längst fram följande:
Den inbäddningskod som returneras av Experience Manager Assets har en färdig händelsehanterare som kommenteras ut, vilket visas i följande markerade kodfragment:
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, you will need to 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();
Därför är det bara nödvändigt att avkommentera koden och ersätta dummy-hanterarens brödtext med koden som är specifik för den aktuella webbsidan.
Processen med att skapa QuickView-URL:en är inte densamma som den process som användes för att identifiera hotspot-variabler som beskrivs tidigare.
Se Identifiera hotspot-variabler.
Med hjälp av de tidigare exemplen på snabbvyns URL kan du i följande exempel se hur snabbvyns URL är uppbyggd i varje fall:
En SKU, som finns i frågesträngen |
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100";
},
}); |
En SKU, finns i URL-sökvägen |
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var quickViewUrl = "https://server/product/" + inData.sku;
},
}); |
SKU och kategori-ID i frågesträngen |
s7interactiveimageviewer.setHandlers({
"quickViewActivate": function(inData) {
var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku;
},
}); |
Det sista steget för att utlösa snabbvyns URL och aktivera snabbvypanelen kräver hjälp av en IT-handläggare i ditt arbete. De har kunskap om hur de bäst kan utlösa QuickView-implementeringen från rätt steg med en färdig QuickView-URL.
Du kan se hur dessa steg tillämpas på demowebbplatsen för att helt integrera en interaktiv bild som kan köpas med QuickView-koden. Tidigare identifierades strukturen för snabbvyns URL som följande:
/datafeed/$categoryId$-$SKU$.json
För att rekonstruera denna URL i quickViewActivate
-hanterare kan du använda categoryId
och SKU
fält. Dessa fält är tillgängliga i inData
objekt som skickas till hanteraren av användarens kod:
var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
Demonstrationswebbplatsen utlöser dialogrutan Snabb visning med en enkel loadQuickView()
funktionsanrop. Den här funktionen har bara ett argument, vilket är snabbvydata-URL:en. Det sista steget för att integrera den interaktiva bilden för en köpare är att lägga till följande kodrad i quickViewActivate
hanterare:
loadQuickView(quickViewUrl);
Här följer den fullständiga källkoden:
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();
The den slutliga demowebbplatsen med en helt integrerad interaktiv bild.