Edit web content edit-web-content

Once you added a web action to your campaign, you can edit the content of your site using the web designer.

Learn how to author a web campaign in this video

In Journey Optimizer, web authoring is powered by the Adobe Experience Cloud Visual Helper chrome browser extension. Learn more

CAUTION
To be able to access and author web pages in the Journey Optimizer user interface, make sure you follow the prerequisites listed in this section.

Access the following sections to learn more on each topic:

Work with the web designer work-with-web-designer

To start authoring your web campaign, follow the steps below.

  1. From the Action tab of the campaign, select Edit content.

  2. If you created a pages matching rule, you must enter any URL matching this rule: the changes will be applied to all pages matching the rule. The content of the page displays.

    note note
    NOTE
    If you entered a single URL as the web surface, the URL to personalize is already populated.

    note caution
    CAUTION
    The web page must include the Adobe Experience Platform Web SDK. Learn more
  3. Click Edit web page to start authoring it. The web designer displays.

    note note
    NOTE
    If you attempt to load a website that fails to load, a message displays suggesting that you install the Visual Editing Helper browser extension. See some tips for troubleshooting in this section.
  4. Select any element from the canvas, such as image, button, paragraph, text, container, heading, link etc. Learn more

  5. Use:

    • The contextual menu to edit its content, layout, insert links or personalization, etc.

    • The icons on top of the right panel to edit, duplicate, delete or hide each element.

    • The right panel that changes dynamically according to the selected element. For example, you can edit the background, typography, border, size, position, spacing, effects or inline styles of an element.

NOTE
The web content designer is mostly similar to the email designer. Learn more on designing content with Journey Optimizer.

Use components content-components

  1. From the Components pane on the left, select an item. You can add the following components to your web page and edit them as you need:

    • Divider
    • HTML
    • Image
    • Heading - Using this component is similar to using the Text component in the email designer. Learn more
    • Paragraph - Using this component is similar to using the Text component in the email designer. Learn more
    • Link
    • Offer decision

  2. Hover in the page and click the Insert before or Insert after button to append the component to an existing element on the page.

    note note
    NOTE
    To unselect a component, click the ESC button in the contextual blue banner displayed on top of the canvas.
  3. Edit the component as needed directly in the content of your page.

  4. Adjust the styles that display from the contextual pane on the right, such as background, text color, border, size, position, etc. - depending on the selected component.

Add personalization and offers

To add personalization, select a container and select the personalization icon from the contextual menu bar that displays. Add your changes using the personalization editor. Learn more

Use the Offer decision component to insert offers into your web pages. The process is the same as when adding an offer to an email. It will leverage Decision Management to pick the best offer to deliver to your customers.

This section details the different ways you can navigate through the web designer. To view and manage the modifications added to your web experience, see this section.

Use breadcrumbs breadcrumbs

  1. Select any element from the canvas.

  2. Click the Expand/Collapse Breadcrumbs button on the lower left side of the screen to quickly display information about the selected element.

  3. When you hover over the breadcrumbs, the corresponding element is highlighted in the editor.

  4. Using it you can easily navigate to any parent, sibling, or child element within the visual editor.

Swap to browse mode browse-mode

You can swap from the default Design mode to the Browse mode using the dedicated button.

From the Browse mode, you can navigate to the exact page from the selected surface you want to personalize.

It is especially useful when dealing with pages that are behind authentication or that are not available from the start at a certain URL. For example, you will be able to authenticate, navigate to your account page or to your cart page, and then switch back to Design mode in order to perform the changes on your desired page.

Using Browse mode also enables you to navigate through all the views of your website when authoring single-page applications. Learn more

Change device size change-device-size

You can change the device size of the web designer display to a predefined size such as Tablet or Mobile landscape, or define a custom size by entering the desired number of pixels.

You can also change the zoom focus - from 25% to 400%.

The ability to change the device size is designed for responsive sites that render well on various devices, windows, and screen sizes. Responsive sites automatically adjust and adapt to any screen size, including desktops, laptops, tablets, or mobile phones.

CAUTION
You can edit a web experience with a specific device size. However, as long as the selectors are the same, these changes apply to all sizes and devices, not just the device size that you’re working in. Similarly, editing an experience in the normal desktop view applies the changes to all screen sizes, not just the desktop view.
Currently, Journey Optimizer does not support device size-specific page changes. This means that for example if you have a separate mobile website with a separate site structure, you should make the changes specific to your mobile site in a different campaign.

How-to video video

The video below shows how to author a web experience using the web designer in Journey Optimizer campaigns.

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76