DokumentationJourney Optimizer B2BDokumentation av Journey Optimizer B2B-version

[Beta]{class="badge informative" title="Den här funktionen är för närvarande i en begränsad betaversion"}

Design av webbupplevelser

Last update: Mon Jan 12 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Användare

När du har skapat en webbupplevelse använder du designområdet för innehåll för att definiera de ändringar som du vill tillämpa på dina webbsidor.

recommendation-more-help

Förutsättningar

Innan du kan utforma webbupplevelser måste du kontrollera att följande krav uppfylls:

  • En produktadministratör har konfigurerat en eller flera webbkanaler för att definiera de URL:er (sidor) som ska inkluderas för en webbupplevelse. Mer information finns i Konfigurationer för webbkanaler.

  • På webbplatsen har Adobe Experience Platform Web SDK (alloy.js) implementerats för besöksidentifiering och innehållsleverans. Adobe Experience Platform Web SDK version 2.16 eller senare krävs.

  • Du har de behörigheter som krävs för att skapa och hantera webbupplevelser under en resa:

    • Campaigns>Manage Campaigns - Krävs för att lägga till eller uppdatera en åtgärdsnod för webbanpassning.
    • Campaigns>View Campaigns - Krävs för att visa information för en åtgärdsnod för webbanpassning.
style
shade-box
IMPORTANT
Innan du utformar en webbupplevelse bör du kontrollera att webbläsartillägget Adobe Experience Cloud Visual Editing Helper är installerat för webbläsaren. Det här tillägget krävs för att du ska kunna öppna, redigera och förhandsgranska dina webbsidor på ett tillförlitligt sätt i designområdet för webbupplevelsen i Journey Optimizer B2B edition.
Google Chrome och Microsoft Edge är för närvarande de enda webbläsare som stöder tillägg och redigering av webbupplevelser i Journey Optimizer B2B edition. Mer information finns i Installera tillägget Hjälp för visuell redigering.

Redigerare för webbupplevelser

Journey Optimizer B2B edition har två typer av redigerare för att utforma webbändringar:

Redigerare
Beskrivning
Bäst för
Visuell redigerare
En WYSIWYG-redigerare (What You See Is What You Get) som visar webbplatsen och gör att du kan markera och ändra element direkt. Det kräver hjälptillägget ​ för visuell redigering i Google Chrome eller Microsoft Edge webbläsare.
Göra visuella ändringar i synliga sidelement, t.ex. text, bilder, knappar och banners.
Icke-visuell redigerare
En kodbaserad redigerare för att tillämpa ändringar som inte går att göra med den visuella redigeraren.
Ange målelement som är svåra att markera visuellt, använda avancerade CSS-ändringar eller göra ändringar i dolda element.

Använd alternativet Visual editor i egenskaperna för webbupplevelsen för att fastställa typen av redigerare. Aktivera alternativet att använda den visuella redigeraren eller inaktivera det för att använda den icke-visuella redigeraren.

Alternativet Visuell redigerare är aktiverat {width="400"}

Visual editor visual-editor

Den visuella redigeraren läser in webbsidorna i en iframe, där du kan markera element och använda ändringar direkt i förhandsgranskningen av sidan. Följ de här stegen för att använda den visuella redigeraren för att designa din webbupplevelse:

  1. Klicka på Content​i den högra panelen när fliken Edit web experience​visas på sidan med information om webbupplevelser.

    Den visuella redigeraren läser in webbplatsen baserat på webbkanalskonfigurationen.

    Visuell redigerare för webbupplevelse {width="800" modal="regular"}

  2. Om det behövs klickar du på Browse längst upp till höger och använder navigeringsfältet för webbplatsen för att läsa in den specifika sida som du vill ändra.

    Du kan också ange sidans URL i fältet längst upp.

    note note
    NOTE
    Kontrollera att den inlästa sidan matchar de URL-mönster som har definierats i webbkanalskonfigurationen. Klicka på View configuration details överst till höger för att visa URL- eller sidmatchningsreglerna för den valda webbkanalskonfigurationen.

    Bläddringsläge i den visuella redigeraren {width="700" modal="regular"}

    Klicka på Design överst till höger för att läsa in sidan i designområdet.

  3. Du kan definiera hur du vill att den visade sidan ska ändras för webbupplevelsen genom att:

  4. Upprepa steg 2 för att läsa in andra sidor som du vill inkludera i webbupplevelsen och upprepa steg 3 för att definiera sidändringarna.

  5. Granska dina ändringar och gör nödvändiga justeringar.

  6. När ändringarna är klara klickar du på vänsterpilen ovanför redigeraren för att gå tillbaka till webbupplevelseegenskaperna.

