# Media JSON

Our Antsomi SDK includes a powerful feature known as "Media JSON" to provide developers with a JSON object via a dedicated API endpoint. This feature empowers developers to access valuable data and display it in any manner they desire on their integrated websites.

{% hint style="warning" %}
Looking for how to use the CDP365 Media JSON features? Head over to this [document](https://docs.antsomi.com/cdp-365-user-guide-en/marketing-hub/media-json).
{% endhint %}

In this integration document, you will find:

1. **SDK Function for API Endpoint**: Learn how to utilize the Antsomi SDK to access the API endpoint and retrieve the JSON object.
2. **JSON Result**: The schema of the JSON object retrieved from the endpoint.
3. **Sample Webpage Source Code**: We provide a sample webpage source code that demonstrates the integration of the SDK. You can use this code as a reference to implement Media JSON seamlessly on your website.

With this guide, you can harness the full potential of the Antsomi SDK's Media JSON feature and enhance your website with dynamic, data-driven content as per your specific requirements.

Let's get started!

{% hint style="warning" %}
This tutorial assumes that you've integrated the Antsomi SDK main script into your website source code.
{% endhint %}

### 1. **SDK Function for API Endpoint**

The API endpoint to get the delivered JSON can be obtained using the Antsomi SDK `web_media_template.buildUrlMediaJson()` method.

For example, a JSON delivered through the event Search Product can be obtained by following

{% code fullWidth="false" %}

```html
<script>
    var ea = "product_search"; // Event Action
    var ec = "browsing"; // Event Category
    
    var zone_codes = ["div_asm_qct_test_json_1"]; // Ad Zone Codes list
    
    // Include the Main Object (items) similar to the event data
    var items = [
        {
            type: "product",
            id: "12345",
            sku: "12345",
            name: "The Product Title 1",
            original_price: 10000,
            price: 10000,
            page_url: "https://website.com/p.html",
            image_url: "https://website.com/p.png"
         },
        {   
            type: "product",
            id: "12345",
            sku: "12345",
            name: "The Product Title 1",
            original_price: 10000,
            price: 10000,
            page_url: "https://website.com/p.html",
            image_url: "https://website.com/p.png"
        }
    ];
    
    // Include the Event Attributes (extra) similar to the event data
    var extra = {
        src_search_term: "Alibaba",
        number_results: 10
    };
    

  var mediaJsonURL = web_media_template.buildUrlMediaJson(ec, ea, zone_codes, {
      items: items, 
      extra: extra
  });
</script>
```

{% endcode %}

Your `mediaJsonURL` in the code above will be similar to the URL below

{% code fullWidth="false" %}

```url
https://delivery-cloud.cdp.asia/interaction/app?portal_id=564890637&prop_id=564993250&uid=1134766472&ec=pageview&ea=view&items=[]&dims={}&extra={"au_id":"1260184398","home":0,"t1":"1698123169679","t2":1698123178135,"time_diff":8456,"page_cate":"demo-jn/media-json","pv_id":"","session_id":0,"prop_id":"564993250","visitor_type":"returning","is_webview":false,"location_url":"https://retail.antsomi.com/demo-jn/media-json.html","referrer_url":"https://retail.antsomi.com/demo-jn.html","click_bc":"1134766472b1698122588","atm_source":"antsomi","atm_type":"on_session","page_title":""}&format=json&jrequest_zones=["div_asm_pining_zone"]
```

{% endcode %}

### **2. JSON Result**

When you make a request to the URL returned from the `buildUrlMediaJson()` function, you will receive a JSON object, and its attributes are described below

<table><thead><tr><th width="244.33333333333331">Attribute</th><th width="139">Data Type</th><th>Description</th></tr></thead><tbody><tr><td>status</td><td>boolean</td><td></td></tr><tr><td>webContents</td><td>Object</td><td></td></tr><tr><td>webContents.contents</td><td>Object</td><td>Your Media JSON template object</td></tr></tbody></table>

For example, if you have your Media JSON setting like this, you will receive the JSON as below:

<figure><img src="/files/s3tnYZyYqghJ0J7rSW8H" alt=""><figcaption><p>Sample Media JSON setup in CDP365</p></figcaption></figure>

```json
{
    "status": true,
    "webContents": {
        "isSuccess": true,
        "isError": false,
        "isRetry": false,
        "errorMessages": [],
        "contents": {
            "dynamicContent": [
                {
                    "image_url": "https://retail.antsomi.com/media/catalog/product/w/s/wsh12-green_main_1.jpg",
                    "name": "Erika Running Short",
                    "price": "45",
                    "page_url": "https://a.cdp.asia/event?portal_id=564890637&prop_id=564993251&uid=1134766472&aid=1134766472&cid=&ea=click&en=click_tracking&ec=advertising&items=%5B%7B%22type%22%3A%22product%22%2C%22id%22%3A%22WSH12-28-Green%22%7D%5D&dims=%7B%22campaign%22%3A%7B%22id%22%3A%228544672%22%7D%2C%22story%22%3A%7B%22id%22%3A%228544671%22%7D%2C%22variant%22%3A%7B%22id%22%3A%228544673%22%7D%2C%22ad_zone%22%3A%7B%7D%2C%22destination%22%3A%7B%22id%22%3A%227568546%22%7D%2C%22channel%22%3A%7B%22id%22%3A%222%22%7D%7D&is_debug=1&extra=%7B%22target_segment_ids%22%3A%5B%5D%7D&delivery_src=antsomi&is_server=false&request_id=3a9108d6-0449-45c2-b84d-19b6ef1d9c53&resp_type=redirect&redirect_url=https%3A%2F%2Fretail.antsomi.com%2Ferika-running-short.html%3Futm_source%3Dantsomi"
                },
                {
                    "image_url": "https://retail.antsomi.com/media/catalog/product/w/s/wsh09-gray_main_1.jpg",
                    "name": "Mimi All-Purpose Short",
                    "price": "44",
                    "page_url": "https://a.cdp.asia/event?portal_id=564890637&prop_id=564993251&uid=1134766472&aid=1134766472&cid=&ea=click&en=click_tracking&ec=advertising&items=%5B%7B%22type%22%3A%22product%22%2C%22id%22%3A%22WSH09-28-Gray%22%7D%5D&dims=%7B%22campaign%22%3A%7B%22id%22%3A%228544672%22%7D%2C%22story%22%3A%7B%22id%22%3A%228544671%22%7D%2C%22variant%22%3A%7B%22id%22%3A%228544673%22%7D%2C%22ad_zone%22%3A%7B%7D%2C%22destination%22%3A%7B%22id%22%3A%227568546%22%7D%2C%22channel%22%3A%7B%22id%22%3A%222%22%7D%7D&is_debug=1&extra=%7B%22target_segment_ids%22%3A%5B%5D%7D&delivery_src=antsomi&is_server=false&request_id=19aad1fb-4093-4ff6-b6c3-0d831d3a68a5&resp_type=redirect&redirect_url=https%3A%2F%2Fretail.antsomi.com%2Fmimi-all-purpose-short.html%3Futm_source%3Dantsomi"
                }
            ],
            "globalTracking": {
                "view": "https://a.cdp.asia/event?portal_id=564890637&prop_id=123&uid=1134766472&aid=1134766472&cid=&ea=viewable&en=viewable_tracking&ec=advertising&items=%5B%5D&dims=%7B%22campaign%22%3A%7B%22id%22%3A%228544672%22%7D%2C%22story%22%3A%7B%22id%22%3A%228544671%22%7D%2C%22variant%22%3A%7B%22id%22%3A%228544673%22%7D%2C%22ad_zone%22%3A%7B%7D%2C%22destination%22%3A%7B%22id%22%3A%227568546%22%7D%2C%22channel%22%3A%7B%22id%22%3A%222%22%7D%7D&is_debug=1&extra=%7B%22target_segment_ids%22%3A%5B%5D%7D&delivery_src=antsomi&is_server=false&request_id=b814df95-4102-44e0-8006-70e9ca33964c&resp_type=json",
                "impression": "https://a.cdp.asia/event?portal_id=564890637&prop_id=123&uid=1134766472&aid=1134766472&cid=&ea=impression&en=impression_tracking&ec=advertising&items=%5B%5D&dims=%7B%22campaign%22%3A%7B%22id%22%3A%228544672%22%7D%2C%22story%22%3A%7B%22id%22%3A%228544671%22%7D%2C%22variant%22%3A%7B%22id%22%3A%228544673%22%7D%2C%22ad_zone%22%3A%7B%7D%2C%22destination%22%3A%7B%22id%22%3A%227568546%22%7D%2C%22channel%22%3A%7B%22id%22%3A%222%22%7D%7D&is_debug=1&extra=%7B%22target_segment_ids%22%3A%5B%5D%7D&delivery_src=antsomi&is_server=false&request_id=6e1ba253-0207-4d98-96b5-f1998a577901&resp_type=json",
                "atmTrackingParameters": "utm_source=antsomi"
            }
        }
    },
    "serverIP": "cloud",
    "serverName": "cloud",
    "responseTime": "518 ms"
}
```

### **3. Sample Web Page Source Code**

Your final source code to build, retrieve, and show the JSON data from the CDP356 journey using Media JSON destination will be similar to this code snippet:

```javascript
var url = web_media_template.buildUrlMediaJson(
    "pageview",  // Event Category
    "view", // Event Action
    ["div_asm_pining_zone"],  // Zone Codes
    { // Event Data
        items: [],
        dims: {},
        extra: {}
    });

if (url) {
    fetch(url)
        .then((response) => response.json())
        .then((json) => {
            var json_data = json.webContents.contents.dynamicContent;
  
            for (let i = 0; i < json_data.length; i++) {
                const item = json_data[i];

                // item product => YOUR_CODE_HERE
            }
        });
}
```

For a sample Media JSON endpoint URL build, you can refer to one of the links below:

* [E-Commerce Events](/developers-guide/antsomi-service-integrations/media-json/sample-e-commerce-events.md)
* [User Events](/developers-guide/antsomi-service-integrations/media-json/sample-user-events.md)
* [Opt-in Events](/developers-guide/antsomi-service-integrations/media-json/sample-opt-in-events.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.antsomi.com/developers-guide/antsomi-service-integrations/media-json.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.