DocumentationExperience PlatformWeb SDK Tutorial

Set up Journey Optimizer web channel with Web SDK

Last update: Mon Mar 02 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Developer

Learn how to implement the Adobe Journey Optimizer web channel using Adobe Experience Platform Web SDK. This lesson covers the foundational web channel prerequisites, detailed steps for configuration, and a deep dive into a use case centered on loyalty status.

By following this lesson, Journey Optimizer users are equipped to use the web channel for advanced online personalization using the Journey Optimizer web designer.

Web SDK and Adobe Analytics diagram

Learning Objectives

At the end of this lesson, you are able to:

  • Understand the function and significance of Web SDK in delivering the web channel experience.
  • Understand the process of creating a web channel campaign from start to finish utilizing the sample Luma Loyalty Rewards use case.
  • Configure campaign properties, actions, and schedules within the interface.
  • Understand the functionality and benefits of the Adobe Experience Cloud Visual Editing Helper extension.
  • Learn to edit web page content, including images, headers, and other elements, using the web designer.
  • Learn how to insert offers into a web page using the Offer decision component.
  • Familiarize yourself with best practices for ensuring the quality and success of a web channel campaign.

Prerequisites

To complete the lessons in this section, you must first:

  • Complete all lessons for initial configuration of the Platform Web SDK, including setting up data elements and rules.

  • Ensure that your Adobe Experience Platform Web SDK tags extension version is 2.16 or above.

  • Complete the Set up Experience Platform lesson, including the exercise to create the Luma Loyalty Rewards – Gold Status audience.

  • Downloaded and enable the Adobe Experience Cloud Visual Editing Helper browser extension.

  • If you are using the Journey Optimizer web designer to author your web channel experience, ensure you are using either the Google Chrome or Microsoft® Edge browsers.

  • Ensure that third-party cookies are allowed in your browser. It may be necessary to disable any ad blockers in your browser as well.

    note caution
    CAUTION
    In the Journey Optimizer web designer, certain websites may not reliably open due to one of the following reasons:
    1. The website has stringent security policies.
    2. The website is embedded within an iframe.
    3. The customer’s QA or stage site is not externally accessible (it is an internal site).

  • When creating web experiences and including content from the Adobe Experience Manager Assets Essentials library, it’s necessary to configure the subdomain for publishing this content.

  • If using the content experimentation feature, ensure that your web dataset is also included in your reporting configuration.

  • Currently, two types of implementations are supported for enabling the authoring and delivery of web channel campaigns on your web properties:

    • Client-side only: To modify your website, you must implement the Adobe Experience Platform Web SDK.
    • Hybrid mode: You can utilize the Platform Edge Network Server API to request personalization server-side. The response from the API is then provided to the Adobe Experience Platform Web SDK for rendering modifications on the client-side. For more information, refer to the Adobe Experience Platform Edge Network Server API documentation. Additional details and implementation samples for the hybrid mode can be found in this blog post.
    note note
    NOTE
    Server-side only implementation is not currently supported.

Terminology

First, you should understand the terminology used within web channel campaigns.

  • Web channel: A medium for communication or the delivery of content via the web. In the context of this guide, it refers to the mechanism through which personalized content is delivered to website visitors using the Platform Web SDK, within Adobe Journey Optimizer.
  • Web surface: Refers to a web property identified by a URL where content is delivered. It can encompass a single or multiple web pages.
  • Journey Optimizer web designer: A specific tool or interface within the Journey Optimizer where users can design their web channel experiences.
  • Adobe Experience Cloud Visual Editing Helper: A browser extension that assists in visually editing and designing web channel experiences.
  • Datastream: A configuration within the Adobe Experience Platform service that ensures web channel experiences can be delivered.
  • Merge policy: A configuration that ensures the accurate activation and publication of inbound campaigns.
  • Audience: A specific segment of users or site visitors who meet certain criteria.
  • Web designer: An interface or tool that aids in visually editing and designing web experiences without diving deep into code.
  • Expression editor: A tool within the web designer that allows users to add personalization to web content, potentially based on data attributes or other criteria.
  • Offer decision component: A component in the web designer that helps in deciding which offer is best suited to be displayed to a specific visitor based on decision management.
  • Content experiment: A method to test different content variations to find out which one performs best in terms of the desired metric, such as inbound clicks.
  • Treatment: In the context of content experiments, a treatment refers to a specific variation of content being tested against another.
  • Simulation: A preview mechanism to visualize the web channel experience before activating it for live audiences.

Configure the datastream

You have already added the Adobe Experience Platform service to your datastream. Now you need to enable the Adobe Journey Optimizer option so you can deliver web channel experiences.