Ändra element

Klicka på ett element på den visade sidan för att markera det. En blå kant anger det markerade elementet och ett kontextverktygsfält visas med ändringsalternativ.

Markera ett element som du vill ändra {width="700" modal="regular"}

Vilka alternativ som visas i verktygsfältet beror på den valda komponenttypen:

Åtgärd
Beskrivning
Text options
Ändra det markerade elementets textelementklass eller textformat.
Choose image
Ersätt bildkällan eller lägg till en bild i elementet.
Edit link / Add link
Ändra eller lägg till en länk-URL.
Arrange
Flytta det markerade elementet bakåt eller framåt i visningen.
Add personalization
Infoga personalisering.
Click track element
Lägg till klickspårning för elementet.
Delete
Ta bort det markerade elementet från sidan.

För ett markerat element ändras egenskaperna på den högra panelen så att de återspeglar tillgängliga format och åtgärder. Klicka på en åtgärdsikon högst upp på panelen för att duplicera, klicka på-spåra, ta bort eller dölja det markerade elementet.

klicka på en åtgärdsikon för det markerade elementet {width="300"}

Textelement

  1. Markera ett textelement på sidan.

  2. Ange nytt textinnehåll eller markera en textsträng och ange din ersättningstext.

  3. (Valfritt) Använd textformateringsalternativen, till exempel fet, kursiv och justering.

  4. Klicka utanför textelementet för att tillämpa ändringen.

Mer information om alternativ för textformat för textkomponenter finns i Innehållskomponenter.

Bildelement

  1. Markera ett bildelement på sidan.

  2. Klicka på ikonen Choose image​i det sammanhangsberoende verktygsfältet eller den högra panelen.

  3. Bläddra och välj en bild från ditt resursbibliotek.

  4. Använd alternativen för bildformat på den högra panelen efter behov.

Knappelement

  1. Markera ett knappelement på sidan.

  2. (Valfritt) Ange ny text för knappen eller markera textsträngen och ange din ersättningstext.

    Du kan använda personalisering för att ändra knapptexten med data från konto- eller personprofiler.

  3. Använd knappformateringsalternativen på den högra panelen efter behov.

Behållarelement

  1. Markera ett behållarelement på sidan.

  2. Använd alternativen för behållarformat på den högra panelen efter behov.

Infoga nya komponenter

När du väljer ikonen + i den vänstra designnavigeringen för den visuella redigeraren kan du lägga till följande komponenttyper på sidan som en webbredigeringsändring:

  • Divider - Använd den här komponenten för att infoga en delningslinje för att ordna layouten och innehållet i ditt e-postmeddelande. Du kan justera formatattribut som linjefärg, format och höjd i egenskaperna på den högra panelen. Mer information finns i Delare i Innehållskomponenter.
  • HTML - Använd den här komponenten för att kopiera och klistra in HTML-kod i den befintliga strukturen. Med den kan du skapa kostnadsfria modulära HTML-komponenter för återanvändning av externt innehåll. Mer information finns i HTML i Innehållskomponenter.
  • Image - Använd den här komponenten för att infoga en bildfil på sidan. Du kan justera formatattribut som bredd och höjd i egenskaperna på den högra panelen. Mer information finns i Bild i Innehållskomponenter.
  • Heading - Använd den här komponenten för att infoga rubriktext. Du kan justera formatattribut som textfärg, stil, teckensnitt och storlek från egenskaperna på den högra panelen. Mer information finns i Text i Innehållskomponenter.
  • Paragraph - Använd den här komponenten för att infoga ett standardelement med text. Du kan justera formatattribut som textfärg, stil, teckensnitt och storlek från egenskaperna på den högra panelen. Mer information finns i Text i Innehållskomponenter.
  • Link - Använd den här komponenten för att infoga en fristående textlänk till en angiven URL. Du kan justera formatattribut som textfärg, format, justering och storlek från egenskaperna på den högra panelen.

