CODEWITHSUNDEEP
shopifyliquid
Jordan Lagan
Jordan Lagan

Reputation: 232

Shopify Tracking Broken, total_price always returns 'null'

I'm running into an issue with a client's Shopify store where our PPC conversion tracking suddenly stopped working and we're not quite sure why. We have a standard installation of Google Ads in the Checkout > Additional scripts section that looks like this:

<!-- 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 %}

This is the same installation that we use across a few other stores and works great. It used to work on this storefront too until last week, about the time we switched to a different sales channel (has since been turned off).

During troubleshooting, I checked through the source code and noticed that a bunch of shopify variables now return null. Specifically total_price resolves to null and causes the following Javascript error:

Uncaught SyntaxError: Unexpected token ','

This is what it looks like when I inspect page source.

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

So 'total_price | money_without_currency' is clearly not returning the correct value and this is breaking the javascript. If I output the money as a currency it looks like this:

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

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

I've never seen an issue like this where a shopify global variable just doesn't return anything.

I noticed one more strange difference between this store and our other working stores. Between the tags I noticed that Shopify.Checkout.token is also returning 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>

I'm not sure what the Shopify.Checkout.token is supposed to be, but I just notice that it's defined for our other working storefronts. I've tried everything that I can think of so any and all assistance would be hugely appreciated.

Thank you!

Upvotes: 1

Views: 1442

Answers (2)

Dan B-H
Dan B-H

Reputation: 11

I found that total_price wasn't returning anything for me, neither was checkout.total_price. I did however find that order.total_price worked, this was also true to return anything eg: order_number.

Upvotes: 0

Cameron Hurd
Cameron Hurd

Reputation: 5031

I don't know if at some point in the past you might've had access to a total_price variable in the global scope, but as of June 2020, the section about "Adding Additional Scripts" on the official Shopify docs says:

The Additional scripts box is used to insert code into the template for your order status page. You can add any of the following:

...

And the checkout object has a total_price property. I suspect if you refer to that property in the checkout namespace, you'll get what you're looking for.

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

By the way, you might notice that I further piped checkout.total_price | money_without_currency to the json filter which will auto-escape and auto-quote values depending on their underlying types. Very handy when you're doing liquid-in-javascript.

Upvotes: 1

Related Questions