How to create a data-element based on JSON-ld data layer?

[KeeMac]

Hello all, 

We are currently using JSON-LD Schema on one of our sites and I am looking to create a data element and not sure how to do the data mapping. I usually use the w3c standard but for this client they have Json-LD Schema implemented on the site.

For mapping i am use to using this format digitalData.page.pageinfo but not sure how to use the script objects in Json-ld.

e.g based on the below example how do i create a data element for @type: product or "sku" or event offers[array]

i am using var jsonld = JSON.parse(document.querySelector('script[type="application/ld+json"]').innerText); to display the script on the console (for testing purposes)

document.getElementsByTagName('script') also returns script object on the console but using document.getElementsByTagName('script').getAttribute('type'); or   document.querySelector(jsonld["@type"]); returns null. so I need help in capturing these object in a data element.. i need something similar to  digitalData.page.pageinfo.attribute to capture an element.

<script type="application/ld+json">{"@context": "http://schema.org","@type": "Product","sku": "305FS-UJNA5","offers": [{"@type": "Offer","price": "99.00","availability": "InStock","priceCurrency": "USD"}]}</script>

[Amit_Kumar]

Hi KeeMac,

It's quite simple actually, follow the following steps and it will work for you.

1. Add one id element to the JSON-LD to make it easy i.e  id="datatestId1"

<script id="datatestId1" type="application/ld+json"> { "@context": "http://schema.org", "@type": "Product", "sku": "305FS-UJNA5", "offers": [{ "@type": "Offer", "price": "99.00", "availability": "InStock", "priceCurrency": "USD" }] } </script>

var data = $("#datatestId1").html(); // parse the contents as a JSON object var json = JSON.parse(data); // get the value of offers and type from JSON object console.log(json["offers"][0]["@type"]);

Hope this helps,

Regards,

Amit

[KeeMac]

Thank Amit

[KeeMac]

Thanks Armit

[justinmscott]

I'm actually hoping to do something similar to inject Google friendly structured data into pages. It looks like your response had multiple steps but I only see Step 1. Am I missing something?

[Amit_Kumar]

Justin,

script were step 2 and 3 .

where do you want to inject the Structured data? This question is about reading data from structured data into analytics tracking.

Regards,

Amit

[justinmscott]

Ahh, thanks. I'm actually trying to go the other direction.

What I was hoping to do was use Adobe DTM to populate Schema.org structured data on select pages of an AEM site. This would be a temporary solution while we work through properly implementing Schema.org structured in AEM.

Below is an example of the JSON-LD markup generated by Google Structured Data Markup Helper that I'd like to load:

<script type="application/ld+json">

{

  "@context" : "http://schema.org",

  "@type" : "Article",

  "name" : "Title of Article Page",

  "image" : "/images/articles/article-name-hero.jpg",

  "author" : {

             "@type" : "Person",

           "name" : "Author Name"

    },

    "datePublished" : "2017-01-02",

    "articleSection" : "Section title",

    "articleBody" : "Article description lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet erat sed leo eleifend lobortis. Quisque et quam id nisl imperdiet sodales metus.",

    "url" : "http://www.site.com/article.html"

    "publisher" :

    {

    "@type" : "Organization",

    "name" : "Organization Name" }

}

</script>

[kartiks50957903]

Justin,

I am trying to do the same thing. Basically, inject schema.org structured data on selected pages in AEM through DTM. Just wanted to check if this approach worked for you and if you could share some details on it.

Thanks,

Kartik