Markera en komponenttyp till vänster och hovra sedan över ett element som ligger intill den plats där du vill lägga till det.

Gränssnitt för visuell redigerare - ny komponent {width="800" modal="regular"}

Placera komponenten genom att klicka på någon av knapparna som visas:

  • *Insert before - Infoga komponenten före det markerade elementet.
  • *Insert after - Infoga komponenten efter det markerade elementet.

Om du vill avmarkera en komponenttyp som ska infogas klickar du på ESC i den kontextbaserade blå banderollen som visas högst upp på sidan.

Icke-visuell redigerare non-visual-editor

Använd den icke-visuella redigeraren när du behöver göra ändringar som inte är enkla att göra i den visuella redigeraren. Med den här kodbaserade metoden får ni exakt kontroll över målanpassning och ändring av element. Följ de här stegen för att använda den icke-visuella redigeraren för att designa din webbupplevelse:

  1. Klicka på Content​i den högra panelen när fliken Add modification​visas på sidan med information om webbupplevelser.

    Den icke-visuella redigeraren läser in en sida baserat på webbkanalskonfigurationen.

    Gränssnitt för icke-visuell redigerare {width="800" modal="regular"}

  2. Definiera den första ändringen som du vill göra.

    På den vänstra panelen visas en lista med befintliga ändringar (om sådana finns). Klicka på Add för att definiera en ny ändring. Om inga ändringar har definierats används Add Modification-alternativen som standard.

    • Välj Modification type:

      table 0-row-2 1-row-2 2-row-2
      Typ Beskrivning
      CSS Selector Använd en CSS-väljarsträng som målelement.
      Page Infoga anpassad HTML, CSS eller JavaScript i sidelement som <head> eller <body>.

    • Konfigurera ändringsparametrarna efter typ:

      • CSS Selector - Ange en giltig CSS-väljare för specifika målelement.
      • Action type - Välj vilken åtgärd som ska utföras (redigera, dölja, ta bort, infoga, ersätta).
      • Content - Ange innehållet eller formatet som ska användas.

  3. Klicka på Save för att tillämpa ändringen.

Ändringar av CSS-väljare

Med CSS-väljarändringar kan du ange exakta målelement med hjälp av standardsyntaxen för CSS-väljare.

  1. Välj CSS Selector som ändringstyp.

  2. Ange väljaren i fältet CSS Element Selector.

**Exempelväljare:**

| Väljare | Målgrupper |
| — | — |
| `#hero-banner` | Element med ID &quot;hero-banner&quot; |
| `.cta-button` | Alla element med klassen &quot;cta-button&quot; |
| &grave;1 | Länkar i navigeringen, inuti rubriken |
| `[data-offer=&quot;premium&quot;]` | Element med ett specifikt dataattribut |

  1. Välj en Action Type och ange nödvändig information/nödvändigt innehåll.

    • Set Content - Ange texten i fältet Content för elementet som identifieras av värdet CSS Element Selector.

    • Set Attribute - Ange ett attribut som ska associeras med den aktuella CSS-väljaren så att elementet kan identifieras med det här attributet. Ange ett namn i fältet Attribute name och ett värde i fältet Content. Om attributet redan finns uppdateras värdet. I annat fall läggs ett nytt attribut till med det angivna namnet och värdet.

    Ändring av CSS-väljare som inte är visuell redigerare {width="800" modal="regular"}

  2. (Valfritt) Klicka på Add personalization och använd anpassningsredigeraren för att skapa en anpassad anpassning för innehållet.

Sidändringar

Du kan lägga till anpassad kod med ändringstypen Sida <head>. Elementet <head> är en behållare för metadata (data om data) och placeras mellan taggen <html> och taggen <body>. I det här fallet väntar koden inte på body- eller page-load-händelser - den körs i början av sidinläsningen.

