Step 10. How to implement GA4 purchase event on Shopify

1. Implement data layer variables in Shopify.
   In this step we implement transaction details data layer variables into Shopify template. These variables we use later in GTM to sent them to Google Analytics every time when user make a purchase Shopify.
   Let's go to your Shopify Admin to edit your checkout settings: Shopify admin>Settings>Checkout>Additional scripts, and paste there the following data layer code:
   

   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
   'event': 'purchase',
   'totalValue': '{{ checkout.total_price | divided_by: 100.0 }}',
   'shipping': '{{shipping_price | money_without_currency }}',
   'tax': '{{tax_price | money_without_currency }}',
   'payment_type': '{{order.transactions[0].gateway}}',
   'currency': '{{ shop.currency }}',
   'transaction_id': '{{order.order_number}}',
   'items': [
   {% for line_item in line_items %}
   {
   'item_id': '{{ line_item.product_id }}',
   'item_name': '{{ line_item.product.title | remove: "'" | remove: '"'}}',
   'item_category': '{{ line_item.product.type }}',
   'price': '{{ line_item.price | times: 0.01 }}',
   'quantity': '{{ line_item.quantity }}',
   'item_variant': '{{ line_item.item_variant.title }}'
   },
   {% endfor %}
   ]
   });
   

2. Implement Google Tag Manager container code.
   As you already have data layer variables in your checkout code you need to add after GTM Transaction Data layer section, Google Tag Manager code.
   
   If you already have GTM code in your checkout setting please just make sure that is implemented after GTM Transaction Data Layer and go straight to the 3 point. 
   
   To obtain GTM container code you have to do first 3 steps from here: How to install Google Tag Manager in Shopify.
   If you have already copied GTM container code, go to:
   Shopify admin>Settings>Checkout>Additional scripts
   and paste it there, after Transaction Data Layer code.

(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','GTM-xxx');

3. Define new variables in Google Tag Manager using data layer. 
   Go to "Variables" section in you Google Tag Manager.
   
   
   
   then in "User-Defined Variables" section click "New" button.
   
   
   
   then:
   a) Create "DL – totalValue" data layer variable as follow (chose variable type as "Data Layer Variable")
   
   
   
   b) Create "DL – shipping" data layer variable as follow (chose variable type as "Data Layer Variable")
   
   
   
   c) Create "DL – tax" data layer variable as follow (chose variable type as "Data Layer Variable")
   
   
   
   d) Create "DL – payment_type" data layer variable as follow (chose variable type as "Data Layer Variable")
   
   
   
   e) Create "DL – currency" data layer variable as follow (chose variable type as "Data Layer Variable")
   
   
   
   f) Create "DL – transaction_id" data layer variable as follow (chose variable type as "Data Layer Variable")
   
   
   
   g) Create "DL – items" data layer variable as follow (chose variable type as "Data Layer Variable")
   
   
   
   
4. Create "CE – purchase and Dom ready" trigger.
   We use it to fire new purchase tag. Go to trigger section and create new trigger, clicking "New" button.
   
   
   
   then
   
   a) Create new "CE – purchase" trigger as follow:
   
   
   
   b) Create new "CE – purchase and Dom Ready" event as follow (chose trigger type as: Trigger Group)
   
   
   
   We are using here trigger group to connect 2 existing triggers
   – CE – purchase which is activated when purchase custom event is present in data layer)
   – All Page View – Dom ready which is activated when all Dom elements of your website is loaded. We are using Dom ready type of trigger to be sure among others that all variables are already present in data layer.
   
   
5. Create GA4 – purchase tag in Google Tag Manger.
   Go to "Tags" and click "New" button to add new tag and name like "GA4 – purchase"
   
   
   
   then choose tag type and select “Google Analytics: GA4 Event”
   
   
   
   then choose your configuration tag that you have already created here: How to implement GA4 Configuration tag in Google Tag Manager?
   
   
   and set "Event Name" to "purchase"
   
   
   
   then setup "Event Parameters" as follow:
   
   
   
   then choose your trigger that you have already created a while before (CE – purchase and Dom ready), and click "Save" button on the top right corner.
   After this implementation you will be able to see purchase details in your GA4:
   
   

Lets go to the next step of our tutorial which is: How to implement GA4 add_to_cart event on Shopify

.