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 .
In this integration document, you will find:
SDK Function for API Endpoint: Learn how to utilize the Antsomi SDK to access the API endpoint and retrieve the JSON object.
JSON Result: The schema of the JSON object retrieved from the endpoint.
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
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
Attribute
Data Type
Description
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:
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:
