---
title: Session One
slug: rtcdp-connections-lab/session-one
docTags: 
createdAt: 2026-06-26T22:06:03.803Z
---

Deploy the Adobe Experience Platform Web SDK and send data to the Adobe Experience Platform Edge Network

## Getting started

For this lab, we will be working with a demo site found here: [https://luma.enablementadobe.com/](https://luma.enablementadobe.com/). You are welcome to use your own website for the exercises.

Log into the [Adobe Experience Cloud](https://experience.adobe.com/), and navigate to *Data Collection* using the nine-dot picker menu on the right side of the top navigation.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/EbFeSLkpzoP4KxU8bhjRt_9dot-picker.jpg)

### Setup Event Forwarding

1. Navigate to *Event Forwarding* (left nav)
2. Create a property with the name:  ***Lab EF***

### Setup Datastream

1. Navigate to Datastreams (you may need to click the hamburger icon in the top left to show the left nav)
   1. Create a new Datastream with the name:  ***Lab Datastream***
   2. Save (we don't need to select an event schema in our case)
2. Open the *Lab Datastream*
   1. Click the *Add Service* button
   2. Choose *Event Forwarding* in the service drop-down
   3. Select the *Lab EF* event forwarding property created earlier in the property drop-down
   4. Select *Development* in the environment drop-down

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/CfR5mO0tGrAFLTaxiHqaZ_add-service-datastream.jpg)

### Setup Tags

1. Navigate to Tags (you may need to click the menu icon in the top left to show the left nav)
2. Create a property with the name: ***Lab Tags***
   1. Select Web as platform
   2. Enter **enablementadobe.com** in domains field
   3. Save

## Configure Tags Development

Tags is what handles client-side requests on the site. Here we'll add the AEP Web SDK to make a call to the Adobe Experience Edge.

### Install the AEP Web SDK

1. Select *Lab Tags* property
2. Navigate to Extensions in the left nav
3. Click Catalog
4. Search for "web sdk"
5. Install the *Adobe Experience Platform Web SDK* extension

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/7-uw49Dr2SmS5KdUZxZHl_web-sdk-ext-install.jpg)

### Configure the AEP Web SDK extension

The default configuration needs two small adjustments for our setup.

1. In the *Datastreams* section, choose the proper Production Environment (*DEVELOPMENT RTCDP Connections Lab* if not already be selected for the environment) and then the lab datastream you created earlier.
2. Uncheck the "Enable click data collection" setting in the Data Collection section.
3. Save

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/l29Ls_ozjBpWeJYT96vMj_web-sdk-ext-config-v2.jpg)

## Create a Rule

Now that the Web SDK extension is configured, we'll create a rule to make a request to the Adobe Edge.

1. In Tags, navigate to Rules in the left nav.
2. Create a new rule and name it ***Lab All Pages***.
3. Add an event and choose *Page Bottom* in the Event Type drop-down, then click *Keep Changes*.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/pVrweyi8ilW2AVvAjO5Ve_event-page-bot.jpg)

1. Under the Actions section, click the *Add* button
2. Select *Adobe Experience Platform Web SDK* in the Extension drop-down
3. In the Action Type drop-down select *Send event*
4. When the configuration view opens, change the Type drop-down to: *Web Webpagedetails Page Views*.
5. Click *Keep Changes* for the action
6. Click Save

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/WJNBMVFGN-7qN0rh6p3Cw_create-a-page-load-rule-action.jpg)

## Publish changes to Tags

Now we have the extension installed and a rule in place to fire a send event on all pages, we need to publish the changes we've made by creating a library in the Publishing Flow.

1. Navigate to *Publishing Flow* in the left nav
2. Click *Add Library* and name it ***Lab Tags Dev***
3. Select Development for the Environment drop-down
4. Click *Add All Changed Resources* toward the bottom. After the resources are added, click the *Save & Build to Development* button.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/IJ5-ENVyEjEzOVBPwZMXV_tags-publish-flow.jpg)

After building successfully, there should be a green dot next to the Lab Tags Dev library name under Development flow. We are now ready to check our Tags deployment on our site.

