--- title: POC-P2 - SDK and API Integration slug: cebu/poc-p2-sdk-and-api-integration docTags: createdAt: 2026-06-26T02:22:24.854Z --- This tutorial is designed to teach you about Adobe's Data Collection capabilities used to ingest fast moving behavioural data from your website and app or other devices. The components taught in this module are core to all Adobe Experience Platform applications. It is designed for a technical audience (Data Architects, Data and Web/Mobile Engineers) but can be interesting also for marketers to understand. ## Learning Objectives - Learn how to access Adobe's Tag Manager - Learn how to configure a Datastream for data collection ## Access Data Collection Adobe Data Collection manages the streaming ingestion of behavioural data and integration with our Web and Mobile SDK's. Data collection also offers ingestion of data from IOT devices using the Edge Network API. Once the SDK is deployed to either your website or App, data is sent to Adobe's Edge Network servers before being forwarded to Adobe Experience Platform. Whether you use adobe's Tag Manager or choose to implement the SDK another way, the events must be routed to a Datastream. The datastream controls which Adobe applications the data is routed to. Eg. you can route the same event to both Adobe Experience Platform and Adobe Analytics at the same time. For Adobe Experience Platform, the Datastream also controls which datasets the data coming from the SDK lands in. Since Data Collection services more than one Adobe product, it has it's own menu item separate from Adobe Experience Platform. You can access Data Collection by clicking on the product selector in the top right. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/j7zwG_gxraM2_9EKOBmVE_image.png) ## Review Cebu Datastreams Once you're within the Data Collection UI, navigate to **Datastreams **to see the datastreams configured for the POC. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/L4ZR32_BbKS0WAXZ0denM_image.png) Click to open the **gillies - Cebu POC (web) **datastream. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/zjV5U9cwcmD34PXf8lC99_image.png) You can see there are 2 services are enabled, Adobe Experience Platform and Adobe Target. Click to **edit Adobe Experience Platform**. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/uGJFUdIGay1wrKiKg_klN_image.png) The configuration defines which datasets data lands in from this datastream as well as which modules from the AEP are enabled. For CDP we have enabled only Edge Segmentation (for real-time audience qualifications) and Personalisation Destinations (not used for the POC but allows for integration with third party personalisation tools like Optimizely or Dynamic Yield). ## Review the WebSDK configuration The WebSDK is deployed to the mock website using Adobe's Tag Manager called **Tags. ** Navigate to **Data Collection -> Tags **and search for **Cebu. ** ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/vv7GwVw8ns_nEFGXZ45-n_image.png) You can see 3 separate properties, one for web, one for mobile and one for our customer service app. Click to open the web property **gillies - Cebu POC (web) ** ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/2U1oJVOQPNvVASS2f-8j6_image.png) Once you're in the property, navigate to **Extensions **this is where you'll find the **Web SDK **configuration**. ** Select the extension and click to **Configure. ** ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/Z6qlwFl--SYzxO4ZDP9N0_image.png) There are many configurations available but the most important configuration is the Datastream setting. This is the minimum requirement for enabling the SDK. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/1i4gNLXoSBJSjUI1P9MhD_image.png) ## Review a Send Event Rule Data elements contain references to specific data objects either within the data layer or browser storage. Rules are used to trigger actions when things happen on the website. Navigate to **Rules **and search for **Send. **You'll see a number of rules starting with the work **Send. **Click into the **Send ongoing Flight Selection 2.0** rule. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/zjQFMwFvlHowQB4Y0TSjB_image.png) The rule is triggered by one of more **events**, and takes one or more **actions**. Click into the **Send Ongoing Flight selection Event **action. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/gJbovvMhCMVwoavlUaqOz_image.png) You can see the action is using the **WebSDK** to send an event of type **booking.selection**. The full payload of the event is controlled by the XDM data element. ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/4TZPQxr2fd2CsJtYs-A8g_image.png) :::hint{type="success"} **Congratulations!** You now know how to configure data collection via Adobe's WebSDK. ::: ## Additional Resources The Adobe Experience Platform Web SDK is a client-side JavaScript library that sends data to the Experience Platform Edge Network in a solution-agnostic way (XDM), which then maps data to solution-specific formats and sends it in real time. - [Web SDK (alloy.js) Documentation ](https://experienceleague.adobe.com/en/docs/experience-platform/edge/home) - [Implement Experience Cloud with Web SDK (Tutorial) ](https://experienceleague.adobe.com/en/docs/platform-learn/implement-web-sdk/overview) - **[Data Collection Overview (Edge Network, SDKs, APIs)](https://experienceleague.adobe.com/en/docs/experience-platform/collection/home)**