How to get the JSON response using Einstein in Web Recommendations?

Question

According to this article, web recommendations can be delivered via JSON response or HTML/JS. It mentions that the JSON response is the best method. However, there is no documentation for getting it. The only documentation they have covers the HTML/JS method.

Now I am able to see the JSON object when I view the URL in the browser (details removed for security purposes): https://{MID}.recs.igodigital.com/a/v2/{MID}>/category/recommend.json?category={CATEGORY}&item={CONTENT_ID}

but using it in JavaScript like this yields this CORS policy error, preventing me from getting anything:

JavaScript snippet

<script>
    $.getJSON("https://{MID}.recs.igodigital.com/a/v2/{MID}>/category/recommend.json?category={CATEGORY}&item={CONTENT_ID}",
        function(response, status, xhr) {
            //Do something with response
        }).error(function(xhr, status, errorThrown) {
            //Do something with error, I always end up here with the CORS error
        });
</script>

Error

Access to XMLHttpRequest at 'https://{MID}.recs.igodigital.com/a/v2/{MID}>/category/recommend.json?category={CATEGORY}&item={CONTENT_ID}' from origin {SITE_URL} has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Obviously I cannot adjust the server settings for igodigital to modify the JSON file's headers to allow my site access since that's managed by Salesforce.

I attempted to whitelist my site's domain using these instructions, but I can't get past step 1 because it's only available in Salesforce Classic and Lightning Experience, not Marketing Cloud.

I did find a "whitelist" section in my settings where I added my domain and checked the box to activate them, but it didn't do anything.

If this isn't the way to get the JSON response, what is??

Answer 1

You should make use of callback parameter in the call to recommend.json - you can easily append it if you have existing parameters in your querystring:

https://{MID}.recs.igodigital.com/a/v2/{MID}>/category/recommend.json?category={CATEGORY}&item={CONTENT_ID}&callback=foobar

This will wrap the response in a function call with the name passed in the URL:

E.g.:

foobar([{"name":"igdrec_1","title":"Most Viewed Items","priority":1,"items":[{},{},{}]}]);

vs (without callback param):

[{"name":"igdrec_1","title":"Most Viewed Items","priority":1,"items":[{},{},{}]}]

There is a number of good resources out there, describing how to use JSONP and callback to overcome CORS challenges, a.o.: https://stackoverflow.com/questions/43521856/cross-domain-javascript-calls-using-jsonp-or-cors or: https://www.getfilecloud.com/blog/using-jsonp-for-cross-domain-requests/