## Validate Tags Deployment

To validate on our [Luma site](https://luma.enablementadobe.com/) we'll need to get the JavaScript embed code from Tags and then use the Adobe Experience Platform Debugger to swap the existing Tags deployment with our new lab one. Then we can reload the website and see our new Tags deployment and the send event firing.

### Deploy Tags code via Adobe Experience Platform Debugger

1. In Tags, navigate to Environments in the left nav
2. Click the *Install* icon for Development
3. A modal window with web install instructions will appear. Copy the script code to your clipboard. (ex. `<script src="https://assets.adobedtm.com/da1a2s3g4e...">`)
4. In a new browser tab, navigate to [https://luma.enablementadobe.com/](https://luma.enablementadobe.com/)
5. Open the Adobe Experience Platform Debugger
   - If you don't have it installed, please install for [Chrome](https://chrome.google.com/webstore/detail/adobe-experience-platform/bfnnokhpnncpkdmbokanobigaccjkpob) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/adobe-experience-platform-dbg/).
6. With the debugger open, reload the Luma website and click the *Lock* button in the bottom right corner of the debugger. The debugger will detect the Adobe Tags currently on the page.
7. In the debugger, click *Experience Platform Tags* in the left nav and select the *Configuration* tab. Part way down the window you should see *Page Embed Codes* with a 3-dot Actions label to the right of it. Click the action and choose *Replace*.
8. Paste the Development implementation code previously copied to the clipboard and click *Apply*.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/-poYbKYAIodiMrzOGzWNI_replace-embed-code.jpg)

### Inspect the requests

If you reload the website page again we should see our send event call via the AEP Web SDK. In the Debugger you can see these requests by clicking *Experience Platform Web SDK*. By clicking on the value of the POST Body field in the request, you can confirm what data is sent. Most of the data is just out-of-the-box data. However, you should be able to find the type value we configured within the *All Pages* rule of *web.webpagedetails.pageView*.

You can also see the requests by using the browser's Developer Tools: Network tab. Filter the network requests by the word "interact" to see just the requests to the Adobe Experience Edge.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/dbd6fquxXZLQhAde_evMF_validate-request-dev-tool.jpg "FireFox Developer Tools view, in Chrome that tab is Payload")

## Send your data layer

On the Luma site we have a data layer. You may have a similar one on your website. We can see the Luma site data layer by using the Console tab of the browser developer tools by typing: adobeDataLayer. We can capture this data layer in Tags and send it to the Edge for use with Event Forwarding.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/hPZrGeWqOg3iSR2-WyAC6_inspecting-the-digital-data-layer-in-console.png)

1. Go back to your Tags property. Navigate to *Data Elements* from the left nav. By creating a data element that stores some data from the site we can use that data in a rule.
2. Create a new data element
3. Name it **datalayer**
4. Leave the extension as Core. Then select *Custom Code* in the data element type drop-down.
5. Click Open Editor and paste the following code:

```javascript
const dl = window.adobeDataLayer[0];
return dl;
```

1. Save

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/J3JFgDrb5ODkcUj6NWet8_datalayer-data-element.jpg)

### Update the All Pages rule

Now we want to edit our *All Pages* rule to include the data layer when it sends the event data.

1. Navigate to Rules
2. Select the *All Pages* rule, under Actions click the send event action
3. In the configuration window, click the cylinder icon (this allows us to choose from our Data Elements) next to the Data field
4. Select datalayer
5. Keep changes and save rule

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/DoP-AZnEOKTKAIhrBgO_n_send-event-rule-datalayer.jpg)

### Publish the changes and validate

Now we've augmented the data we are sending to the Adobe Experience Edge we need to publish and build our Tags property changes and then validate them on our Luma demo site.

1. Navigate to *Publishing Flow*
2. Click on your development library
3. Add all changed resources to the library
4. Click the save and build button
5. Now reload your Luma site page in a separate tab of your browser
6. Examine the interact call payload to confirm the data layer content is sent to the Edge

Forward Data from AEP Edge Network

