How do I set up checkout tracking in GA4 for a Shopify Plus store?

AnnaI
New Member
7 0 0

Hello all,

 
We set up GA4 ecommerce tracking for a Shopify Plus store, all events are working fine but checkout. We asked Shopify support and they say we need to add a code to the theme's checkout.liquid. Would really appreciate if anyone could help us with the code.
 
Thank you in advance,
Anna
Replies 5 (5)

Sajat
Shopify Partner
192 19 34

Hi Anna,

Are you on Shopify or Shopify Plus?

Not sure you can customize checkout.liquid on Shopify only. Shopify plus account is required to customize checkout page.

Thanks.

AnnaI
New Member
7 0 0

Yes, it is Shopify Plus 

Sajat
Shopify Partner
192 19 34

Hi Annal,

Good to hear that it is on Shopify Plus. Can you please tell what scripts/events are you looking to add on the page. If you have access to checkout.liquid, please send me that as well. If you do not have access to checkout.liquid file in your theme code, then contact Shopify Plus Support to gain access.

 

One suggestion - It would have been easier to manage these kinds of scripts if you had used Google Tag Manager, as it is more customizable and most of the scripts could have been added on GTM instead of each code file.

 

Thanks,

Sajat

Sajat
Shopify Partner
192 19 34

Hi Annal,

Here is a sample checkout.liquid file with integrated GA4 Property

 

 

 

<!DOCTYPE html>
<html lang="{{ locale }}" dir="{{ direction }}" class="{{ checkout_html_classes }}">
<head>

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

gtag('config', 'G-XXXXXXXX');
</script>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
<meta name="referrer" content="origin">

<title>{{ page_title }}</title>

{{ content_for_header }}

{{ checkout_stylesheets }}
{{ checkout_scripts }}
</head>
<body>
{{ skip_to_content_link }}

<header class="banner" data-header role="banner">
<div class="wrap">
{{ content_for_logo }}
</div>
</header>

{{ order_summary_toggle }}
<div class="content" data-content>
<div class="wrap">
<div class="main">
<header class="main__header" role="banner">
{{ content_for_logo }}
{{ breadcrumb }}
{{ alternative_payment_methods }}
</header>
<main class="main__content" role="main">
{{ content_for_layout }}
</main>
<footer class="main__footer" role="contentinfo">
{{ content_for_footer }}
</footer>
</div>
<aside class="sidebar" role="complementary">
<div class="sidebar__header">
{{ content_for_logo }}
</div>
<div class="sidebar__content">
{{ content_for_order_summary }}
</div>
</aside>
</div>
</div>

{{ tracking_code }}
</body>
</html>

 

 
Please put your GA4 Configuration script just below the head tag, as displayed  on the above code.
 
This should work.
Thanks
AnnaI
New Member
7 0 0

Dear Sajat,

 

Thank you so much for your help! Now it is working 😀

 

Wish you a great weekend!

Anna