Warm tip: This article is reproduced from serverfault.com, please click

其他-使用Javascript的Google Tag Manager中的Shopify产品变体

(其他 - Shopify Product Variants in Google Tag Manager Using Javascript)

发布于 2020-11-29 08:38:26

我正在使用Google跟踪代码管理器数据层将结构化数据添加到Shopify商店。我没有足够的空间来添加所有产品,因此我想合并我的标签。我可以在数据层中获得所需的所有变量,我只需要知道如何针对结构化数据中的“报价”部分对其进行迭代。

我真的只需要知道如何将其转换为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是每个数组的数组,当我发布此标签时,它在一个元素中显示所有数组,因此与其遍历所有Variants,而在每个“ URL”中显示所有数组。

在此处输入图片说明

希望有帮助!

更新

我几乎拥有它,但是我遇到了两个问题。这是我的新代码:

<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>

这两个问题是:

  1. 问题1:DataLayer变量从Shopify的整个数组中引出双引号,因此它认为所有Variant URL和All Price均为1。我不知道如何删除双引号。
  2. 问题2:我手动添加了产品变体URL,以查看它是否可以正常工作。确实...有点。在第一次迭代中,它添加了第一个URL。但是在第二个上,它在每个对应的迭代中添加第一个URL第二个URL,并继续在行中添加下一个URL。我只需要它为每个迭代添加1个URL。

更新2

Google跟踪代码管理器变量{{TitanProductVariants}}和{{TitanProductPrice}}从数组的数据层中提取数据。因此,{{TitanProductVariants}}会获取带有附加变体ID的网址列表(例如https://titancasket.com/products/titan-atlas-xl-silver-metal-oversize-casket?variant=35312157720744)和{ {TitanProductPrice}}提取每个变体的每个价格。

我需要遍历这些变量中的每一个,以便如果有10个Variants,则在Schema中将有10个“ Offer”元素,每个元素都具有Variant 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"
    }

...等等,每个变体网址。

更新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>
Questioner
Kenny King
Viewed
0
HymnZzy 2020-12-02 12:58:16

直接从液体中循环变体。

{% 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]
  });
}