API Guide Developer Guide

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.

Looking for how to use the CDP365 Media JSON features? Head over to this document.

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!

This tutorial assumes that you've integrated the Antsomi SDK main script into your website source code.

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

<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>

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

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"]

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

AttributeData TypeDescription

status

boolean

webContents

Object

webContents.contents

Object

Your Media JSON template object

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

{
    "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:

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:

PreviousMedia TemplateNextSample E-Commerce Events

Last updated