时间戳

首页 > 解决方案 > Shopify 跟踪中断，total_price 始终返回“null”

shopify - Shopify 跟踪中断，total_price 始终返回“null”

问题描述

我在客户的 Shopify 商店中遇到问题，我们的 PPC 转换跟踪突然停止工作，我们不太确定原因。我们在 Checkout > Additional scripts 部分安装了标准的 Google Ads，如下所示：

<!-- Global site tag (gtag.js) - Google Ads: ***** -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-*****"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-*****');
</script>
<!-- Event snippet for Purchase conversion page -->
<script>
  gtag('event', 'conversion', {
      'send_to': 'AW-*****/*****',
      'value': {{ total_price | money_without_currency }},
      'currency': 'USD',
      'transaction_id': '{{order.order_number}}'
  });
</script>
{% endif %}

这与我们在其他几家商店使用的安装相同，效果很好。直到上周，它也曾经在这个店面工作，大约是我们切换到不同的销售渠道的时间（此后已被关闭）。

在故障排除期间，我检查了源代码并注意到一堆 shopify 变量现在返回 null。具体来说，total_price 解析为 null 并导致以下 Javascript 错误：

Uncaught SyntaxError: Unexpected token ','

这是我检查页面源代码时的样子。

<!-- Global site tag (gtag.js) - Google Ads: ***** -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-*****"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-*****');
</script>
<!-- Event snippet for Purchase conversion page -->
<script>
  gtag('event', 'conversion', {
      'send_to': 'AW-*****/*****',
      'value': ,
      'currency': 'USD',
      'transaction_id': '3947'
  });
</script>

所以'total_price | money_without_currency' 显然没有返回正确的值，这破坏了 javascript。如果我将钱输出为货币，它看起来像这样：

// This...
<script>console.log({{ total_price | json }});</script>

// Resolves to this
<script>console.log(null);</script>

我从未见过这样的问题，即 shopify 全局变量不返回任何内容。

我注意到这家商店和我们其他工作商店之间还有一个奇怪的区别。在标签之间我注意到 Shopify.Checkout.token 也返回 null

<script type="text/javascript">
  Shopify = window.Shopify || {};

  if (window.opener) {
    window.opener.postMessage(JSON.stringify({"current_checkout_page": null}), "*");
  }

  Shopify.Checkout = Shopify.Checkout || {};
  Shopify.Checkout.apiHost = "*****.myshopify.com";
  Shopify.Checkout.assetsPath = "\/\/cdn.shopify.com\/s";
  Shopify.Checkout.i18n = {"orders":{"order_updates":{"title":"Order updates"}}};
  Shopify.Checkout.isOrderStatusPage = true;
  Shopify.Checkout.token = null;
</script>

我不确定 Shopify.Checkout.token 应该是什么，但我只是注意到它是为我们的其他工作店面定义的。我已经尝试了我能想到的一切，所以任何和所有的帮助都将不胜感激。

谢谢！

标签： shopifyliquid

解决方案

我不知道在过去的某个时候您是否可以访问total_price全局范围内的变量，但截至 2020 年 6 月，Shopify 官方文档上关于“添加附加脚本”的部分说：

附加脚本框用于将代码插入到您的订单状态页面的模板中。您可以添加以下任何内容：

...

  • Liquid 代码 -您可以访问checkout和shopLiquid 对象。要了解有关其属性的更多信息，请参阅结帐对象和商店对象。

并且该checkout对象具有total_price属性。我怀疑如果您在结帐命名空间中引用该属性，您将得到您正在寻找的东西。

<script>
  gtag(
    'event',
    'conversion', {
      'send_to': 'AW-*****/*****',
      'value': {{ checkout.total_price | money_without_currency | json }},
      'currency': 'USD',
      'transaction_id': '{{order.order_number}}'
    }
  );
</script>

顺便说一句，您可能会注意到我进一步通过管道checkout.total_price | money_without_currency传递到过滤器，该json过滤器将根据其基础类型自动转义和自动引用值。当你在 JavaScript 中做液体时非常方便。

推荐阅读