Elementet <head> används ofta för att lägga till JavaScript- eller CSS-kod högst upp på sidan. Väljare för efterföljande visuella åtgärder beror på vilka HTML-element som har lagts till på den här fliken.

NOTE
Anpassad kod körs i besökarens webbläsare. Kontrollera att koden är säker, testad och inte påverkar sidprestanda negativt eller användarupplevelsen negativt.

  1. Välj Page <head> som ändringstyp.

  2. Lägg till din egen kod i rutan Content.

    note caution
    CAUTION
    Du kan bara lägga till elementen <script> och <style> i avsnittet <head>. Om du lägger till <div>-taggar och andra element kan det leda till att återstående <head>-element fylls i i <body>.

    Icke-visuell redigering, sidhuvudsändring {width="800" modal="regular"}

  3. (Valfritt) Klicka på Add personalization och använd anpassningsredigeraren för att skapa en anpassad anpassning för innehållet.

Hantera ändringar manage-modifications

Alla ändringar som du skapar spåras och kan hanteras från panelen Modifications i både den visuella redigeraren och den icke-visuella redigeraren. Klicka på ikonen Modifications i det vänstra verktygsfältet om du vill visa alla ändringar.

Varje ändringspost innehåller:

  • Målelementet eller väljaren
  • Ändringstypen (till exempel redigera, dölja eller infoga)
  • En förhandsgranskning av ändringen

Panelen Ändringar {width="500" modal="regular"}

Redigera en ändring

  1. I listan Modifications​söker du efter den ändring du vill redigera.

  2. Klicka på ikonen Mer meny ( … ) och välj Edit.

  3. Uppdatera ändringsegenskaperna efter behov.

  4. Klicka på Save om du vill spara ändringarna.

Ta bort en ändring

  1. I listan Modifications​söker du efter den ändring du vill ta bort.

  2. Klicka på ikonen Mer meny ( … ) och välj Delete modification.

  3. Bekräfta borttagningen när du uppmanas till det.

Förhandsgranska ändringarna

Förhandsgranska hur ändringarna ser ut för besökarna före publiceringen.

Använd alternativen för förhandsvisning av enheter längst upp i den visuella redigeraren för att visa dina ändringar i:

  • Skrivbord
  • Tablet
  • Mobil

Ändra enhetens storlek för förhandsgranskningen {width="550" modal="regular"}

Förhandsgranskningen uppdateras för att visa hur ändringarna återges för varje enhetsstorlek.

Använd URL-fältet för att navigera till olika sidor i webbkanalkonfigurationen. Verifiera sedan att ändringarna gäller för målsidorna korrekt baserat på dina URL-matchningsregler.

Klickspårning för webbupplevelser web-click-tracking

Spåra användarinteraktioner med element för att mäta engagemang och samla insikter. Data för klickspårning finns tillgängliga i era engagemangsrapporter och kan användas för att mäta effekten av dina webbupplevelseändringar.

När webbupplevelsen aktiveras (live) kan du även skapa rapporter med Adobe Customer Journey Analytics (som kräver en produktprenumeration). Om du vill förbättra övervakningen av webbupplevelsen kan du även spåra klick på ett visst element på webbplatsen. Med Spärra/knip kan du visa antalet klick för det elementet i webbrapporterna.

Mer information om Customer Journey Analytics och hur du skapar webbrapporter finns i Customer Journey Analytics-dokumentationen.

  1. Välj ett element i webbredigeraren, till exempel en bild eller länk.

  2. Klicka på ikonen Click track element​i elementegenskaperna eller det sammanhangsberoende verktygsfältet.

    Aktivera klickspårning för webbupplevelselement {width="600" modal="regular"}

  3. Öppna listan Klicka på spår i den vänstra panelen och ändra värdet Tracked actions för att identifiera interaktionen i dina rapporter.

    Ange klickspårningsidentifiering för webbupplevelse {width="600" modal="regular"}

6ef00091-a233-4243-8773-0da8461f7ef0