---
title: Data Collection Setup
slug: lab612-2025/data-collection-setup
docTags: 
createdAt: 2025-03-04T17:43:05.454Z
---

1. Navigate to **Data Collection** using the 9 dot picker in the top right hand of the screen



   ::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/hfRpQY6ObzvabAqnQ13pM_image.png" size="50" width="370" height="837" position="center" showCaption="false"}
2. Navigate to **Tags** on the left hand navigation panel



   ::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/4PpDknS3gLrF5YaOoBWuO_image.png" size="50" width="495" height="191" position="center" showCaption="false"}
3. Click into your Data Collection tag. It will be named **msimpson - L612 - \<STATION> (web)**, *where \<STATION> is the station you are seated at*.



   ::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/SmhqUdf0E7ir76CcFaBv5_image.png" size="74" width="1272" height="220" position="center" showCaption="false"}
4. Navigate to **Rules** from the left hand navigation panel.



   ::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/l1lX7NoEMwUeyYbozyBxv_image.png" size="50" width="200" height="488" position="center" showCaption="false"}
5. Click on the **Page View** rule to edit.



   ::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/P1gV_8rsPw_QY9lEgvjM0_image.png" size="74" width="1259" height="306" position="center" showCaption="false"}
6. Scroll the middle panel down to the **Personalization** section and manually enter a **surface variable**. Click [here](https://tvdocs.adobe.com/lab612-2025/channel-surface-variables) for your surface details. Click **Keep Changes**.



   ::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/mCV_4HNAJxp0pCenVRoLJ_image.png" size="74" width="1416" height="400" position="center" showCaption="false"}
7. Select the **Main** library from the picklist and then click **Save to Library** to save your work.



   ::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/Jyf31XdiLdbmAn89h3Sxc_image.png" size="50" width="518" height="121" position="center" showCaption="false"}
8. Click **Cancel** at the top of the screen to back out into the **Tag Properties** view.
9. Click the **Display Offer (Offer Decisioning)** rule.



   ::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/BNGZ20HSZ6HDvPH-gAi4g_image.png" size="74" width="1592" height="336" position="center" showCaption="false"}
10. Click on the **Display the offer on the page** action at the bottom of the panel.



    ::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/cm78X1DQcuP_rLgc7Wqql_image.png" size="50" width="618" height="601" position="center" showCaption="false"}
11. Confirm the **JavaScript radio button** is selected and click the **\</> Open Editor** button to replace the JavaScript script.



    ::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/AZfW0Q5PD5cWQ_4TVL5AO_image.png" size="74" width="1413" height="344" position="center" showCaption="false"}
12. Copy and paste the JS script and click **Save**. *The script can be copied from the code drawer on the right of this screen.*


    ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/beRw2lT1OQP2XhKKO55JA_image.png)
13. Click **Save**.
14. Click **Keep Changes**.
15. Select **Main** from the library picklist and click **Save to Library**.



    ::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/6siTkh-5K3qbkK6Kmz8mt_image.png" size="52" width="518" height="121" position="center" showCaption="false"}
16. Click **Build** to push the updates to your web property.



    ::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/WVBkmxc7Qy_9rYtp2DCB8_image.png" size="50" width="518" height="121" position="center" showCaption="false"}

::::CodeDrawer{title="Render Experience Decision" isResponseExpanded="false"}
:::CodeblockTabsExamples
```javascript
console.log("PROPOSITIONS:", event.propositions);

//Our Target Object HTML Elements
const image = document.querySelector("#SpectrumProvider > div.App > div > div.Page.home > main > div.Container.home-featured-services > div > section:nth-child(2) > div.Card.Card--alignment-left.Card--variant-horizontalRight.Card--hasLink > div.Card__image > div > img");
const description = document.querySelector("#SpectrumProvider > div.App > div > div.Page.home > main > div.Container.home-featured-services > div > section:nth-child(2) > div.Card.Card--alignment-left.Card--variant-horizontalRight.Card--hasLink > div.Card__content > div > div.Title.Title--alignment-left.Title--textAlignment-left > div > div > div > p");
const title = document.querySelector("#SpectrumProvider > div.App > div > div.Page.home > main > div.Container.home-featured-services > div > section:nth-child(2) > div.Card.Card--alignment-left.Card--variant-horizontalRight.Card--hasLink > div.Card__content > div > div.Title.Title--alignment-left.Title--textAlignment-left > div > h2");

//Only Add Content if there is a proposition
if(event.propositions){
  //Parse thru the propositions to get the content from ExD
  const content = event.propositions[0].items[0].data.content[0];
  const offerImageDesc = content.offerImageDesc;
  const offerImageUrl = content.offerImageUrl;
  const offerText = content.offerText;
  const offerTitle = content.offerTitle;
  //Replace our Target HTML Elements' properties with personalized content 
  image.src = offerImageUrl;
  description.textContent = offerText;
  title.textContent = offerTitle;
}
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::