## Deploy a client-side tag

In the remainder of this session, we'll be working mostly in Event Forwarding to configure data elements and rules that will help us migrate a the client-side tag on the Luma site to the Adobe Experience Edge (server-side). In order to demonstrate this, we are first going to add a sample client-side tag to our Luma site via our Tags property called, ***Lab Tags***.

We are going to create a tag that sends campaign id and path information from the browser to another location/endpoint.

**Data Elements**

Navigate to your Tags property and then to *Data Elements* in the left nav. We need to create two data elements. First one will be for the campaign id.

1. Click to add a data element
2. Name it ***campaignId***
3. For the data element type select *Query String Parameter* from the drop-down
4. Enter ***cid*** as the query string parameter name
5. For the storage duration select *Session* from the drop-down
6. Save the data element

The second data element will be for passing the path from the datalayer on the Luma site.

1. Click to add a data element
2. Name it ***path***
3. For the data element type select *Custom Code* from the drop-down
4. Click *Open Editor* and enter ***return adobeDataLayer\[0].page.path;*** as the code
5. Save the code
6. Save the Data Element

**Creating a 3rd party tag rule**

With the data elements setup we now need to create a webhook tag id. You can do this by opening a new tab/browser-window and navigating to the [Webhook site.](https://webhook.site/) Just opening this site will assign you a unique URL that you can use for your tag.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/TmsaGXy3TEbYoZkIAOsFX_webhook-site.jpg)

Leave this Webhook site tab open and return to the Tags tab/window. Navigate to Rules in the left nav.

1. Click to add a new rule, name it ***3rd Party Beacon***
2. Under Events click add
3. From the event type drop-down choose the option *Page Bottom*
4. Click to keep changes
5. Under Actions click add
6. Leave Extension as Core, choose *Custom Code* for the action type
7. Leave language to JavaScript and open the editor
8. Paste in the following code to fire a request to Webhook.site
   - `fetch('REPLACE_WITH_YOUR_WEBHOOK_URL?campaign_id='+_satellite.getVar("campaignId")+'&path='+_satellite.getVar("path"),{ method: 'GET', mode: 'no-cors' }) .catch(err => { console.error(err); });`
9. Replace the "`REPLACE_WITH..._URL`" text in the code above with the Webhook.site url from your Webhook.site tab that is open
10. Save the custom code
11. *Optional*: Give the action the name: ***Fetch to Webhook site***
12. Click to keep changes
13. Click to save the rule

**Publish changes and validate**

Now navigate to *Publishing Flow* in Tags left nav. Here we'll open the library we created last time and add all changed resources like we've done before. Then you'll click to save and publish the changes to your library.

Now you should be able to load the Luma site with your property replacing the default Experience Platform Tags deployment (via AEP Debugger) and see the new request firing out to your Webhook.site. You should also see the request landing at your Webhook.site. If you browse to different pages or add a "cid=something" parameter in your URL on Luma it should also be passed along to your Webhook.site.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/G5WKwBhbzJOrvyGx1g3TU_webhook-request-view.jpg)

## Configure Event Forwarding

Navigate to *Event Forwarding* (you may need to click the hamburger icon in the top left to show the left nav) and select our property ***Lab EF***. We'll start by adding the needed extensions and then the data elements that will enable us to migrate our client-side tags to the Experience Edge.

### Setup extensions

1. Navigate to Extensions from the left nav
2. Select the Catalog tab and install the *Adobe Cloud Connector* extension
3. Return to the Catalog tag and install the *Meta Conversions API* extension
4. For the lab, just use dummy data when prompted for a Pixel ID and Access Token, for example:
   - 12345
   - N9K633-ABC
5. Save the configuration

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/0BKCB61RHiPAvqxpDLIIq_meta-ext-config.jpg)

## Migrate the Webhook.site tag

Now we have our Event Forwarding property setup we need to ensure that we are sending all the appropriate data needed for our webhook.site tag to the Experience Edge.

### Pass data elements to the Edge

