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!
2
Answers
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:And the
checkout
object has atotal_price
property. I suspect if you refer to that property in the checkout namespace, you’ll get what you’re looking for.By the way, you might notice that I further piped
checkout.total_price | money_without_currency
to thejson
filter which will auto-escape and auto-quote values depending on their underlying types. Very handy when you’re doing liquid-in-javascript.I found that
total_price
wasn’t returning anything for me, neither wascheckout.total_price
. I did however find thatorder.total_price
worked, this was also true to return anything eg:order_number
.