Google 标签管理器中的 Shopify 产品变体使用 Javascript

Question

我正在使用 Google 标签管理器数据层将结构化数据添加到 Shopify 商店。我运行添加了所有产品 space，所以我正在尝试合并我的标签。我可以在数据层中获取我需要的所有变量，我只需要知道如何为结构化数据中的优惠部分迭代它们。

我真的只需要知道如何将其转换为 Javascript 以便在 Google 标签管理器中使用：

"offers": [
    {%- for variant in product.variants -%}
      {
        "@type" : "Offer",
        {%- if variant.sku != blank -%}
          "sku": {{ variant.sku | json }},
        {%- endif -%}
        "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
        "priceValidUntil" : {{'now' | date: '%Y-%m-%d' | json }},
        "price" : {{ variant.price | divided_by: 100.00 | json }},
        "priceCurrency" : {{ cart.currency.iso_code | json }},
        "url" : {{ shop.url | append: variant.url | json }}
      }{% unless forloop.last %},{% endunless %}
    {%- endfor -%}
  ]

我正在尝试遍历通过 Google 跟踪代码管理器添加的结构化数据报价。这就是我现在拥有的：

<script>
(function()
{
var data = {
  "@context": "http://schema.org/",
  "@type": "Product",
  "@id": "{{TitanProductURL}}",
  "name": "{{TitanProductTitle}}",
  "url": "{{TitanProductURL}}",
  "image": [ "{{TitanProductImage}}"
    ],
  "description": "{{TitanProductDescription}}",
  "sku": "{{TitanSKU}}",
  "gtin12": "{{TitanBarcode}}",
  "brand": {
    "@type": "Thing",
    "name": "Titan Casket"
  },
  "offers": [],
"aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "{{TitanReviewRating}}",
    "bestRating": "5 star",
    "worstRating": "1 star",
    "ratingCount": "{{TitanReviewCount}}"
  }
}

  var productVariants = [{{TitanProductVariants}}];
  var productPrice = [{{TitanProductPrice}}];
  var i;
  for (i = 0; i < productVariants.length; i++) {
    data.offers.push({
        "@type" : "Offer",
        "sku": "{{TitanSKU}}",
        "availability" : "http://schema.org/InStock",
        "priceValidUntil" : "{{TitanDate}}",
        "price" : productPrice[i],
        "priceCurrency" : "USD",
        "url" : productVariants[i]
    });
  }
  
  var script = document.createElement('script');
  script.type = "application/ld+json";
  script.innerHTML = JSON.stringify(data);
  document.getElementsByTagName('head')[0].appendChild(script);
  })(document);
</script>

TitanProductVariants 和 TitanProductPrice 是每个的数组，当我发布这个标签时，它在一个元素中显示所有数组，因此它不是遍历所有变体，而是在每个“url".

希望得到任何帮助！

更新

我几乎搞定了，但我运行遇到了 2 个问题。这是我的新代码：

<script>
(function()
{
var data = {
    "@context": "http://schema.org/",
    "@type": "Product",
    "@id": "{{TitanProductURL}}",
    "name": "{{TitanProductTitle}}",
    "url": "{{TitanProductURL}}",
    "image": [ "{{TitanProductImage}}"
      ],
    "description": "{{TitanProductDescription}}",
    "sku": "{{TitanSKU}}",
    "gtin12": "{{TitanBarcode}}",
    "brand": {
      "@type": "Thing",
      "name": "Titan Casket"
    },
    "offers": [],
  "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "{{TitanReviewRating}}",
      "bestRating": "5 star",
      "worstRating": "1 star",
      "ratingCount": "{{TitanReviewCount}}"
    }
  }

  var variants = [{{TitanProductVariants}}];
  var prices = [{{TitanProductPrice}}];
  var len = variants.length;
  var text = "";
  for (i = 0; i < len; i++)
  {
  data.offers.push({
      "@type" : "Offer",
      "availability" : "http://schema.org/InStock",
      "priceValidUntil" : "{{TitanDate}}",
      "price" : text += prices[i]
      "priceCurrency" : "USD",
      "url" : text += variants[i]
    });
  }

  var script = document.createElement('script');
  script.type = "application/ld+json";
  script.innerHTML = JSON.stringify(data);
  document.getElementsByTagName('head')[0].appendChild(script);
  })(document);
</script>

2 个问题是：

