Implement Adobe Experience Cloud with Web SDK tutorial

Last update: April 26, 2024

CREATED FOR:

  • Beginner
  • Intermediate
  • Developer

Learn how to implement Experience Cloud applications using Adobe Experience Platform Web SDK.

Experience Platform Web SDK is a client-side JavaScript library that allows customers of Adobe Experience Cloud to interact with both Adobe applications and third-party services through the Adobe Experience Platform Edge Network. See Adobe Experience Platform Web SDK Overview for more detailed information.

Experience Platform Web SDK architecture

This tutorial guides you through the implementation of the Platform Web SDK on a sample retail website called Luma. The Luma site has a rich data layer and functionality that lets you build a realistic implementation. For this tutorial, you:

  • Create your own tags property, in your own account, with a Platform Web SDK implementation for the Luma website.

  • Configure all data collection features for Web SDK implementations such as datastreams, schemas, and identity namespaces.

  • Add the following Adobe Experience Cloud applications:

  • Implement event forwarding to send the data collected by Web SDK to non-Adobe destinations.

  • Validate your own Platform Web SDK implementation using Experience Platform Debugger and Assurance.

After completing this tutorial, you should be ready to start implementing all of your marketing applications through Platform Web SDK on your own website!

NOTE
A similar multi-solution tutorial is available for Mobile SDK.

Prerequisites

All Experience Cloud customers can use Platform Web SDK. It is not a requirement to license a Platform-based application like Real-Time Customer Data Platform or Journey Optimizer to use Web SDK.

In these lessons, it is assumed that you have an Adobe account and the required permissions to complete the lessons. If not, you must reach out to an Experience Cloud Administrator at your company to obtain access.

  • For Data Collection, you must have:

    • Platforms—permission for Web and, if licensed, Edge

    • Property Rights—permission to Approve, Develop, Edit Property, Manage Environments, Manage Extensions, and Publish,

    • Company Rights—permission to Manage Properties

      For more information concerning tag permissions, see the documentation.

  • For Experience Platform, you must have:

    • Access to the default production, “Prod” sandbox.

    • Access to Manage Schemas and View Schemas under Data Modeling.

    • Access to Manage Identity Namespaces and View Identity Namespaces under Identity Management.

    • Access to Manage Datastreams and View Datastreams under Data Collection.

    • If you are a customer of a Platform-based application and will be completing the Set up Experience Platform lesson, you should also have:

      • Access to a development sandbox.
      • All permission items under Data Management, and Profile Management:

      The required features should be available to all Experience Cloud customers, even if you are not a customer of a Platform-based application like Real-Time CDP.

      For more information on Platform access control, see the documentation.

  • For the optional Adobe Analytics lesson, you must have admin access to Report Suite Settings, Processing Rules, and Analysis Workspace

  • For the optional Adobe Target lesson, you must have Editor or Approver access.

  • For the optional Audience Manager lesson, you must have access to create, read, and write traits, segments, and destinations. For more information, refer to the tutorial on Audience Manager’s Role-Based Access Control.

NOTE
It is assumed that you are familiar with front-end development languages like HTML and JavaScript. You do not need to be an expert in these languages, but you get more out of this tutorial if you can read and understand code.