htmlcss-selectorsgoogle-tag-manager

Pulling URL from Product Page with Attribute Selector?


Im attempting to implement schema markup via Google Tag Manager.

For example, one piece of code that would dynamically pull in unique urls from product pages.

In plain jane terms, it would be "if class = "X" then <meta name itemprop="image" content="(URL of the image from within this specific class)>"

I've tried an Element Visibility trigger, with a Selection Method of "CSS Selector" and Element Selector = "head[prefix~="product"]"


Solution

  • Okay, a few issues with that.

    Purpose

    The idea of implementing Schema via GTM is a very popular and a very wrong one. I think usually small businesses hire SEO experts, and then give them GTM too because GTM is Google, so then when those SEOs need to deploy schema, they use the only tool available to them. That's likely the full extent of that thought process.

    GTM is not made to serve content or even meta content. A TMS (Tag Management System) is not supposed to do DOM writes besides some simple analytics libraries and pixels. Doing unexpected things via a TMS will lead to increased tech debt, confusion, maintainability issues and so on. Plus, classical schema is just a large blob of text. Well, the max size of a GTM container is capped (200 kb), so stuffing it with random large schema text objects is not the best decision.

    Method

    Using itemprops and itemscopes (otherwise known as microdata) is a somewhat obsolete method of implementing schema. You might consider JSON-LD for this purpose. It will take less space and won't require you to mutate the DOM. It's still a bad idea to serve it with GTM though.

    Solution

    The best solution would be to deply schema via JSON-LD using your site templates, or asking your web dev team to deploy them for you.

    If you still want to go with GTM, you can do that. No need in the event visibility triggers though. They are heavy. It's best to never use them.

    Instead, you use DOM ready as a trigger, then add a condition to it that checks a CJS (custom java script) variable's value.

    In the CJS you inspect the DOM and do the checks that you need to do. You check whether it's the product page and so on. Still, it's better to rely on the dataLayer than on parsting the DOM because your logic will die once front-end changes selectors and that's another reason not to deploy content with GTM.

    The tag you'd deploy would be a CHTML (Custom HTML) tag that would deploy a <script> that would update all the fields you need to update on the page. Or just deploy a JSON-LD payload, of course.