DocumentatieJourney Optimizer B2BDocumentatie voor de B2B-editie van Journey Optimizer

[Beta]{class="badge informative" title="Deze functie bevindt zich momenteel in een beperkte bètaversie"}

Webervaringsontwerp

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

Gemaakt voor:

  • Gebruiker

Nadat u ​ een Webervaring ​ creeert, gebruik de ruimte van het inhoudsontwerp om de wijzigingen te bepalen die u op uw Web-pagina's wilt toepassen.

recommendation-more-help

Eerste vereisten

Voordat u webervaringen kunt ontwerpen, moet u ervoor zorgen dat aan de volgende vereisten wordt voldaan:

  • Een productbeheerder heeft een of meer webkanalen geconfigureerd om de URL's (pagina's) te definiëren die moeten worden opgenomen voor een webervaring. Voor meer informatie, zie ​ het kanaalconfiguraties van het Web ​.

  • Uw website heeft ​ SDK van het Web van Adobe Experience Platform ​ (alloy.js) die voor bezoekersidentificatie en inhoudslevering wordt uitgevoerd. Adobe Experience Platform Web SDK versie 2.16 of hoger is vereist.

  • U hebt de noodzakelijke ​ toestemmingen ​ om Webervaringen in een reis tot stand te brengen en te beheren:

    • Campaigns>Manage Campaigns - Vereist om een actieknooppunt voor webpersonalisatie toe te voegen of bij te werken.
    • Campaigns>View Campaigns - Vereist om details voor de actieknooppunten van een webpersonalisatie weer te geven.
style
shade-box
IMPORTANT
Voordat u een webervaring ontwerpt, moet de browserextensie van de Adobe Experience Cloud Visual Editing Helper zijn geïnstalleerd voor uw webbrowser. Deze extensie is vereist voor het op betrouwbare wijze openen, schrijven en voorvertonen van uw webpagina's in de Journey Optimizer B2B edition-webervaringsontwerpruimte.
Google Chrome en Microsoft Edge zijn momenteel de enige browsers die de extensie en het ontwerpen van webtoepassingen in Journey Optimizer B2B edition ondersteunen. Voor meer informatie, zie ​ de Visuele Uitgevende uitbreiding van de Helper installeren ​.

Webervaringseditors

Journey Optimizer B2B edition biedt twee typen editors voor het ontwerpen van webwijzigingen:

Editor
Beschrijving
Best voor
​ Visuele redacteur ​
Een redacteur van WYSIWYG (What You See Is What You Get) die uw website toont en u toestaat om elementen direct te selecteren en te wijzigen. Het vereist de ​ Visuele het Uitgeven uitbreiding van de Helper ​ in Google Chrome of het Webbrowser van Microsoft Edge.
Visuele wijzigingen aanbrengen in zichtbare pagina-elementen, zoals tekst, afbeeldingen, knoppen en banners.
​ niet-visuele redacteur ​
Een op code-gebaseerde redacteur voor het toepassen van wijzigingen die niet door de visuele redacteur kunnen worden gemaakt.
Elementen aanwijzen die moeilijk visueel kunnen worden geselecteerd, geavanceerde CSS-wijzigingen toepassen of verborgen elementen aanpassen.

Gebruik in de webervaringseigenschappen de optie Visual editor om het type editor te bepalen. Schakel de optie in om de visuele editor te gebruiken of schakel deze uit om de niet-visuele editor te gebruiken.

​ Toegelaten Visuele editoroptie ​ {width="400"}

Visuele editor visual-editor

