在 GTM 中使用 JS foreach 循环 JSON-ld 模式

Question

我正在 Google 跟踪代码管理器中使用 JSON-ld 为餐厅页面设置架构。菜单部分会定期更新，因此希望使用数据层变量或 javascript 变量使用动态变量在模式中循环浏览此部分。

<script type="application/ld+json">
(function(){


    var data = {
      "@context":"http://schema.org",
      "@type":"Restaurant",
      "url":"https://www.example.com/",
      "name":"Example",
      "hasMenu":{
         "@type":"Menu",
         "name":"Menu",
         "description":{{Menu Description}},
         "hasMenuSection":[{                                 //loop through from here
               "@type":"MenuSection",
               "name":{{Menu Section Name}},
               "description":{{Menu Section Description}},
               "image":{{Menu Section Image}},
         }]
      }
   }}
    var script = document.createElement('script');
    script.type = 'application/ld+json';
    script.innerHTML = JSON.stringify( data );
    document.getElementsByTagName('head')[0].appendChild(script);
})(document);
</script>

我的变量是自定义 JS，但是，这似乎也没有选择正确的元素。 例如 {{Menu Section Name}}

function () {return  document.querySelectorAll('#menu-section-name');}

我在看这个问题How to use Google Tag Manager with Multiple Schema Product reviews using JSON-LD and Variables 但是答案并没有完全实现。 这里还有一个选项可以查看循环遍历 json 数据 https://nystudio107.com/blog/annotated-json-ld-structured-data-examples，但这是在 twig 中，不考虑 GTM 中的实现。

Answer 1

可能是这样的：

         "hasMenuSection":
            [...document.querySelectorAll('#menu-section-name')]
              .map( section => {
                "@type": "MenuSection",
                "name": section.querySelectorAll('.section-name').textContent,
                "description": section.querySelectorAll('.section-description').textContent,
                "image": section.querySelectorAll('.section-image').src,
              })