Step 12. How to implement GA4 view_cart event in Shopify

Below, you will find instructions on how to do it using Google Tag Manager and data layer variables in Shopify.

1. Implement data layer variables in Shopify. 
   In this step we implement products data layer variables into Shopify template. These variables we use later in GTM to sent them to Google Analytics every time when user visit Shopify product page. Let’s go to your Shopify Admin to edit your theme.liquid template. (Online Store>Themes>Edit your template code>theme.liquid).
   
   
   Inside your section, before the part about GTM, paste the following data layer code:
   

   {% if template contains 'cart' %}
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
   'event': 'view_cart',
   'value': {{cart.total_price| times: 0.01}},
   'items': [
   {% for item in cart.items %}
   {
   'item_id': '{{item.id}}',
   'item_name': '{{item.title}}',
   'quantity': '{{item.quantity}}',
   'price': '{{ item.price | times: 0.01 }}'
   },
   {% endfor %}
   ]
   });
   {% endif %}

2. Create trigger that we use to fire view_cart tag. Go to trigger section and create new trigger:
   
   
   
   
3. Create new “CE – view_cart” trigger as follow:
   
   
   
4. Create GA4 – view_cart tag in Google Tag Manger. Go to “Tags” and click “New” button to add new tag.
   
   
   
   Name it "GA4 – view_cart", then choose tag type and select "Google Analytics: GA4 Event", and your configuration tag that you have already created here: How to implement GA4 Configuration tag in Google Tag Manager? and set "Event Name" to "GA4 – view_cart.
   
   Next step is to setup "Event Parameters" and then choose your trigger, that you have already created a while before (CE – view_cart) and click "Save" button on the top right corner, and click "Submit" to published.
   

Lets go now to the next step of our guide which is: How to implement GA4 remove_from_cart event in Shopify