Set up Journey Optimizer web channel with Web SDK

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.

  • 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.

  • Also ensure you have downloaded and enabled the Adobe Experience Cloud Visual Editing Helper browser extension.

  • 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.

    Check AJO box

  6. Select Save.

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. Select the Merge Policies tab.

  3. 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 a Loyalty schema and ingest sample data

When Web SDK data is ingested into Adobe Experience Platform, it can be enriched by other data sources you have ingested into Platform. For example, when a user logs into the Luma site, an identity graph is constructed in Experience Platform and all other profile-enabled datasets can potentially be joined together to build Real-Time Customer Profiles. To see this in action, quickly create another dataset in Adobe Experience Platform with some sample loyalty data so that you can use Real-Time Customer Profiles in Journey Optimizer web campaigns. Since you have already done similar exercises the instructions will be brief.

Create the loyalty schema:

  1. Create a new schema

  2. Choose Individual Profile as the base class

  3. Name the schema Luma Loyalty Schema

  4. Add the Loyalty Details field group

  5. Add the Demographic Details field group

  6. Select the Person ID field and mark it as an Identity and Primary identity using the Luma CRM Id Identity namespace.

  7. Enable the schema for Profile

    Loyalty schema

To create the dataset and ingest the sample data:

  1. Create a new dataset from the Luma Loyalty Schema

  2. Name the dataset Luma Loyalty Dataset

  3. Enable the dataset for Profile

  4. Download the sample file luma-loyalty-forWeb.json

  5. Drag-and-drop the file into your dataset

  6. Confirm that the data successfully ingested

    Loyalty schema

Create an audience

Audiences group profiles together around common traits. Build a quick audience you can use in your web campaign:

  1. In the Experience Platform interface, go to Audiences in the left navigation

  2. Select Create audience

  3. Select Build rule

  4. Select Create

    Create an audience

  5. Select Attributes

  6. Find the Loyalty > Tier field and drag it onto the Attributes section

  7. Define the audience as users whose tier is gold

  8. Name the audience Luma Loyalty Rewards – Gold Status

  9. Select Edge as the Evaluation method

  10. Select Save

    Define the audience

Since this is a very simple audience, we can use the Edge evaluation method. Edge audiences evaluate on the edge, so in the same request made by the Web SDK to Platform Edge Network, we can evaluate the audience definition and confirm immediately if the user will qualify.

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. In the Properties section, specify how you want to execute the campaign. For the Loyalty Rewards use case, choose Scheduled.

    Scheduled campaign

  5. In the Actions section, choose the Web channel. As the Web surface, select Page URL.

    note note
    NOTE
    A web surface refers to a web property identified by a URL where content is delivered. It can correspond to a single page URL or encompass multiple pages, enabling you to apply modifications across one or multiple web pages.
  6. Choose the Page URL web surface option to deploy the experience on one page for this campaign. Enter the URL for the Luma page, https://luma.enablementadobe.com/content/luma/us/en.html

  7. Once the web surface is defined, select Create.

    Select web surface

  8. Now 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

  9. 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 enable this, click Select audience and choose the Luma Loyalty Rewards – Gold Status audience.

  10. 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.

    Choose identity type

  11. Schedule the campaign to begin on today’s date using the Campaign start option, and end in a week using the Campaign end option.

    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.

Experiment with Loyalty Rewards Content

If you scroll back up, 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 Inbound Clicks, to see which content treatment generates more clicks on the web experience CTA.

    Choose success metric

  3. When setting up an experiment using web channel and choosing the Inbound Clicks, Unique Inbound Clicks, Page Views, or Unique Page Views metrics, the Click Action drop-down enables you to precisely track and monitor clicks and views on specific pages.

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

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

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. To do so, use the Adobe Experience Cloud Visual Helper. This tool is a browser extension compatible with Google Chrome and Microsoft® Edge. Make sure you have downloaded the extension before attempting to build your experiences. Also ensure that the web page includes the Web SDK.

  1. Within the Action tab of the campaign, click Edit content. 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.

    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.

    Add personalization

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

    Click track

  6. Use the Offer decision component to insert offers in the web page. This component uses Decision Management to pick the best offer to deliver to Luma visitors.

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.

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. Edit the HTML within the component from the design interface or Contextual pane.

Add custom HTML

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.

Review custom HTML

Edit a specific component using the CSS selector type modification.

Modify CSS

Add custom code using the Page <head> type modification.

Modify head

The possibilities are endless using the Visual Helper.

Simulate Loyalty Rewards Content

Look at a preview of the modified web page before activating the campaign. Keep in mind that you must have test profiles configured to simulate web channel experiences.

To simulate the experience:

  1. Select Simulate content within the campaign.

    Simulate content

  2. Choose a test profile to receive the simulation. Keep in mind that the test profile should be in the Luma Loyalty Rewards – Gold Status audience to receive the proper treatment.

  3. The preview is displayed for the test profile.

Activating the Loyalty Rewards Campaign

Finally, activate the web channel campaign.

  1. Select Review to activate.

  2. 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.

Loyalty Rewards QA

There are a few logins you can use to simulate “gold status” users and qualify for your campaign:

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

As a best practice, monitor the Web tab of the campaign live and global reports for the campaign-specific KPIs. For this campaign, monitor experience impressions, and click rate.

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.

Next: Set up Journey Optimizer decision management

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