This repo contains all necessary files for Shopify theme GA4 implementations. The files are organized into standard Shopify theme directories.
View the comprehensive Notion document
- Insert GTM script into
<head>withintheme.liquidandcheckout.liquid
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','{{settings.gtm_id}}');
</script>
<!-- End Google Tag Manager -->
- Insert GTM script into
<body>withintheme.liquidandcheckout.liquid
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{settings.gtm_id}}" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
- Add schema to
settings_schema.jsonand then input the client's GTM ID
{
"name": "GTM Data Layer",
"settings": [
{
"type": "text",
"id": "gtm_id",
"label": "GTM ID",
"info": "Insert Google Tag Manager ID"
},
{
"type": "checkbox",
"id": "gtm_debug",
"label": "Enable debugging",
"info": "If checked, events will be pushed to the 'myntrLayer' object and development logs will show in the browser console.",
"default": false
}
]
}
- Add new snippet:
datalayer.liquid - Add new snippet:
product-datalayer.liquid - Add new snippet:
datalayer-promo-attrs.liquid - Add new snippet:
get-query-string.liquid - Add new product template:
product.datalayer.liquid - Add new cart template:
cart.datalayer.liquid - Render
datalayer.liquidsnippet near the end of the</body>tag ontheme.liquidandcheckout.liquid - Add the code from file
datalayer-purchase.liquidto Checkout Additional Scripts