How do I add structured data using JSON-LD on dynamic pages that need to wait for content to load?
http://jsfiddle.net/c725wcn9/2/embedded
You will need to inspect the DOM to check this works. Jquery is needed.
$(document).ready(function(){ var el = document.createElement('script'); el.type = 'application/ld+json'; el.text = JSON.stringify({ "@context": "http://schema.org", "@type": "Recipe", "name": "My recipe name" }); document.querySelector('head').appendChild(el);});Your code included the variable name script but appended the variable el to the <head> instead. Also removed are the new line characters from the JSON string which was checked with JSON-LD playground .
i think Mousey perfectly answered this, i am going to share similar scenario where we load flight details on page but for price we call an API when page load, so we have to load schema dynamically when we get price.
We created a nested function which we call on page load and pass flight details then on page load when we call "priceGraber" API (to get flight price), Once priceGraber return successful response then we inject schema on page.
Schema Creator Function:
// create product schemacreateProductSchema = function(from, to, currency) { return injectSchema = function(price) { let el = document.createElement('script'); el.type = 'application/ld+json'; el.text = JSON.stringify({ "@context": "https://schema.org/", "@type": "Product", "name": `Flight from ${from} to ${to}`, "description": `Cheap flights from ${from} to ${to}`, "offers": { "@type": "Offer", "url": `http://flightsearches.net?fso=${from}&fsd=${to}`, "priceCurrency": `${currency}`, "availability": "https://schema.org/InStock", "price": `${price}`, } }); console.log('inject now '); document.querySelector('head').appendChild(el); };};On Page Load Pass Information for schema which is available on page load
below script is inside blade file, {{ $flight_from }}, {{ $flight_to }} are blade directive (server side variables)
<script> $(function(){ if(typeof createProductSchema == "function") { console.log('create product schema...'); window.injectProductSchema = createProductSchema({{ $flight_from }}, {{ $flight_to }}); } else { console.error("product schema creator doesn't exists !"); } }); </script>Dynamically Injecting Schema
we call below function inside ajax response where we get "price" form API and then this function call nested function which then append schema into head
window.injectProductSchema(price);