I'm using Google's Structured Data Testing Tool to validate my schema. This page is a good example: https://www.bigmazda.com/new-mazda-cx-9-longwood-fl.html .
I am using Google Tag Manager on the above site. In GTM, I created a Custom HTML tag and placed the following code:
<script>
(function(){
var schemaData = {
"@context": "http://schema.org/",
"@type": "Product",
"name": "{{schemaName}}",
"image": "{{schemaImage}}",
"description": "{{schemaDescription}}",
"brand": {
"@type": "Thing",
"name": "{{schemaBrandName}}"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "{{schemaRatingValue}}",
"reviewCount": "{{schemaReviewCount}}",
},
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "{{schemaPrice}}",
"itemCondition": "http://schema.org/NewCondition",
"availability": "http://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "{{schemaSellerName}}"
}
}
}
var script = document.createElement('script');
script.type = "application/ld+json";
script.innerHTML = JSON.stringify(schemaData);
document.getElementsByTagName('head')[0].appendChild(script);
})(document);
</script>
Also in the same Custom HTML I enabled "Support document.write".
The code above has eight GTM variables but the following four are giving me trouble:
{{schemaRatingValue}}
{{schemaReviewCount}}
{{schemaPrice}}
{{schemaName}}
NOTE : I am getting the other four variables fine and they are validating using the Structured Data Testing Tool.
For each item above, this is how I'm using the Custom JavaScript variable, in GTM, to get each value:
function(){ var schemaRatingValue = Number(document.getElementsByClassName('model-review')[0].innerText.split(" ")[1]); return schemaRatingValue; }
function(){ var review = document.getElementsByClassName('model-review')[0].innerText.split(" ")[2].replace(/[{()}]/g, ''); var schemaReviewCount = Number(review); return schemaReviewCount; }
function(){ var schemaPrice = Number(document.getElementsByClassName('mrPriceRange')[0].innerText.split(" ")[0].replace(/[$,]+/g, '')); return schemaPrice; }
function() { var schemaName = document.getElementsByTagName('h1')[0].getElementsByTagName('span')[0].innerText; return schemaName; }
When using GTM's preview mode I see the schema as expected:
However, when using the Structured Data Testing Tool, I see this:
NOTE: Using Console I validated that {{schemaRatingValue}}
, {{schemaReviewCount}}
and {{schemaPrice}}
are typeof integer. When it comes to {{schemaName}}
I'm unsure why that isn't displaying because it's a simple string.
NOTE: {{schemaPrice}}
doesn't show an error BUT it displays 0, it should display 33335, based on the Inspector screen capture.
The solution to my issues above is the method in which I traversed the DOM.
To get the values for:
{{schemaRatingValue}}
{{schemaReviewCount}}
{{schemaPrice}}
{{schemaName}}
Using XPath proved to be the answer. This code was used to setup parsing an XPath:
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
Then using this code to target specific Objects I needed from the DOM:
var schemaPriceModelXpath = getElementByXpath("//*[@id=\"cBlock1\"]/div[2]/div[2]/div/div[1]/div[1]/h4/span[1]");
To get integers I transformed the Object using this:
var schemaPriceModelXpathNumber = schemaPriceModelXpathText.replace(/[$,]+/g, '');
var schemaPriceModel = parseFloat(schemaPriceModelXpathNumberPrice);
return schemaPriceModel;
To get strings I transformed the Object using this:
var schemaNameModelXpathText = schemaNameModelXpath.textContent
return schemaNameModelXpathText;
Using the method above I was able to get values for my four variables listed above.
The final step was validating this method using Google's Structured Data Testing Tool
Here is a screen capture: Schema Validation using Google Structured Data Testing Tool
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.