Session One
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/. You are welcome to use your own website for the exercises.
Log into the Adobe Experience Cloud, and navigate to Data Collection using the nine-dot picker menu on the right side of the top navigation.
Setup Event Forwarding
- Navigate to Event Forwarding (left nav)
- Create a property with the name: Lab EF
Setup Datastream
- Navigate to Datastreams (you may need to click the hamburger icon in the top left to show the left nav)
- Create a new Datastream with the name: Lab Datastream
- Save (we don't need to select an event schema in our case)
- Open the Lab Datastream
- Click the Add Service button
- Choose Event Forwarding in the service drop-down
- Select the Lab EF event forwarding property created earlier in the property drop-down
- Select Development in the environment drop-down
Setup Tags
- Navigate to Tags (you may need to click the menu icon in the top left to show the left nav)
- Create a property with the name: Lab Tags
- Select Web as platform
- Enter enablementadobe.com in domains field
- 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
- Select Lab Tags property
- Navigate to Extensions in the left nav
- Click Catalog
- Search for "web sdk"
- Install the Adobe Experience Platform Web SDK extension
Configure the AEP Web SDK extension
The default configuration needs two small adjustments for our setup.
- In the Datastreams section, choose PRODUCTION Prod (VA7) and then Lab Datastream in the Production Environment drop-downs.
- Uncheck the "Enable click data collection" setting in the Data Collection section.
- Save
Create a Rule
Now that the Web SDK extension is configured, we'll create a rule to make a request to the Adobe Edge.
- In Tags, navigate to Rules in the left nav.
- Create a new rule and name it Lab All Pages.
- Add an event and choose Page Bottom in the Event Type drop-down, then click Keep Changes.
- Under the Actions section, click the Add button
- Select Adobe Experience Platform Web SDK in the Extension drop-down
- In the Action Type drop-down select Send event
- When the configuration view opens, change the Type drop-down to: Web Webpagedetails Page Views.
- Click Keep Changes for the action
- Click Save
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.
- Navigate to Publishing Flow in the left nav
- Click Add Library and name it Lab Tags Dev
- Select Development for the Environment drop-down
- Click Add All Changed Resources toward the bottom. After the resources are added, click the Save & Build to Development button.
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 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
- In Tags, navigate to Environments in the left nav
- Click the Install icon for Development
- A modal window with web install instructions will appear. Copy the script code to your clipboard. (ex. <script src="https://assets.adobedtm.com/da1a2s3g4e...">)
- Open the Adobe Experience Platform Debugger
- 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.
- 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.
- Paste the Development implementation code previously copied to the clipboard and click Apply.
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 is 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.
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: digitalData. We can capture this data layer in Tags and send it to the Edge for use with Event Forwarding.
- 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.
- Create a new data element
- Name it datalayer
- Leave the extension as Core. Then select JavaScript Variable in the data element type drop-down.
- The JavaScript variable name will be the same value we typed in the console to see the data layer, digitalData
- Save
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.
- Navigate to Rules
- Select the All Pages rule, under Actions click the send event action
- In the configuration window, click the cylinder icon (this allows us to choose from our Data Elements) next to the Data field
- Select datalayer
- Keep changes and save rule
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.
- Navigate to Publishing Flow
- Click on your development library
- Add all changed resources to the library
- Click the save and build button
- Now reload your Luma site page in a separate tab of your browser
- 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 breadcrumb 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.
- Click to add a data element
- Name it campaignId
- For the data element type select Query String Parameter from the drop-down
- Enter cid as the query string parameter name
- For the storage duration select Session from the drop-down
- Save the data element
The second data element will be for passing the breadcrumb from the datalayer on the Luma site.
- Click to add a data element
- Name it breadcrumb
- For the data element type select JavaScript Variable from the drop-down
- Enter digitalData.page.pageInfo.breadcrumbs as the script variable name
- 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. Just opening this site will assign you a unique URL that you can use for your tag.
Leave this Webhook site tab open and return to the Tags tab/window. Navigate to Rules in the left nav.
- Click to add a new rule, name it 3rd Party Beacon
- Under Events click add
- From the event type drop-down choose the option Page Bottom
- Click to keep changes
- Under Actions click add
- Leave Extension as Core, choose Custom Code for the action type
- Leave language to JavaScript and open the editor
- Paste in the following code to fire a request to Webhook.site
- fetch('REPLACE_WITH_YOUR_WEBHOOK_URL?campaign_id='+_satellite.getVar("campaignId")+'&breadcrumb='+_satellite.getVar("breadcrumb"),{ method: 'GET', mode: 'no-cors' }) .catch(err => { console.error(err); });
- Replace the "REPLACE_WITH..._URL" text in the code above with the Webhook.site url from your Webhook.site tab that is open
- Save the custom code
- Optional: Give the action the name: Fetch to Webhook site
- Click to keep changes
- 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.
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
- Navigate to Extensions from the left nav
- Select the Catalog tab and install the Adobe Cloud Connector extension
- Return to the Catalog tag and install the Meta Conversions API extension
- For the lab, just use dummy data when prompted for a Pixel ID and Access Token, for example:
- 12345
- N9K633-ABC
- Don't click Connect to Meta button as this is just dummy data
- Save the configuration
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 breadcrumb 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
- Navigate to Data Elements from the left nav
- Select the datalayer Data Element
- Change the type drop-down to custom code
- Open the editor and paste the following code:
- dl = digitalData; dl.campaignId = _satellite.getVar("campaignId"); return dl;
- This code will grab the existing data layer and add the campaignId to it from our campaignId data element we created earlier
- Save the custom code and save the data element
- Add all changes to your library and save and build the updated library
- Now your interact calls from the Luma site should be sending campaignId information along to the Edge
- Breadcrumbs are 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 breadcrumb to allow us to migrate the rule properly.
- In Event Forwarding navigate to Data Elements
- Click to add a data element
- Name it campaignId
- For the data element type select Path from the drop-down
- Select arc.event.data in the top field
- Enter campaignId as the path field
- Save the data element
The second data element will be for the breadcrumb.
- Click to add a data element
- Name it breadcrumb
- For the data element type select Path from the drop-down
- Select arc.event.data in the top field
- Enter page.pageInfo.breadcrumbs as the path field
- Save the data element
Create Webhook rule in Event Forwarding
- In Event Forwarding, navigate to Rules and click to create a new rule
- Name it Webhook 3rd party call
- Click to add an action
- Select Adobe Cloud Connector as the extension and Make Fetch Call as the action type
- Copy your URL from the webhook.site page
- Paste the URL into the URL field, leave the method as GET
- 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 breadcrumb, select the breadcrumb data element for the value
- Optionally add a third parameter named src, for the value type in eventForwarding
- Keep changes to the action, and then save the rule
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:
- Navigate to Publishing Flow
- Add a library named Lab EF Dev
- Set environment to development
- Click to add all changed resources
- Then click to save and build
See it working
To see our changes lets load the Luma site. 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.
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:
- Open the AEP Debugger
- Click to sign in (upper right corner), it should automatically detect your sign in if you are logged in on the browser.
- Click Logs from the left nav under Tools
- Click the Edge tab
- 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.
