On 1st March 2021 Shopify is permanently removing scripts added in the ‘Additional Google Analytics JavaScript’ preference. This field has been hidden for some time, but was previously used to inject all kinds of additional scripts into the checkout pages.
Why is Shopify removing these additional scripts?
Primarily they represent a security risk: injecting key-stroke-tracking scripts into checkout pages is a common way to steal credit card information. Shopify just can’t take the risk that if the store admin gets hacked, so could the customer card details.
Additionally, being able to customise the Shopify checkout pages (via the checkout.liquid file) is a key feature of Shopify Plus and so a reason for stores to upgrade to Plus.
How to replace Google Analytics code added in this Additional JavaScript field
I know many stores were using this preference for exactly the reason it intended: to modify the functionality of the Universal Analytics tracking script Shopify adds, if configured in the online store preferences.
The good news is that the scripts you need to run (excluding the checkout) can be added in the theme <head>. You can add settings or events to GA’s command queue, which get executed when the Universal Analytics (GA) library is ready.
You need to add this line of code before any additional commands below, to ensure that:
- If the
gafunction is defined already, calls to ga() are queued - If the
gafunction is not yet defined, calls to ga() are added to a new queue
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”yes” bg-color=”#abb8c3″ theme=”light” language=”javascript” wrapped=”yes” copy-text=”Copy Code” copy-confirmed=”Copied”]
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
[/dm_code_snippet]
Shopify Plus stores can do the same thing on checkout.liquid to customise Google Analytics tracking on the checkout pages.
Here are some of the common uses of Additional JavaScript, and alternatives I know of:
1. Anonymising IP address
GDPR regulation in Europe requires stores not to send full IP addresses to Google’s servers in the US. You can opt out in GA by using this – but it will NOT affect pageviews sent from the checkout.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”yes” bg-color=”#abb8c3″ theme=”light” language=”javascript” wrapped=”yes” copy-text=”Copy Code” copy-confirmed=”Copied”]
ga(‘set’, ‘anonymizeIp’, true);
[/dm_code_snippet]
2. Tracking checkout steps
To measure how far users get in the checkout, and with what products, many stores want to track checkout steps in GA. Shopify does track pageviews and some events from the checkout (not including product values), but unfortunately you can no longer add a script on Shopify’s checkout. However, Littledata’s app has a more robust solution to send checkout step events and pageviews from our servers.
Tracking the checkout steps across all checkouts, including third party checkouts on ReCharge and CartHook, enables stores to retarget abandoned checkouts with Google Ads and understand how shipping and payment options affect checkout conversion.
3. Cross-domain linking
Shopify already accepts incoming cross-domain tracking, but to add cross-domain tracking to links from your Shopify store you need to instruct GA to automatically decorate links:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”yes” bg-color=”#abb8c3″ theme=”light” language=”javascript” wrapped=”yes” copy-text=”Copy Code” copy-confirmed=”Copied”]
ga(‘linker:autoLink’, [‘yourblog.com’]);
[/dm_code_snippet]
For more examples on when you need to set up cross-domain linking (for example, to third-party checkouts), see our cross-domain Shopify tracking guide.
4. Tracking logged-in users
To enable a registered users view in Google Analytics you need to send a customer ID when known. The window-scope object `__st` includes that `cid` field, when the user is logged in.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”yes” bg-color=”#abb8c3″ theme=”light” language=”javascript” wrapped=”yes” copy-text=”Copy Code” copy-confirmed=”Copied”]
if(__st[“cid”]) ga(‘set’, ‘&uid’, __st[“cid”]);
[/dm_code_snippet]
5. Tracking additional events
You may want to trigger additional GA events, like clicks on a particular button. I’d recommend you set these up using Google Tag Manager, but you can also run a SEND command at any stage and it will send to the GA tracker Shopify loads on the page.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”yes” bg-color=”#abb8c3″ theme=”light” language=”javascript” wrapped=”yes”]
ga(‘send’, ‘event’, ‘List Filter’, ‘Change size filter’, ‘XL’);
[/dm_code_snippet]
6. Tracking additional web properties
Many stores need multiple tracking IDs to send data to multiple web properties, and Shopify by default only allows a single property. I’d again recommend you set these up using Google Tag Manager, but you can also run a CREATE command in your head to track to additional properties.
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”yes” bg-color=”#abb8c3″ theme=”light” language=”javascript” wrapped=”yes” copy-text=”Copy Code” copy-confirmed=”Copied”]
ga(‘create’, ‘UA-XXXXXXXX-X’, ‘auto’);
[/dm_code_snippet]
7. Adding GTM triggers
If you are using Google Tag Manager to fire other marketing tags you might have used the Additional JavaScript to run triggers – for example when customers completed an order. This could be replaced by using Littledata’s GTM data layer, which is included with our Google Analytics app.
The final result
Assuming you just need items 1 and 4 from the list above, this is how the script tag in your liquid theme might look:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”yes” bg-color=”#abb8c3″ theme=”light” language=”html” wrapped=”yes” copy-text=”Copy Code” copy-confirmed=”Copied”]
<head>
…
<script>
// Scripts moved from Additional Google Analytics JavaScript preferences
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga(‘set’, ‘anonymizeIp’, true);
if(__st[“cid”]) ga(‘set’, ‘&uid’, __st[“cid”]);
</script>
</head>
[/dm_code_snippet]
Is there anything else your store has added? Let me know and we can add it to the list.
