Install Adobe Experience Platform Web SDK tag extension

Learn how to install and configure the Adobe Experience Platform Web SDK tag extension. The easiest way to implement Web SDK is using Adobe’s tag manager, tags (formerly known as Launch). The Platform Web SDK tag extension is the only tag extension required to send data to all Adobe Experience Cloud applications, including Analytics, Target, Audience Manager, Real-Time Customer Data Platform, and Journey Optimizer!

Learning objectives

At the end of this lesson, you will be able to:

  • Create a tag property in the Data Collection interface
  • Install the Platform Web SDK tag extension
  • Map your previously created datastream to the extension

Prerequisites

You must have completed the previous lessons in this tutorial:

Add a tag property

A tag property is a container for all the JavaScript, rules, and other features required to collect details from a web page and send it to various locations.

Create a new tag property for the tutorial:

  1. Open the Data Collection interface
  2. Select Tags in the left navigation
  3. Select the New Property button
    Add a new property
  4. As the Name, enter Luma Web SDK Tutorial (add your name to the end, if multiple people from your company are taking this tutorial)
  5. As the Domains, enter enablementadobe.com (explained later)
  6. Select Save
    Property details

Add the Web SDK extension

With your XDM schema, datastream, and tag property now created, you are ready to install the Platform Web SDK extension:

  1. Open your new tag property

  2. Go to Extensions > Catalog

  3. Search for Adobe Experience Platform Web SDK

  4. Select the Adobe Experience Platform Web SDK extension so the sidebar opens

  5. Select Install

    Install Web SDK Extension

Leave most of the default settings and update them later, as needed. The only thing that you must do now is link the extension to your datastream. This adds the correct datastream/config id to the network calls made from the browser, so the calls are routed to the correct datastream when they arrive in the Platform Edge Network:

  1. Under Datastreams, select the Choose from list input method

  2. Configure the Production Environment. (The other tag environments in the property will inherit the production settings):

    1. Select the sandbox in which you created the schema, identity namespace and datastream
    2. Select the datastream that you created earlier, Luma Web SDK: Development Environment
  3. Select Save

    Datastream selection

For more information on each section of the extension, see Configure the Adobe Experience Platform Web SDK extension.

NOTE
While you did not configure a CNAME in the Edge domain setting in this lesson, Adobe recommends you use a CNAME when you implement Platform Web SDK on your own website. While a CNAME implementation does not provide any benefits in terms of cookie lifetime, there may be some other benefits. These benefits include ad blockers and less-common browsers preventing data from being sent to domains that they classify as trackers. In these cases, using a CNAME can prevent your data collection from being disrupted for users employing these tools.
NOTE
During this tutorial, you configure just one datastream and associate it with all tag environments (development, stage, and production). When you implement Platform Web SDK on your own website, you should configure a separate datastream for each environment and map them accordingly in the extension configuration.

Now that you have installed Platform Web SDK and associated it with the datastream, you are ready to start collecting data.

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