Javascript error with checkout script

Solved
Highlighted
Shopify Partner
23 0 6

Hi!

I'm in the process of trying to optimize our theme, as well as we have been having some bugs on Samsung phones, and some other bugs with some of our payment processors. 

I have been trying to fix absolutely all bugs and errors, but this one I simply cannot figure out. 

 

I'm getting a "Uncaught SyntaxError: Unexpected token '%'" javascript error, caused by having the liquid code {% if first_time_accessed %} in the beginning of my Additional Google Analytics JavaScript under the Online Store preferences, that gets recommended in various recipes for how to properly track conversions. 

 

Can I safely ignore it, or is there a way to have it properly validated? It also seems like it doesn't load the codes properly in the checkout.

0 Likes
Highlighted
Shopify Partner
1784 211 370

I wouldn't ignore it. For some reasons the liquid code is not interpreted before rendering the page but it should be. Maybe an issue with character encoding and Shopify can't detect it as liquid code. Can you rewrite the code from scratch using UTF-8 encoding and retry? Can you share the actual code (text not a screenshot) you have setup under Additional Google Analytics JavaScript, without the sensitive bits?

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Highlighted
Shopify Partner
23 0 6

Thanks for the quick response! Much appreciated. Here is the full code, located in the "Additional Google Analytics JavaScript":

 

{% if first_time_accessed %}

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-xxxxxxxxx');

gtag('event', 'page_view', {
'send_to': 'AW-xxxxxxxxx',
'ecomm_pagetype': 'purchase',
'ecomm_prodid': [{% for item in checkout.line_items %}'{{line_item.sku}}',{% endfor %}],
'ecomm_totalvalue': {{ checkout.total_price | money_without_currency | remove:',' }}
});

!function(e){if(!window.pintrk){window.pintrk=function()
{window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
n=window.pintrk;n.queue=[],n.version="3.0";var
t=document.createElement("script");t.async=!0,t.src=e;var
r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r)}}
("https://s.pinimg.com/ct/core.js");

pintrk('load','xxxxxxxxxxxxxx', { em: '{{ customer.email }}', });
pintrk('page');
pintrk('track', 'checkout',{
value: {{ total_price | money_without_currency }},
currency: '{{ currency }}',
order_id: {{ checkout.id }}
});


<noscript>
<img height="1" width="1" style="display:none;" alt=""
src="https://ct.pinterest.com/v3/?tid=xxxxxxxxxxxxxx&event=checkout&noscript=1"/>
</noscript>
{% endif %}

0 Likes
Highlighted
Shopify Partner
1784 211 370

Actually, Shopify wont allow any code that is not related to Google Tracking, maybe it just cuts everything after the gtag part, including the closing {% endif %} tag?

What if you remove everything related to Pinterest tracking as such:

{% if first_time_accessed %}

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-xxxxxxxxx');

gtag('event', 'page_view', {
'send_to': 'AW-xxxxxxxxx',
'ecomm_pagetype': 'purchase',
'ecomm_prodid': [{% for item in checkout.line_items %}'{{line_item.sku}}',{% endfor %}],
'ecomm_totalvalue': {{ checkout.total_price | money_without_currency | remove:',' }}
});
{% endif %}

Do you still see the issue?

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Highlighted
Shopify Partner
23 0 6

Thanks! I tried removing the pinterest code, but I'm still getting the same error. (the pinterest code was added from an official guide by Pinterest I believe. However, I removed a line from it called "item_quantity" or so, but it still gets fired during the checkout without me knowing from where)

 

Here is the js I see on the site now that triggers the error:

 

<script>window.ShopifyAnalytics.merchantGoogleAnalytics = function() {
{% if first_time_accessed %}

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-xxxxxxxx');

gtag('event', 'page_view', {
'send_to': 'AW-xxxxxxxx',
'ecomm_pagetype': 'purchase',
'ecomm_prodid': [{% for item in checkout.line_items %}'{{line_item.sku}}',{% endfor %}],
'ecomm_totalvalue': {{ checkout.total_price | money_without_currency | remove:',' }}
});

{% endif %}
};
</script>

 

The error message of the Unexpected token % still remains. If nobody else is experiencing this, it could be messing up other things on our site. So thank you so much for helping :) 

0 Likes
Highlighted
Shopify Partner
1784 211 370

I think Shopify no longer allows liquid code inside the Additional Scripts section, as it just wraps it in a Java Script function now, wasn't the case previously.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Highlighted
Shopify Partner
23 0 6

That could be indeed. 

I removed it now, and get an error from the other liquid code:

 

<script>window.ShopifyAnalytics.merchantGoogleAnalytics = function() {
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-xxxxxxxx');

gtag('event', 'page_view', {
'send_to': 'AW-xxxxxxxx',
'ecomm_pagetype': 'purchase',
'ecomm_prodid': [{% for item in checkout.line_items %}'{{line_item.sku}}',{% endfor %}],
'ecomm_totalvalue': {{ checkout.total_price | money_without_currency | remove:',' }}
});
};
</script>

 

It's the same error, but this time connected to the line with ecomm_prodid. So to have proper tracking for google analytics, I'll need to dynamically add the line items and checkout value by javascript then I guess? Do you know if that's possible? I'll try removing all the liquid and see if things improve for now.

0 Likes
Highlighted
Shopify Partner
1784 211 370

This is an accepted solution.

There is a JavaScript object available on the thank you page - Shopify.Checkout, which has data related to the order placed. Have a look through Chrome developer console, it should have all the necessary bits relevant for the tracking code.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Highlighted
Shopify Partner
23 0 6

Good call, I will do that then. Thank you so much for all your help! Exceptional support like this makes me want to look more into visely for sure as well =D

1 Like
Highlighted
Shopify Partner
23 0 6

Turns there is a dedicated place for checkout scripts under the settings I had completely forgotten about! That where the Pinterest tracking etc should go. Turns out the extra analytics field only approved javascript from Google Analytics for safety purposes.

0 Likes