To configure Adobe Journey Optimizer in the datastream:

  1. Go to the Data Collection interface.

  2. On the left navigation, select Datastreams.

  3. Select the previously created Luma Web SDK datastream.

    Select datastream

  4. Select Edit within the Adobe Experience Platform service.

    Edit datastream

  5. Check the Adobe Journey Optimizer box.

  6. Save the updated configuration.

    Check AJO box

This ensures that inbound events for Journey Optimizer are correctly handled by the Adobe Experience Platform Edge Network.

Configure the merge policy

Ensure that a merge policy is defined with the Active-On-Edge Merge Policy option enabled. This merge policy option is employed by Journey Optimizer inbound channels to ensure the accurate activation and publication of inbound campaigns on the edge.

To configure the option in the merge policy:

  1. Go to the Customer > Profiles page in either the Experience Platform or Journey Optimizer interface.

  2. Make sure you are in the sandbox used for the tutorial

  3. Select the Merge Policies tab.

  4. Select your policy (it’s usually best to use the Default Timebased policy), and toggle the Active-On-Edge Merge Policy option within the Configure step.

    Toggle merge policy

Configure the web dataset for content experimentation

To use content experiments within web channel campaigns, you must ensure the web dataset used is also included in your reporting configuration. The Journey Optimizer reporting system uses the dataset in a read-only fashion to populate out-of-the-box content experimentation reports.

Adding datasets for content experiment reporting is detailed in this section.

Use Case Overview – Loyalty Rewards

In this lesson, a sample Loyalty Rewards use case is used to detail implementation of a web channel experience using the Web SDK.

This use case enables you to better understand how Journey Optimizer can help deliver the best inbound experiences to your customers, utilizing Journey Optimizer campaigns, and the web designer.

As this tutorial is aimed at implementers, it’s worth noting that this lesson involves substantial interface work in Journey Optimizer. While such interface tasks are typically handled by marketers, it can be beneficial for implementers to gain insight into the process, even if they are not typically responsible for web channel campaign creation.

Create Loyalty Rewards Campaign

Now that you have ingested our sample loyalty data and created our segment, create the Loyalty Rewards web channel campaign in Adobe Journey Optimizer.

To create the sample campaign:

  1. Open the Journey Optimizer interface

    note note
    NOTE
    Schema, datasets, and audiences can also be built in the Journey Optimizer interface as they are all common Experience Platform constructs.

  2. Navigate to Journey Management > Campaigns in the left navigation

  3. Click Create campaign in the upper right.

  4. Choose the type of campaign. For the Loyalty Rewards use case, choose Scheduled - Marketing.

    Scheduled campaign

  5. Add some additional details to the new web channel campaign. First, name the campaign. Call it Luma Loyalty Rewards – Gold Status. Optionally, you can add a description to the campaign. Also add Tags to improve the overall campaign taxonomy.

    Name the campaign

  6. Go to the Actions tab

  7. Choose the Web as the Action name.

  8. Select Create new configuration as the Web configuration.

  9. As the Channel Configuration details, enter the following:

    1. LumaHomepage as the Name.
    2. Web as the Channel.
    3. Onsite Personalization as the Marketing action.
    4. Single page as the Web settings.
    5. https://luma.enablementadobe.com/index.html as the Page URL.

  10. Submit the new channel configuration

    Configure the Web Channel

  11. In the browser tab with your Campaign, select the new LumaHomepage configuration

    note tip
    TIP
    If the new configuration doesn’t appear in the dropdown, go to the Properties tab and then return to the Actions tab and check the dropdown again.

Experiment with Loyalty Rewards Content

Now that you have selected your Web configuration, in the Action section, you can optionally create an experiment to test out which content works better for the Luma Loyalty Rewards – Gold Status audience. Let’s create and test two treatments as a component of the campaign configuration.

To create the content experiment:

  1. Click Create experiment.

    Create experiment

  2. First choose a Success metric. This is the metric for determining content effectiveness. Choose Unique Clicks, to see which content treatment generates more clicks on the web experience CTA.

  3. Optionally, you can designate a Holdout that does not receive either of the two treatments. Leave this unchecked for now.

  4. Also optionally, choose to Distribute evenly. Check this option to ensure the treatment splits are always evenly split.

  5. Select Add treatment so you have two treatments in the experiment.

  6. Select Create.

    Choose success metric

Learn more about content experiments in Adobe Journey Optimizer web channel.

Edit Content using the Visual Helper