问题 1：DataLayer 变量引入双引号围绕 Shopify 的整个数组，因此它认为所有 Variant URLs，所有价格均为 1 件商品。我不知道如何删除双引号。
问题 2：我手动添加了产品变体 URLs 以查看它是否会工作。它确实......有点。在第一次迭代中，它添加了首先URL。但是在第二个上，它添加了第一个 URL 和第二个 URL 并不断在每个对应的行中添加下一个 URL 迭代。我只需要它在每次迭代中添加 1 URL。

更新 2

Google 跟踪代码管理器变量 {{TitanProductVariants}} 和 {{TitanProductPrice}} 从数组中的数据层提取数据。因此，{{TitanProductVariants}} 拉入一个 URL 的列表并附加变体 ID（例如 https://titancasket.com/products/titan-atlas-xl-silver-metal-oversize-casket?variant=35312157720744），{{TitanProductPrice}} 拉入每个变体的每个价格。

我需要遍历其中的每一个，这样如果有 10 个变体，它将在 Schema 中有 10 个“Offer”元素，每个都有变体 URL 和相应的价格。输出将如下所示：

{
      "@type" : "Offer",
      "availability" : "http://schema.org/InStock",
      "priceValidUntil" : "2020-12-1",
      "price" : "1399.0",
      "priceCurrency" : "USD",
      "url" : "https://titancasket.com/products/titan-atlas-xl-silver-metal-oversize-casket?variant=35312157720744"
    },
{
      "@type" : "Offer",
      "availability" : "http://schema.org/InStock",
      "priceValidUntil" : "2020-12-1",
      "price" : "1499.0",
      "priceCurrency" : "USD",
      "url" : "https://titancasket.com/products/titan-atlas-xl-silver-metal-oversize-casket?variant=35312157720744"
    }

... 每个变体依此类推 URL.

更新 3

以下是我将数据提取到 Google 跟踪代码管理器的方式：

<script>
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
      'gtm_product_url': {{ shop.url | append: product.url | json }},
      'gtm_product_title' : {{ product.title | json }},
      'gtm_product_image' : {{ product.featured_media | img_url: media_size | prepend: "https:" | json }},
      'gtm_product_description' : "{{ product.description | strip_html | strip_newlines | replace: '"', '' }}",
      'gtm_date' : "{{'now' | date: '%Y-%m-%d' }}",
      'gtm_sku' : "{{ current_variant.sku }}",
        'gtm_barcode' : "{{ current_variant.barcode }}",
      'gtm_review_rating': "{{ shop.metafields.judgeme.shop_reviews_rating }}",
      'gtm_review_count': "{{ shop.metafields.judgeme.shop_reviews_count }}",
      'gtm_product_price': "{%- for variant in product.variants -%}{{ variant.price | divided_by: 100.00}}{% unless forloop.last %},{% endunless %}{%- endfor -%}",
      'gtm_product_variants': "{%- for variant in product.variants -%}{{ shop.url | append: variant.url }}{% unless forloop.last %},{% endunless %}{%- endfor -%}"
   });

  </script>

Answer 1

直接从液体循环变体。

{% for variant in product.variants %}
data.offers.push({
    "@type" : "Offer",
    "sku": "{{variant.sku}}",
    "availability" : "http://schema.org/InStock",
    "priceValidUntil" : "{{ 'now' | date: '%Y-%m-%d' }}",
    "price" : {{ variant.price }},
    "priceCurrency" : "USD",
    "url" : {{ shop.url | append: variant.url }}
})
{% endfor %}

如果您热衷于使用 javascript 循环，请试试这个。

var variants = {{ product.variants | json }};
for (let variants of variants){
  data.offers.push({
    "@type" : "Offer",
    "sku": variant.sku,
    "availability" : "http://schema.org/InStock",
    "priceValidUntil" : "{{ 'now' | date: '%Y-%m-%d' }}",
    "price" : variant.price,
    "priceCurrency" : "USD",
    "url" : "{{ shop.url }}"+variant.url
})

更新 #2：基于新信息

var productVariants = {{TitanProductVariants}}.split(',');
var productPrice = {{TitanProductPrice}}.split(',');
var i;
for (i = 0; i < productVariants.length; i++) {
  data.offers.push({
      "@type" : "Offer",
      "sku": "{{TitanSKU}}",
      "availability" : "http://schema.org/InStock",
      "priceValidUntil" : "{{TitanDate}}",
      "price" : productPrice[i],
      "priceCurrency" : "USD",
      "url" : productVariants[i]
  });
}

Google 标签管理器中的 Shopify 产品变体使用 Javascript

Shopify Product Variants in Google Tag Manager Using Javascript

javascript

shopify

google-tag-manager