De visuele editor laadt de webpagina's in een iframe, waar u elementen kunt selecteren en wijzigingen rechtstreeks in de voorvertoning van de pagina kunt toepassen. Voer de volgende stappen uit om de visuele editor te gebruiken voor het ontwerpen van uw webervaring:

  1. Klik op Content​in het rechterdeelvenster terwijl het tabblad Edit web experience​wordt weergegeven op de pagina met webervaringsdetails.

    De visuele editor laadt uw website op basis van de webkanaalconfiguratie.

    ​ de ervarings visuele redacteur van het Web ​ {width="800" modal="regular"}

  2. Klik indien nodig rechtsboven op Browse en gebruik de sitenavigatiebalk om de specifieke pagina te laden die u wilt wijzigen.

    U kunt de pagina-URL ook invoeren in het veld bovenaan.

    note note
    NOTE
    Zorg ervoor dat de geladen pagina overeenkomt met de URL-patronen die in de webkanaalconfiguratie zijn gedefinieerd. Klik op View configuration details rechtsboven in het scherm om de URL- of pagina-overeenkomende regels voor de geselecteerde webkanaalconfiguratie weer te geven.

    ​ doorbladert wijze in de visuele redacteur ​ {width="700" modal="regular"}

    Klik op Design rechtsboven om de pagina in de ontwerpruimte te laden.

  3. Als u wilt definiëren hoe de weergegeven pagina moet worden aangepast voor een webervaring, kunt u:

  4. Herhaal stap 2 om de andere pagina's te laden die u wilt opnemen in de webervaring en herhaal stap 3 om de paginawijzigingen te definiëren.

  5. ​ herzie uw wijzigingen ​ en maak om het even welke aanpassingen die nodig zijn.

  6. Wanneer de wijzigingen zijn voltooid, klikt u op de pijl naar links boven de editor om terug te keren naar de eigenschappen van de webervaring.

Elementen wijzigen

Klik op een element op de weergegeven pagina om deze te selecteren. Een blauwe rand geeft het geselecteerde element aan en een contextafhankelijke werkbalk wordt weergegeven met wijzigingsopties.

​ selecteer een element om te wijzigen ​ {width="700" modal="regular"}

De werkbalkopties zijn afhankelijk van het geselecteerde componenttype:

Handeling
Beschrijving
Text options
Wijzig de klasse of tekstopmaak van het geselecteerde element.
Choose image
Vervang de afbeeldingsbron of voeg een afbeelding toe aan het element.
Edit link / Add link
Wijzig of voeg een verbinding URL toe.
Arrange
Verplaats het geselecteerde element naar achteren of naar voren in de weergave.
Add personalization
Voeg personalisatie in.
Click track element
Klik op bijhouden toevoegen voor het element.
Delete
Verwijder het geselecteerde element van de pagina.

Voor een geselecteerd element worden de eigenschappen in het rechterdeelvenster aangepast aan de beschikbare opmaak en handelingen. Klik op een actiepictogram boven in het deelvenster om het geselecteerde element te dupliceren, te klikken op bijhouden, te verwijderen of te verbergen.

​ klik een actiepictogram voor het geselecteerde element ​ {width="300"}

Tekstelementen

  1. Selecteer een tekstelement op de pagina.

  2. Voer nieuwe tekstinhoud in of selecteer een tekenreeks en voer de vervangende tekst in.

  3. (Facultatief) gebruik de ​ tekst het formatteren opties ​, zoals gewaagd, cursief, en groepering.

  4. Klik buiten het tekstelement om de wijziging toe te passen.

Voor meer informatie over tekst het stileren opties voor tekstcomponenten, zie ​ componenten van de Inhoud ​.

Afbeeldingselementen

  1. Selecteer een afbeelding op de pagina.

  2. Klik op het pictogram Choose image​op de contextafhankelijke werkbalk of in het rechterdeelvenster.

  3. Blader naar een afbeelding in de bibliotheek met elementen en selecteer deze.

  4. Gebruik de ​ beeld het stileren opties ​ in het juiste paneel zoals nodig.

Knopelementen

  1. Selecteer een knopelement op de pagina.

  2. (Optioneel) Voer nieuwe tekst in voor de knop of selecteer de tekenreeks en voer de vervangende tekst in.

    U kunt personalisatie gebruiken om de knooptekst te veranderen gebruikend gegevens van rekening of persoonprofielen.

  3. Gebruik de ​ knoop het stileren opties ​ in het juiste paneel zoals nodig.