Now, let’s author the web channel experience. First, install the Adobe Experience Cloud Visual Editing Helper browser extension for Google Chrome and Microsoft® Edge, if you haven’t already. Once installed, proceed with the steps in the Journey Optimizer interface:

  1. Select Edit Content (or navigate to the Cotnent tab of the campaign). Since you entered a single page URL as the surface, you should be ready to begin working in the composer.

    Edit content

  2. Now, click Edit web page to begin authoring Treatment A of your experiement.

    Edit web page

  3. Start by editing some elements using the web composer. Use the contextual menu to edit the Luma hero image header. Adjust the style of the contextual pane on the right.

    Add contextual edits

  4. Also add personalization to the container using the Expression editor.

    Open the expression editor
    Add personalization

  5. Ensure that the experience is properly tracked for clicks. Choose Click track element from the contextual menu.

    Click track

There are many options available to personalize the messaging.

HTML Design Changes

There are a few methods available if you want to make more advanced, or custom changes to the site as a component of the Loyalty Rewards campaign. Explore some of these in Treatment B.

Use the Components pane to add HTML, or other content directly to the Luma site.

Explore the components pane

Add a new HTML component at the top of the page. Open the expression editor again to edit the HTML.

Open the expression editor

Alternatively, add HTML edits from the Modifications pane. This pane allows you to select a component on the page and edit it from the designer interface.

Within the editor, add the HTML for the Luma Loyalty Rewards – Gold Status audience. Select Validate.

Validate HTML

Now, review the new custom HTML component for fit and feel.

Target the campaign to an audience

By default, the campaign is active for all site visitors. For the purposes of this use case, only gold status reward members should see the experience. To target the content to this audience:

  1. Navigate to the Audience tab

  2. In the Identity namespace field, select the namespace for identifying individuals within the chosen segment. Since you are deploying the campaign on the Luma site, you can choose the ECID namespace. Profiles within the Luma Loyalty Rewards – Gold Status audience lacking the ECID namespace among their various identities are not targeted by the web channel campaign.

  3. Select audience

    Select audience

  4. Choose the Luma Loyalty Rewards - Gold Status audience you created in the Set up Experience Platform lesson.

  5. Save the audience to the campaign

    Save audience

Schedule the campaign

By default, campaigns will start and stop when you manually activate and deactivat them. However you have the option to schedule them to start and stop on specific dates and times. Leave the default settings and select Review to activate:

Campaign schedule

NOTE
Keep in mind that for web channel campaigns, the web experience is shown when the visitor opens the page. Therefore, unlike other types of campaigns in Adobe Journey Optimizer, the Action triggers section is not configurable.

Activating the Loyalty Rewards Campaign

You are prompted to confirm the campaign details one final time. Select Activate. It can take up to 15 minutes for the campaign to become live on the site.

Activate the campaign

Loyalty Rewards QA

There are a few logins you can use to simulate “gold status” users and qualify for your campaign. You must have uploaded the sample data in the Set up Experience Platform and create accounts using these credentials on the website for these to work.

  1. cleavlandeuler@emailsim.io/test
  2. leftybeagen@emailsim.io/test
  3. jenimartinho@emailsim.io/test

As a best practice, monitor the Web campaign statistics on the campaign overview screen after launching or click Reports for deeper reporting:

View web report

Web channel validation using Adobe Experience Platform Debugger

The Adobe Experience Platform Debugger extension, available for both Chrome and Firefox, analyzes your web pages to identify issues in the implementation of Adobe Experience Cloud solutions.

You can use the debugger on the Luma site to validate the web channel experience in production. This is a best practice once the Loyalty Rewards use case is up and running, to ensure that that everything is configured correctly.

Learn how to configure the debugger in your browser using the guide here.

To begin validation using the debugger:

  1. Navigate to the Luma web page with the web channel experience.
  2. While on the web page, open the Adobe Experience Platform Debugger.
  3. Navigate to Summary. Verify that the Datastream ID matches the datastream in Adobe Data Collection for which you enabled Adobe Journey Optimizer.
  4. You can then log in to the site with various Luma loyalty accounts, and use the debugger to validate the requests sent to the Adobe Experience Platform Edge Network.
  5. Under Solutions navigate to the Experience Platform Web SDK.
  6. Within the Configuration tab, Toggle on Enable Debugging. This enables logging for the session within an Adobe Experience Platform Assurance session.
  7. Log in to the site with various Luma loyalty accounts, and use the debugger to validate the requests sent to the Adobe Experience Platform Edge network. All of these requests should be captured in Assurance for log tracking.
NOTE
Thank you for investing your time in learning about Adobe Experience Platform Web SDK. If you have questions, want to share general feedback, or have suggestions on future content, please share them on this Experience League Community discussion post
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4