javascriptjsongoogle-tag-managermeta-tagsrich-snippets

Problem escaping string inside JSON-LD with Google Tag Manager


To retrieve the description string from the meta tag:

<meta name="description" content="Impara a creare dati strutturati senza l'uso di plugin">

I use the following JavaScript function:

function() {
     var metaElement = document.querySelector('meta[name="description"]');
    return metaElement ? metaElement.getAttribute('content') : '';
}

Next, I will inject the variable previously saved in a Google Tag Manager trigger into the JSON-LD structured data:

<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "description": "{{MetaDescription blogposting}}"
    }
</script>

However, when the string is injected, this problem occurs:

"description": "Impara a creare dati strutturati senza l\x27uso di plugin"

How can I solve this problem, because the data is modified for some reason by something when it is injected into the json-ltd


Solution

  • First of all, you're not supposed to inject schema markup via tag management systems. Especially, not via GTM. There are several reasons why it's a bad practice. This should be done through the normal front-end means. Doing it via a TMS is a potentially costly hack.

    Your problem is trivial, however. You just need to url decode your string before injecting it. Either correct the MetaDescription blogposting variable if it's JS, or make another one that decodes it like so:

    function(){
      return decodeURIComponent({{MetaDescription blogposting}});
    }
    

    I'm not sure if ld+json allows for interpolation (likely not), so I wouldn't risk doing it inline in GTM's custom html. And doing it in a separate <script> would look odd. Also less DOM mutations from unexpected places = better.