Google Structure data using JSON LD and Google Tag manager

[sanjaykumar27]

OS info

• Operating System : Windows 10.0.17763
• Wappler Version : 2.5.0

Problem description

I am trying to implement Json Ld using google tag manager, and script for json ld is generated by gtm dynamically when my product detail page is hit in url in my ecommerce website. GTM tries to read product information from div id which i mentioned in gtm variables.
But because my product detail page is made inside the route. gtm is getting value of div id, but if i place same div id on index page or outside the route it works but not on route pages.

[George]

Could you post a code sample of what it is and what ideally it should be?

[nshkrsh]

hi @George, Sanjay is part of our team.
What we are trying to do here is create a SPA ecommerce website.
We’d like to setup google structured data for products (https://developers.google.com/search/docs/data-types/product) on this website.

now, google suggests JSON-LD as the recommended method, so we want to config this for our website.
to do this, we are leveraging google tag manager because it is seemingly better way and also takes care of analytics.

problem:
tag manager is unable to read values from the route page of the product, hence on the script code on index, the {{}} mappers are getting replaced with NULL.

objective:
to get the google structured data setup work with Wappler SPA.

maybe we’re doing something wrong here. maybe SPA are supposed to work differently.

it’d be great if the community can help us resolve this.

[ben]

I have not tried to implement the JSON-LD as yet. But in my mind, I would create the script and replace the static values for dynamic values using the same logic as here.

In this way, each time the URL changes, so will the values within the script.

Edit: This may help: https://www.youtube.com/watch?v=i8P-B5aa5E0

[nshkrsh]

thanks Ben.
about the method in your previous post - we have config that and are awaiting Google Search Console Verification to be able to see if it worked or not.

About the video - this is actually the first thing we tried, using tag manager - but since our project is SPA, this did not work. the variable values are not readable as the HTML of the SPA child page is not available on the source of the index page at run time.

we’re still looking for ways to implement Structured Data using JSON-LD on a Wappler SPA project.

any help would be appreciated.

[sanjaykumar27]

Yes i have seen the video, i have followed the same approach while defining Google Tag, created variable that are reading value from html div using id or we can also use class. But Google Tag Manager is not able to read those tags because these values inside the div are placed javascript and google tag manager cannot read javascript rendering.
And other reason is pages are created inside the routes, and these html markup are not shown in page source, and page source is the primary source for google bot to fetch the information.

[ben]

@nshkrsh and @sanjaykumar27, please try the following:

1. open https://pleysier.com.au/ in Firefox

2. ignore the aesthetics, I am no designer, nor do I want more work

3. right-click the page and choose Select All

   

4. right-click a selected area and choose View Selection Source

   

5. scroll to the meta section and view the dynamic result:

   
   This is what search bots see.

[nshkrsh]

seelct and then view selection course approach does not work with chromium.
in chromium (and even in firefox) when you do a plain view source (ctrl+U) the SPA child page content is not visible.
this is our product page which is a SPA child page for a better idea: https://devmain.jgrnaut.in/info/Cecelia-Wing-Chair-In-Grey-&-White-Arbor-Design-ZinnwalditeBrown-Sheesham-Wood-85

google structured data testing tool cannot parse this content.

[sanjaykumar27]

I have followed the same approached as mentioned in this thread

Binding server connect variable inside Javascript

Sorry, didn’t realise you were working within a script tag. an alternative could be to assign the value to a session variable within server connect as shown in the start of this thread then set it via php I.e. var sig = <?php echo $_SESSION..........?>

i am getting undefined in a Google tag manager, while if i execute same in console i get the desired result.

https://devmain.jgrnaut.in/info/Chicago-Wing-Chair-in-Orange-Colour-by-Primrose-Bubble-Wrap-Normal-Polish-BabyBlue-Pine-Wood-S-76

[nshkrsh]

any luck on this?

[sanjaykumar27]

Dymanic JSON-LD not working. This is my product page link:
https://devmain.jgrnaut.in/info/Cecelia-Wing-Chair-In-Grey-&-White-Arbor-Design-Linen-Oak-Wood-6

1. Getting value in the console.
   

   

2. This is source code:
   

   

3. Google Testing Tool showing error
   

   

4. Value are not showing in page source
   

   

Please suggest how to overcome this issue. Urgent!!