How to Migrate Your Shopify Data to GA4 Using Tag Manager

Starting July 2023, Google is retiring Universal Analytics and replacing it with GA4. If you haven’t migrated yet, don’t worry, it’s never too late, in this article you will learn how to migrate your Shopify data to GA4!

 

In this post, we’ll walk you through using Tag Manager to migrate all your Shopify data to GA4. We’ll give you an overview, but feel free to jump ahead if you’ve already got Tag Manager or GA4 installed.

Create a Tag Manager Account

First up, create a Tag Manager account by heading over to https://tagmanager.google.com/ and signing up for a new account. Next, open your Shopify dashboard, navigate to the online store, and choose ‘edit code’ on your active theme. Remember, it’s a good idea to create a backup of your theme before editing.

edit code shopify

Now, copy the script tag and paste it in the head section of your website.

theme.liquid google tag manager

Then copy the noscript tag and paste it into the body section.

noscript tag google tag manager shopify

For those using the Dawn theme, you’ll want to edit the theme.liquid file. If you’re using a different theme, consult the developer documentation to find the right file.

Once complete, the Tag Manager will run on every page of your website. However, it won’t work on the checkout page, so we need to add the code there too. Go back to your dashboard, click on settings, choose checkout, and paste the Google Tag Manager script tag there.

Step 2: Create a GA4 Account and Connect it to Tag Manager

With Tag Manager installed on your Shopify site, we’ll now create a GA4 account and connect it to Tag Manager. Create a GA4 account, grab the measurement ID, and create a new tag in Tag Manager. Set up a GA4 configuration tag, paste the measurement ID, and create a trigger for all pages. Hit save, and GA4 is installed!

GA4 measurment ID

Creating a new Tag in tag manager

GA4 configuration tag

GA4 configuration tag in tag manager trigger

Step 3: Set Up Custom Codes for GA4 Events

Here’s where things get interesting. GA4 uses events to measure conversions, and we’ll need to add custom codes to set these up. Don’t worry; we’ve got you covered with the codes.

Copy the first code and paste it on your main product page. Keep in mind that the file names might be different if you’re using a different theme.

				
					<script type="litespeed/javascript">window.dataLayer=window.dataLayer||[];window.dataLayer.push({event:'view_item_test_event',currency:"NZD",ecommerce:{value:"{{ product.price | money_without_currency | remove:',' }}",items:[{item_name:'{{ product.title | replace: "'","##@@singleinvertedcomma@@##" }}'.replace("##@@singleinvertedcomma@@##", "'"),
item_id: "{% if product.sku %}{{ product.sku }}{% else %}{{ product.id}}{% endif %}",
price: "{{ product.price | money_without_currency | remove:',' }}",
item_brand: "{{ product.vendor | remove: "'" | remove: '"' }}",
{% for collection in product.collections %}
item_category{% unless forloop.index == 1 %}{{ forloop.index }}{% endunless %}: "{{ collection.title }}",
{% endfor %}
item_variant: "{{ product.selected_or_first_available_variant.title | remove: "'" | remove: '"' }}",
quantity: '1'}]}})</script>
				
			

main product structured data

Then, copy the second code and paste it above the Tag Manager script code on your checkout page.

				
					<script type="litespeed/javascript">window.dataLayer=window.dataLayer||[];window.dataLayer.push({{%if customer%}
userType:"member",customer:{id:"{{ customer.id }}",lastOrder:"{{ customer.orders.first.created_at | date: '%B %d, %Y %I:%M%p' }}",orderCount:{{customer.orders.size}},totalSpent:{%if customer%}{%assign total_spent=0%}{%for item in customer.orders%}{%assign total_spent=total_spent|plus:item.total_net_amount%}{%endfor%}{{total_spent|money_without_currency|remove:","}}{%else%}""{%endif%},tags:{{-customer.tags|json-}}},{%else%}
userType:"visitor",customer:{id:"",lastOrder:"",orderCount:"",totalSpent:"",tags:""},{%endif%}})</script> <script type="litespeed/javascript">{%if first_time_accessed%}
window.dataLayer=window.dataLayer||[];dataLayer.push({'page_type':'purchase','event':'purchase','transaction_id':'{{ order.name || order.order_number }}','totalValue':{{total_price|money_without_currency|remove:','}},'subtotalValue':{{subtotal_price|money_without_currency|remove:','}},'tax':{{tax_price|money_without_currency|remove:','}},'shipping':{{shipping_price|money_without_currency|remove:','}},'currency':"NZD",'payment_type':'{{ order.transactions[0].gateway }}','ecommerce':{'checkout_currency':'{{ checkout.currency }}','value':'{{ checkout.total_price | money_without_currency | remove:',' }}','tax':'{{ checkout.tax_price | money_without_currency | remove:',' }}','shipping':'{{ checkout.shipping_price | money_without_currency | remove:',' }}','transaction_id':'{{ order.name || order.order_number }}','items':[{%for line_item in order.line_items%}
{'item_name':'{{ line_item.product.title | replace: "'","##@@singleinvertedcomma@@##"}}', 
                            'item_id': '{{line_item.sku||line_item.product.id}}',
                            'coupon': '{{order.discount_applications.title}}',
                            'price': {{ line_item.final_price | money_without_currency | remove:',' }},
                            'item_brand': '{{line_item.vendor}}',
                            'quantity': {{ line_item.quantity }},
                            'item_variant': '{{line_item.variant.title}}'},{%endfor%}]}});{%endif%}</script>
				
			

Checkout page codes

Now we can head back to Tag Manager and start creating tags. We’ll create three tags for item view, add to cart, and purchase, and we’ll guide you through the process, including adding variables and configuring triggers.

Step 4: Add Variables and Configure Triggers

First, we need to add our variables. We’re telling Tag Manager to go into the codes that we added to our website to look for the data we need. Create a new variable and name it Items DLV. This will be a DataLayer variable, which means it will go into the DataLayer to find our data, and it’s going to look for ecommerce.items.

Tag manager variable new

naming your new dlv

Choosing Datalaye variable

naming datalayer value event

Save it and create another one. Name this one Tax DLV and set it to look for ecommerce.tax. Now we create Value DLV, Coupon DLV, and Shipping DLV.

 

  • Value DLV = ecommerce.value
  • Coupon DLV = ecommerce.coupon
  • Shipping DLV = ecommerce.shipping
  • Tax DLV = ecommerce.tax
  • Items DLV= ecommerce.items
  • Transaction ID Random Number= Random Number

choosing random number for transaction id variable

 

With all our variables added, let’s configure our triggers.

We need a view items trigger, a purchase trigger, and an add-to-cart trigger. Create each trigger as a custom event with the appropriate event name.

custom event trigger add to cart view item custom event trigger purcahse custom event trigger

Step 5: Create GA4 Event Tags and Save

With our variables and triggers in place, we’ll create GA4 event tags for each of the three events: item view, add to cart, and purchase. Set up the necessary parameters and choose the appropriate triggers that we created earlier.

GA4 event google tag manager add to cart GA4 event tag

GA4 event tag view item

view item trigger GA4 event tag

 GA4 purchase event parametersGA4 purchase event trigger in tag

Once everything is set up, test a purchase on your website and check the results. It might take up to 24 hours for changes to appear in GA4, but they could show up sooner.

Table of Contents

Leave a Reply

Your email address will not be published. Required fields are marked *