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

AnnaI · ‎09-07-2022

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

Sajat · ‎09-07-2022

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 · ‎09-07-2022

Yes, it is Shopify Plus

Sajat · ‎09-08-2022

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 · ‎09-09-2022

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 · ‎09-09-2022

Dear Sajat,

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

Wish you a great weekend!

Anna

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

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

Community Blog Articles