> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aiderx.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Web Integration Tutorial
> An optional exercise using a shared HTML template to display a banner, send clicks, and verify impression and click metrics.
This **optional exercise** displays the banner created in [Ad Serving Quickstart](https://docs.aiderx.io/development/en/quick-start.md) on a web page. Enter your A2 server URL and AdUnit ID in the HTML template, load the ad, send a click, then verify metrics in Ad Manager.
## 1. Prepare the example template
Use the same environment and AdUnit ID that returned an HTTP `200` ad response in the Quickstart. Prepare a web browser and Python 3. Ad requests and click delivery do not require an access token.
Create a folder for the example file.
```bash theme={null}
mkdir -p ~/a2-banner-example
cd ~/a2-banner-example
```
Copy the complete HTML below and save it as **plain text** at `~/a2-banner-example/banner-ad.html` using your text editor.
> [accordion] View and copy the HTML template
>
> ```html banner-ad.html theme={null}
>
>
>
>
>
> A2 Banner Example
>
>
>
>
> A2 Banner Example
> Enter your A2 server URL and AdUnit ID to display a 300×250 banner.
>
> Use On Ad Response tracking. Each successful ad response records an impression. Click the banner once to send a click event.
>
> Ad request: waiting
> Rendering: waiting
> Click delivery: waiting
>
>
> Verify collected impressions and clicks in Ad Manager's AdUnit Analytics.
>
> Response JSON
> No response yet.
>
>
>
>
>
> ```
Run the following from the `~/a2-banner-example` folder containing the file. Port `9000` avoids a conflict with the A2 server.
```bash theme={null}
python3 -m http.server 9000 --bind 127.0.0.1
```
Open [http://localhost:9000/banner-ad.html](http://localhost:9000/banner-ad.html).
## 2. Request and display the ad
Fill in the template's fields and select **Load ad** once. You do not need to edit the HTML source.
| Field | Value |
| - | - |
| A2 server URL | Enter the API base URL used for `` in the Quickstart. |
| AdUnit ID | The ID of `Quickstart banner`. Do not use its code or a line item ID. |
Confirm `Ad request: HTTP 200`, `Rendering: complete`, and the A2 banner. Expand **Response JSON** to inspect the complete response for this request.
This page requests a new ad. It stores the `ext.ad_log` from **the ad response displayed on the page** and sends it automatically when the banner is clicked. For HTTP `204`, follow the [Ad Serving Quickstart checklist](https://docs.aiderx.io/development/en/quick-start.md#if-no-ad-is-returned).
> [!NOTE]
>
> This example uses the **On Ad Response** impression tracking configured in the Quickstart. Receiving a banner response records one more impression. Do not send an additional `imp` event.
## 3. Send the click event
Click the displayed banner **once**. Confirm that `example.com` opens in a new tab and the exercise page shows `Click delivery: HTTP 200 — check metrics`.
The shared template after entering the server URL and AdUnit ID and verifying banner rendering and click delivery.
The example's click handler sends this body to `POST /dmp/v0/log` with that ad's `ad_log`. The page has already sent it; do not send it again from the terminal.
```json Body sent on click theme={null}
{
"type": "ad_log",
"action": "clk",
"ad_log": ""
}
```
See [Ad Event Tracking](https://docs.aiderx.io/development/en/ad-events-and-logs.md) for sending clicks from your service. HTTP `200` does not guarantee collection or aggregation, so continue through the metrics check.
## 4. Verify recorded impressions and clicks
**1. Open AdUnit Analytics**
In Ad Manager, go to **Analytics > Inventory Analytics > AdUnit Analytics**.
**2. Select the exercise AdUnit and period**
Search using the copied AdUnit ID to find `Quickstart banner`. Include the exercise date in the query period. Align dates to `Asia/Seoul` when comparing with the console.
**3. Compare with expected counts**
Compare impressions and clicks with the table below. Aggregation can be delayed, so reload the page later. Do not request another ad or resend clicks merely to check metrics.
The Basic Analysis view of an ad unit in AdUnit Analytics. Check the date range and impression and click counts. Values shown are examples.
If the new AdUnit received only this exercise's requests, expect the following counts.
| Action | Impressions | Clicks |
| - | - | - |
| Receive one banner response in the terminal. | `+1`. | No increase. |
| Receive one banner response on the web page. | `+1`. | No increase. |
| Click the page's banner once. | No increase. | `+1`. |
| Total | Confirm `2`. | Confirm `1`. |
If you made extra requests or reloaded the page and loaded another ad, add each successful banner response to the expected impression count. If other traffic reached the AdUnit, compare all request records for the same AdUnit and period.
### Completion criteria
* The banner response contains an image, landing URL, and `ext.ad_log`.
* The page displays the banner, and clicking opens the landing page.
* You have checked the click request and HTTP response.
* **You have verified actual impression and click aggregates in AdUnit Analytics.**
Aggregation timing can vary with the A2 environment's configuration. After the interval provided by your deployment contact has passed, reload the analytics page. If you do not know the expected interval, ask your contact; do not repeat ad requests or clicks just to check metrics.
If the expected aggregates still do not appear after querying the same AdUnit, date, and timezone again, the exercise is incomplete. Prepare request times and timezone, AdUnit ID, responses, click delivery records, and query scope, then follow the support procedure in [Verification and Troubleshooting](https://docs.aiderx.io/development/en/integration-verification-and-troubleshooting.md). Individual event collection status cannot currently be queried.
## Troubleshooting
> [accordion] Requests succeed in the terminal but fail in the browser
>
> Check the server URL, then inspect HTTPS, CORS, and preflight errors in the browser's Network and Console tabs. The API must allow requests from `http://localhost:9000`; duplicate `Access-Control-Allow-Origin` headers cause the browser to block the response.
> [accordion] The banner image does not appear
>
> Check image URL accessibility and blocked image requests. An impression may already be recorded when the ad response is generated.
> [accordion] Click counts do not increase
>
> Check click delivery results, the query period, and AdUnit ID. Network errors or timeouts do not prove processing failure; do not retry unconditionally.
> [accordion] Impressions or clicks exceed expectations
>
> Check repeated requests, loading another ad after a reload, multiple clicks, or other traffic.
## Next steps
See [Ad Event Tracking](https://docs.aiderx.io/development/en/ad-events-and-logs.md) to record impressions, clicks, and conversions in your service.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.