Containerelementen

  1. Selecteer een containerelement op de pagina.

  2. Gebruik de ​ container het stileren opties ​ in het juiste paneel zoals nodig.

Nieuwe componenten invoegen

Wanneer u het pictogram + in de ontwerp linkernavigatie voor de visuele redacteur selecteert, kunt u de volgende componententypes aan de pagina als verandering van de Webervaring toevoegen:

  • Divider - Gebruik deze component om een scheidingslijn in te voegen om de lay-out en inhoud van uw e-mail te ordenen. U kunt opmaakkenmerken zoals de lijnkleur, stijl en hoogte aanpassen vanuit de eigenschappen in het rechterdeelvenster. Zie ​ Scheider ​ in componenten van de Inhoud voor meer informatie.
  • HTML - Gebruik deze component om HTML-code in de bestaande structuur te kopiëren en te plakken. Zo kunt u gratis modulaire HTML-componenten maken om externe inhoud opnieuw te gebruiken. Zie ​ HTML ​ in componenten van de Inhoud voor meer informatie.
  • Image - Gebruik deze component om een afbeeldingsbestand in te voegen in de pagina. U kunt de opmaakkenmerken, zoals de breedte en hoogte, aanpassen aan de hand van de eigenschappen in het rechterdeelvenster. Zie ​ Beeld 0} in ​ componenten van de Inhoud voor meer informatie.
  • Heading - Gebruik deze component om kopklassetekst in te voegen. U kunt de opmaakkenmerken, zoals de tekstkleur, stijl, lettertype en grootte, aanpassen met de eigenschappen in het rechterdeelvenster. Zie ​ Tekst van 0} {in ​ componenten van de Inhoud voor meer informatie.
  • Paragraph - Gebruik deze component om een standaardtekstelement in te voegen. U kunt de opmaakkenmerken, zoals de tekstkleur, stijl, lettertype en grootte, aanpassen met de eigenschappen in het rechterdeelvenster. Zie ​ Tekst van 0} {in ​ componenten van de Inhoud voor meer informatie.
  • Link - Gebruik deze component om een vrije tekstkoppeling in te voegen naar een opgegeven URL. U kunt opmaakkenmerken zoals de tekstkleur, stijl, uitlijning en grootte aanpassen aan de hand van de eigenschappen in het rechterdeelvenster.

Selecteer een componenttype aan de linkerkant en houd de muisaanwijzer boven een element dat grenst aan de plaats waar u het wilt toevoegen.

​ Visuele redacteursinterface - nieuwe component ​ {width="800" modal="regular"}

Klik op een van de weergegeven knoppen om de component te plaatsen:

  • *Insert before - neem de component vóór het geselecteerde element op.
  • *Insert after - neem de component na het geselecteerde element op.

Als u de selectie van een componenttype voor invoeging wilt opheffen, klikt u op ESC in de contextafhankelijke blauwe banner die boven aan de pagina wordt weergegeven.

Niet-visuele editor non-visual-editor

Gebruik de niet-visuele redacteur wanneer u wijzigingen moet maken die niet gemakkelijk in de visuele redacteur kunnen worden verwezenlijkt. Deze op code-gebaseerde benadering geeft u nauwkeurige controle over element het richten en de wijziging. Voer de volgende stappen uit om de niet-visuele editor te gebruiken voor het ontwerpen van uw webervaring:

  1. Klik op Content​in het rechterdeelvenster terwijl het tabblad Add modification​wordt weergegeven op de pagina met webervaringsdetails.

    De niet-visuele editor laadt een pagina op basis van de webkanaalconfiguratie.

    ​ Niet-visuele editorinterface ​ {width="800" modal="regular"}

  2. Definieer de eerste wijziging die u wilt maken.

    In het linkerdeelvenster wordt een lijst met bestaande wijzigingen (indien van toepassing) weergegeven. Klik op Add om een nieuwe wijziging te definiëren. Als er geen wijzigingen zijn gedefinieerd, worden in het deelvenster standaard de opties voor Add Modification​gebruikt.

    • Kies de Modification type :

      table 0-row-2 1-row-2 2-row-2
      Type Beschrijving
      CSS Selector Doelelementen met gebruik van een CSS-kiezerreeks.
      Page Voeg aangepaste HTML, CSS of JavaScript toe aan elementen op paginaniveau, zoals <head> of <body> .

    • Configureer de wijzigingsparameters op basis van het type:

      • CSS Selector - Voer een geldige CSS-kiezer in om specifieke elementen als doel in te stellen.
      • Action type - Kies de handeling die u wilt uitvoeren (bewerken, verbergen, verwijderen, invoegen, vervangen).
      • Content - Geef de inhoud of opmaak op die u wilt toepassen.

  3. Klik op Save om de wijziging toe te passen.

Wijzigingen in CSS-kiezer

Met CSS-selectorwijzigingen kunt u elementen nauwkeurig als doel instellen met de standaard CSS-selectorsyntaxis.

  1. Kies CSS Selector als wijzigingstype.

  2. Voer de kiezer in het veld CSS Element Selector in.

**Voorbeelden van kiezers:**

| Kiezer | Doelen |
| — | — |
| `#hero-banner` | Element met ID &quot;hero-banner&quot; |
| `.cta-button` | Alle elementen met de klasse &grave; cta-button&#39; |
| &quot;header nav a&grave; | Koppelingen binnen de navigatie, binnen de koptekst |
| `[data-offer=&quot;premium&quot;]` | Elementen met een specifiek gegevenskenmerk |

  1. Kies een Action Type en geef de vereiste informatie/inhoud op.

    • Set Content - Voer de tekst in het Content -veld in voor het element dat door de CSS Element Selector-waarde wordt geïdentificeerd.

    • Set Attribute - Geef een kenmerk op dat aan de huidige CSS-kiezer moet worden gekoppeld, zodat het element door dit kenmerk kan worden geïdentificeerd. Typ een naam in het veld Attribute name en een waarde in het veld Content . Als het kenmerk al bestaat, wordt de waarde bijgewerkt; anders wordt een nieuw kenmerk toegevoegd met de opgegeven naam en waarde.

    ​ de niet-visuele redacteur css selecteerswijziging ​ {width="800" modal="regular"}

  2. (Facultatief) klik Add personalization en gebruik de ​ verpersoonlijkingsredacteur ​ om een aangepaste verpersoonlijking voor de inhoud tot stand te brengen.

Paginawijzigingen

U kunt aangepaste code toevoegen met het wijzigingstype Pagina <head> . Het element <head> is een container voor metagegevens (gegevens over gegevens) en wordt tussen de tag <html> en de tag <body> geplaatst. In dit geval wacht de code niet op gebeurtenissen voor het laden van de hoofdtekst of de pagina. Deze wordt uitgevoerd aan het begin van het laden van de pagina.

Het element <head> wordt doorgaans gebruikt om JavaScript- of CSS-code boven aan de pagina toe te voegen. Kiezers voor volgende visuele handelingen zijn afhankelijk van de HTML-elementen die op dit tabblad zijn toegevoegd.

NOTE
Aangepaste code wordt uitgevoerd in de browser van de bezoeker. Zorg ervoor dat uw code veilig is, getest is en geen negatieve invloed heeft op de paginaprestaties of gebruikerservaring.

  1. Kies Page <head> als wijzigingstype.

  2. Voeg uw aangepaste code toe in het vak Content .

    note caution
    CAUTION
    U kunt alleen <script> - en <style> -elementen toevoegen aan de sectie <head> . Als u <div> -tags en andere elementen toevoegt, kunnen de resterende <head> -elementen binnen de <body> -tag worden gevuld.

    ​ niet-visuele redacteur pagina-hoofd wijziging ​ {width="800" modal="regular"}

  3. (Facultatief) klik Add personalization en gebruik de ​ verpersoonlijkingsredacteur ​ om een aangepaste verpersoonlijking voor de inhoud tot stand te brengen.

Wijzigingen beheren manage-modifications

Alle wijzigingen die u maakt, worden bijgehouden en kunnen worden beheerd vanuit het deelvenster Modifications van zowel de visuele editor als de niet-visuele editor. Klik op het pictogram Modifications op de linkerwerkbalk om alle wijzigingen weer te geven.

Elke wijzigingsrecord bevat:

  • Het doelelement of -kiezer
  • Het wijzigingstype (zoals bewerken, verbergen of invoegen)
  • Een voorvertoning van de wijziging

​ het paneel van Wijzigingen ​ {width="500" modal="regular"}

Een wijziging bewerken

  1. Zoek in de lijst Modifications​naar de wijziging die u wilt bewerken.

  2. Klik het Meer menu ( …) pictogram en kies Edit.

  3. Werk indien nodig de eigenschappen van de wijziging bij.

  4. Klik op Save om de wijzigingen op te slaan.

Een wijziging verwijderen

  1. Zoek in de lijst Modifications​naar de wijziging die u wilt verwijderen.

  2. Klik het Meer menu ( …) pictogram en kies Delete modification.

  3. Bevestig de verwijdering wanneer daarom wordt gevraagd.

Voorbeeld van uw wijzigingen bekijken

Bekijk voordat u publiceert hoe uw wijzigingen er uitzien voor bezoekers.

Gebruik de voorvertoningsopties voor apparaten boven aan de visuele editor om de wijzigingen weer te geven op:

  • Desktop
  • Tablet
  • Mobiel

​ verander het apparaat het rangschikken voor de voorproef ​ {width="550" modal="regular"}

De voorvertoning wordt bijgewerkt om te tonen hoe wijzigingen op elke apparaatgrootte worden gerenderd.

Gebruik de URL-balk om naar verschillende pagina's in uw webkanaalconfiguratie te navigeren. Controleer vervolgens of de wijzigingen correct worden toegepast op de doelpagina's op basis van de overeenkomende URL-regels.

Klik op bijhouden voor webervaringen web-click-tracking

Houd gebruikersinteractie met elementen bij om betrokkenheid te meten en inzichten te verzamelen. De gegevens voor het bijhouden van klikken zijn beschikbaar in uw betrokkenheidsrapporten en kunnen worden gebruikt om de effectiviteit van uw webervaringswijzigingen te meten.

Wanneer uw webervaring wordt geactiveerd (live), kunt u ook rapporten samenstellen met de Adobe Customer Journey Analytics (waarvoor een productabonnement is vereist). Om uw webervaringscontrole te verbeteren, kunt u ook de klikken op elk specifiek element van uw website bijhouden. Met Volgen kunt u het aantal klikken voor dat element weergeven in de webrapporten.

Voor meer informatie over Customer Journey Analytics en het bouwen van Webrapporten, zie de ​ documentatie van Customer Journey Analytics ​.

  1. Selecteer een element in de webervaringseditor, zoals een afbeelding of koppeling.

  2. Klik op het pictogram Click track element​in de elementeigenschappen of de contextafhankelijke werkbalk.

    ​ laat klik het volgen voor de elementen van de Webervaring toe ​ {width="600" modal="regular"}

  3. Open de lijst Track klikken in het linkerdeelvenster en wijzig de waarde Tracked actions om deze interactie in uw rapporten te identificeren.

    ​ plaats klik volgende identificatie voor Webervaring ​ {width="600" modal="regular"}

6ef00091-a233-4243-8773-0da8461f7ef0