The webhook.site tag collects both campaign id and path data. We can add it to the page's data layer to ensure it get passed in our interact call to the Edge since the data layer is getting forwarded along.

Navigate back to Tags and select the ***Lab Tags*** property.

**Update the Tags datalayer data element**

1. Navigate to *Data Elements* from the left nav
2. Select the datalayer *Data Element*
3. Open the editor and add the following code above the `return dl;` line:
   - `dl.campaignId = _satellite.getVar("campaignId");`
   - This code will grab the existing data layer and add the campaignId to it from our campaignId data element we created earlier
4. Save the custom code and save the data element
5. Add all changes to your library and save and build the updated library
   1. Now your interact calls from the Luma site should be sending campaignId information along to the Edge
   2. Path is already part of the data layer so no additional config is needed

**Setup data elements in Event Forwarding**

On the Event Forwarding side, we'll also need a data element for the campaignId and path to allow us to migrate the rule properly.

1. In Event Forwarding navigate to *Data Elements*
2. Click to add a data element
3. Name it ***campaignId***
4. For the data element type select *Path* from the drop-down
5. Select *arc.event.data* in the top field
6. Enter ***campaignId*** as the path field
7. Save the data element

The second data element will be for the path.

1. Click to add a data element
2. Name it ***path***
3. For the data element type select *Path* from the drop-down
4. Select *arc.event.data* in the top field
5. Enter ***page.path*** as the path field
6. Save the data element

### Create Webhook rule in Event Forwarding

1. In *Event Forwarding*, navigate to *Rules* and click to create a new rule
2. Name it ***Webhook 3rd party call***
3. Click to add an action
4. Select *Adobe Cloud Connector* as the extension and *Make Fetch Call* as the action type
5. Copy your URL from the webhook.site page
6. Paste the URL into the *URL* field, leave the method as *GET*
7. Add the following query parameters and values (use the data elements we created to populate the value fields
   - Name the first one ***campaign\_id***, select the *campaignId* data element for the value
   - Name the second one ***path***, select the *path* data element for the value
   - Optionally add a third parameter named ***src***, for the value type in ***eventForwarding***
8. Keep changes to the action, and then save the rule

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/FajvuN8mMK2ZMsG9MthGh_webhook-rule-action-ef.jpg)

## Publish changes and validate

Now we've migrated the webhook.site tag, and setup the Meta Conversion API in Event Forwarding let's publish changes and test them on our Luma demo site.

To publish changes we want to:

1. Navigate to *Publishing Flow*
2. Add a library named ***Lab EF Dev***
3. Set environment to development
4. Click to add all changed resources
5. Then click to save and build

### See it working

To see our changes lets load the [Luma site](https://luma.enablementadobe.com/content/luma/us/en.html). Our AEP Debugger should still be loading our lab tags property to the site. Since the Event Forwarding calls happen on the Edge we can't see them in the Network tab of the Developer Console like we could a client-side call. However, we should see our request from the Edge hitting our webhook.site page. After loading a page or two on the Luma site after publishing our changes, open the webhook.site tab and see if any new requests have landed there.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/s6-tMRck2GBKDA4h3Laoi_webhook-request-view2.jpg)

You will likely see two requests for each page view. This is because we have not yet disabled our client-side tag, so both a client-side call and Event Forwarding call is being made on each page. You can disable your your Tags 3rd Party rule to only fire one request. Each request should have the same query parameters (except the "src=eventForwarding" if you added that one). You'll also notice they are from different IP addresses.

### Validate with AEP Debugger

You can also validate the Event Forwarding requests when you are logged in to the AEP Debugger. To see these requests do this:

1. Open the AEP Debugger
2. Click to sign in (upper right corner), it should automatically detect your sign in if you are logged in on the browser.
3. Click *Logs* from the left nav under *Tools*
4. Click the Edge tab
5. Click connect to start monitoring the logs on the Edge

When logs appear if you scan for the blue hyperlink text you can quickly see when Event Forwarding made calls out to other destinations.

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/-zEpLuiQy9RUCDl-Z4ABH_validate-data-leaving-the-edge.png)