# 14.3 Create and configure a custom webhook

## 14.3.1 Create your custom webhook

Go to <https://webhook.site/>. You'll see something like this:

![demo](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-32d4c60153a04ecbadff9af9c53938031980613d%2Fwebhook1.png?alt=media)

You'll see your unique URL, which looks like this: `https://webhook.site/585126a1-41fc-4721-864b-d4aa8c268a1d`.

This website has now created this webhook for you, and you'll be able to configure this webhook in your **\[Event Forwarding property]** to start testing the forwarding of events.

## 14.3.2 Update your Event Forwarding property: Create a Data Element

Go to <https://experience.adobe.com/#/data-collection/> and go to **Event Forwarding**. Search your Event Forwarding property and click it to open it.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-85f9e8fbea4cea603f8625257d720d0869df3877%2Fprop1.png?alt=media)

In the left menu, go to **Data Elements**. Click **Create New Data Element**.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-ce55d039c2257d97d06b59fd27a0ec2a4c794018%2Fde1.png?alt=media)

You'll then see a new data element to configure.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-53489597ebc643040233f8136f32710658730350%2Fde2.png?alt=media)

Make the following selection:

* As the **Name**, enter **XDM Event**.
* As the **Extension**, select **Core**.
* As the **Data Element Type**, select **Path**.
* As the **Path**, enter **arc.event.xdm**. By entering this path, you'll be filtering out the **XDM** section from the event payload that is sent by the website or mobile app into the Adobe Edge.

You'll now have this. Click **Save**.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-c130647fa00833084dc4d2e5ef7ae04e7e9b7aa8%2Fde3.png?alt=media)

{% hint style="info" %}
In the above path, a reference is made to **arc**. **arc** stands for Adobe Resource Context and **arc** always stands for the highest available object that is available in the Server Side context. Enrichments and transformations may be added to that **arc** object using Adobe Experience Platform Data Collection Server functions.

In the above path, a reference is made to **event**. **event** stands for a unique event and Adobe Experience Platform Data Collection Server will always evaluate every event individually. Sometimes, you may see a reference to **events** in the payload sent by Web SDK Client Side, but in Adobe Experience Platform Data Collection Server, every event is evaluated individually.
{% endhint %}

## 14.3.3 Update your Adobe Experience Platform Data Collection Server property: Create a Rule

In the left menu, go to **Rules**. Click **Create New Rule**.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-b959a2bee704819daa452b34ba8f7bd572ba53f2%2Frl1.png?alt=media)

You'll then see a new rule to configure. Enter the **Name**: **All Pages**. For this exercise, you won't need to configure a condition. Instead, you'll setup an action. Click the **+ Add** button under **Actions**.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-e4831ed061b2325b89961e046e32a9a00e6b16b1%2Frl2.png?alt=media)

You'll then see this. Make the following selection:

* Select the **Extension**: **Adobe Cloud Connector**.
* Select the **Action Type**: **Make Fetch Call**.

That should give you this **Name**: **Adobe Cloud Connector - Make Fetch Call**. You should now see this:

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-331f4f708c58f92fc33e09ca9aedc905c7ad5786%2Frl4.png?alt=media)

Next, configure the following:

* Change the request method from GET to **POST**
* Enter the URL of the custom webhook you created in one of the previous steps on the <https://webhook.site/> website, which looks like this: `https://webhook.site/585126a1-41fc-4721-864b-d4aa8c268a1d`

You should now have this. Next, go to **Body**.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-16942cc41278ed19c702e9a68212e894fc9b6ac1%2Frl6.png?alt=media)

You'll then see this. Click the data element icon as indicated below.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-52bcab62994d2cd70dcd0c641179f253280579a9%2Frl7.png?alt=media)

In the popup, select the data element **XDM Event** which you created in the previous step. Click **Select**.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-5a15b0bdc67e8718c47a2a0f553e617d301644ae%2Frl8.png?alt=media)

You'll then see this. Click **Keep Changes**.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-3921c25cc65d4f768caf500ecc239b647e6b8605%2Frl9.png?alt=media)

You'll then see this. Click **Save**.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-3f97754bfa56325126683ffa84965332dd285b4a%2Frl10.png?alt=media)

You've now configured your first rule in an Event Forwarding property. Go to **Publishing Flow** to publish your changes. Open your Development library **Main** by clicking **Edit** as indicated.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-88f1eddd7d820fb94d9d51ccf6ed21e9c59246fc%2Frl11.png?alt=media)

Click the **Add All Changed Resources** button, after which you'll see your Rule and Data Element appear in this library. Next, click **Save & Build for Development**. Your changes are now being deployed.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-3af2cba3e5df50fb4a1f7b9d2f3528647bda71d2%2Frl13.png?alt=media)

After a couple of minutes, you'll see that the deployment is done and ready to be tested.

![Adobe Experience Platform Data Collection SSF](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-8df687359b21ff18671f77a703bf3a527118620d%2Frl14.png?alt=media)

## 14.3.4 Test your configuration

Go to <https://builder.adobedemo.com/projects>. After logging in with your Adobe ID, you'll see this. Click your website project to open it.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-1f113c071919d66b9bb4e4b97d5284282e997b7a%2Fweb8.png?alt=media)

You can now follow the below flow to access the website. Click **Integrations**.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-90b71802742bd7e63b57d893018aa19265b77749%2Fweb1.png?alt=media)

On the **Integrations** page, you need to select the Data Collection property that was created in exercise 0.1.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-5cf49094f77ead0a2e2ab5581e2799517999779a%2Fweb2.png?alt=media)

You'll then see your demo website open up. Select the URL and copy it to your clipboard.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-9cfc19bfac7a72c64f3e750663b79c2a4acc8723%2Fweb3.png?alt=media)

Open a new incognito browser window.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-48a8d19f45654fc4442dc4aad8b2a193b3f34d2f%2Fweb4.png?alt=media)

Paste the URL of your demo website, which you copied in the previous step. You'll then be asked to login using your Adobe ID.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-1bb88b0513b9fac2ed6224499ac33da7d3b67d43%2Fweb5.png?alt=media)

Select your account type and complete the login process.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-fbf755c12242e86c6787bb213da12d99795bd476%2Fweb6.png?alt=media)

You'll then see your website loaded in an incognito browser window. For every demonstration, you'll need to use a fresh, incognito browser window to load your demo website URL.

![DSN](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-def68e96912fd147fc6d7c9c8278935f0a00fc87%2Fweb7.png?alt=media)

When you open up your browser Developer View, you can inspect Network requests as indicated below. When you use the filter **interact**, you'll see the network requests that are sent by Adobe Experience Platform Data Collection Client to the Adobe Edge.

![Adobe Experience Platform Data Collection Setup](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-e62e5818da367ccb5cd94312ea3af9b613dc9129%2Fhook1.png?alt=media)

If you select the raw payload, go to <https://jsonformatter.org/json-pretty-print> and paste the payload. Click **Make Pretty**. You'll then see the JSON payload, the **events** object and the **xdm** object. In one of the previous steps, when you defined the Data Element, you used the reference **arc.event.xdm**, which will result in you parsing out the **xdm** object of this payload.

![Adobe Experience Platform Data Collection Setup](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-291e0b59925ce8a072eda891f4b0fedd94ecd76e%2Fhook2.png?alt=media)

Switch your view to the website <https://webhook.site/> which you used in one of the previous steps. You should now have a view similar to this one, with network requests being shown in the left menu. You're seeing the **xdm** payload that was filter out of the network request that was shown above.

![Adobe Experience Platform Data Collection Setup](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-c39b5afc03259c108dabb00e27ade17a3d9390dc%2Fhook3.png?alt=media)

Scroll down a bit in the payload to find the page name, which in this case is **vangeluw-OCUC** (which is the project name of your demo website).

![Adobe Experience Platform Data Collection Setup](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-b258421a695241a54c52a25f11a1b9e5f7a5525c%2Fhook4.png?alt=media)

If you now navigate across the website, you'll see additional network requests becoming available on this custom webhook in real-time.

![Adobe Experience Platform Data Collection Setup](https://858372621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpBC8bA57il8Sj47B7QPJ%2Fuploads%2Fgit-blob-3e2048687625b3693c24bd74c9a4c43e8ab7491b%2Fhook5.png?alt=media)

You've now configured the Server Side Forwarding of Web SDK/XDM payloads to an external custom webhook. In the next exercises, you'll configure a similar approach, and you'll be sending that same data towards Google and AWS environments.
