How to Set Up GA4 Ecommerce Tracking On Shopify

How to Set Up GA4 Ecommerce Tracking On Shopify

Google will be sunsetting Universal Analytics in July 2023, and moving everything to GA4. This means website owners need to get GA4 set up as soon as possible. Find out how in our step-by-step guide.

Written by Will

5 min read

By now you should know that Google will be sunsetting Universal Analytics in July 2023, and moving everything to GA4. This means that website owners need to get GA4 set up as soon as possible. For ecommerce websites there’s the added complication of getting ecommerce tracking working in GA4 too. For Shopify stores this process was really simple on Universal Analytics, but is more challenging on GA4.

Read on for an easy process to set up GA4 ecommerce tracking on any Shopify website without needing to install apps or use developers.

Whilst anyone should be able to follow this guide, it will be easier if you have a basic understanding of how GTM works.


Create Data Layer In Shopify

Our first task is to create a data layer. The data layer is a simple bit of code that contains information about a visitor’s website session. This information can then be passed to other platforms such as GTM.

We’ve created a data layer for you that goes on the Shopify order-complete page. It automatically populates itself with information about the customer's order, such as order value, shipping costs and items purchased.

  • Copy and paste the script below into the ‘checkout’ scripts field in your Shopify admin settings. This can be found by going to ‘Settings > Checkout & Accounts > Additional Scripts’

  • This data layer pushes a ‘purchase’ event to GTM that contains information about the customer's order.

{% if first_time_accessed %}
<script>
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  window.dataLayer.push({
    'event': 'purchase', 
      ecommerce: {
      'transaction_id': '{{ order.name || order.order_number }}',
      'value': {{ total_price | money_without_currency | remove:',' }}, // Includes tax & shipping
      'tax': {{ tax_price | money_without_currency | remove:',' }},
      'shipping': {{ shipping_price | money_without_currency | remove:',' }},
      'currency': '{{ shop.currency }}',
      'payment_type': '{{ order.transactions[0].gateway }}', //optional parameter
      'items': [

      {% for line_item in line_items %}
        {
        'item_id': '{{ line_item.sku || line_item.product_id }}', //if no SKU exists, use product Id
        'item_name': '{{ line_item.product.title }}',
        'discount': {{ line_item.line_level_total_discount | money_without_currency }},
        'item_variant': '{{ line_item.variant.title }}',
        'price': {{ line_item.final_price | money_without_currency }},    
        'quantity': {{ line_item.quantity }}
        },
      {% endfor %}
      ]}
  });
</script>
{% endif %}**

Create Firing Trigger in GTM

Now we need to set up a trigger that fires when customers complete an order. When the trigger fires, the tag that contains the order information is sent to GA4.

We need to define the conditions on which our purchase trigger fires. The condition for our trigger will be when the purchase event in our data layer is pushed. To set this up:

  • Log into GTM, go to the left menu and select ‘Triggers’
  • Press the blue ‘New’ button
  • Call your trigger ‘GA4 - Purchase’
  • Press the ‘edit’ icon in the corner of the ‘Trigger Configuration’ window
  • Under ‘Choose trigger type’ select ‘Custom Event’
  • In the ‘Event name’ field type ‘purchase’
  • Set ‘This trigger fires on’ to ‘Some custom events’
  • Set the event conditions to:
  • Event - Equals - Purchase

When you’re finished, it should look like this:


Create Data Layer Variables in GTM

Before we set up our tag, we need to create GTM variables to grab information from our data layer. If variables are new to you, think of them as packets that contain small bits of information.

Specific values from the data layer are added into these variables, and these are then sent to GA4.

We need to create variables to extract the following values from your datalayer:

  • Order Revenue

  • Order ID

  • Currency

  • Tax

  • Shipping Costs

  • Items Purchased

  • In GTM, from the left menu click into the ‘Variables’ page

  • In the ‘User-Defined Variables’ box click on the ‘New’ button

  • On this screen you can create a new GTM variable. You need to do the following process for each of the variables listed above. The details for each individual variable is listed below:

Order Revenue

Name: dlv - Thank You Page - Order Revenue

Variable Configuration:

Variable Type: Data Layer Variable

Data Layer Variable Name: ecommerce.value


Order ID

Name: dlv - Thank You Page - Order ID

Variable Configuration:

Variable Type: Data Layer Variable

Data Layer Variable Name: ecommerce.transaction_id


Currency

Name: dlv - Thank You Page - Currency

Variable Configuration:

Variable Type: Data Layer Variable

Data Layer Variable Name: ecommerce.currency


Tax

Name: dlv - Thank You Page - Tax

Variable Configuration:

Variable Type: Data Layer Variable

Data Layer Variable Name: ecommerce.tax


Shipping Costs

Name: dlv - Thank You Page - Shipping

Variable Configuration:

Variable Type: Data Layer Variable

Data Layer Variable Name: ecommerce.shipping


Items Purchased

Name: dlv - Thank You Page - Items

Variable Configuration:

Variable Type: Data Layer Variable

Data Layer Variable Name: ecommerce.items


Each variable should look similar to this when complete:

Create Ecommerce Tags in GTM

To pull ecommerce data into GA4, GTM needs to fire a tag on the order-complete page. This tag contains information about each order and is used to populate the GA4 reports.

  • Go back into GTM and from the left menu click into ‘Tags’
  • Press the blue ‘New’ button
  • Name your tag ‘GA4 Purchase’
  • In the ‘Tag Configuration’ box press the edit icon in the top right corner
  • Select ‘Google Analytics: GA4 Event’
  • In the ‘Configuration Tag’ field, select your ‘GA4 Config’ tag.
  • In the ‘Event Name’ field, enter “purchase”
  • Expand the ‘Event Parameters’ drop down menu and press ‘Add Row’

Event parameters are bits of information about the order that we want to pull through to GA4 when the tag fires. Think of event parameters as the individual elements of a customer order (such as order value, shipping costs etc). Each of these elements need to be added as an event parameter against the purchase event tag.

To set these up, click the ‘Add Row’ button. Each row has two fields

  • Parameter Name - The official name of the parameter defined by GA4. When a purchase event fires with one of GA4’s defined purchase parameters, GA4 will recognise it. For example, ‘transaction_id’, ‘tax’ and ‘shipping’ are both recognised purchase parameters. A full list of available purchase event parameters can be viewed here.

  • Value - The actual value of the parameter. This will be a dynamic value based upon the customer ordere. Using the example parameters above, these could be:

transaction_id: #245

tax: 2.56

shipping: 3.99

The event parameter values are dynamic bits of information from your data layer. Remember the data layer variables we created earlier? It’s those variables which are used to populate the event parameter values.

Click the icon to the right hand side of the ‘value’ field. This will load a screen where you can select a variable. Find and select the correct variable for this parameter (it will be one of the ones you created earlier that begins with “dlv”).

Do this for the following parameters:

Parameter Name Value
items {{dlv - Thank You Page - Items}}
value {{dlv - Thank You Page - Order Revenue}}
transaction_id {{dlv - Thank You Page - Order ID}}
tax {{dlv - Thank You Page - Tax}}
shipping {{dlv - Thank you Page - Shipping}}
currency {{dlv - Thank You Page - Currency}}

When complete, your screen should look like this:


Debugging

Finally, we need to test that our tag setup is working. To do this:

  • Go into GTM and press the ‘Preview’ button in the top right corner
  • Follow the steps to activate GTM preview mode on your store
  • Once complete it will take you to the front end of your store with a tag assistant window in the corner

The previous tab (titled “Tag Assistant [Connected]) will now report on the tags that fire as you browse your site in the preview tab.

  • Open your GA4 account and in the left menu go to ‘Configure > DebugView’
  • Go back to the tab that previews your store front end and put through a test transaction
  • Finally, go into the GA4 DebugView tab. If the GA4 purchase tag has successfully fired, you’ll see a green purchase event in the timeline. Click into this event and the window on the right will populate with information about the order.


Publish GTM Changes

Once you’re happy that transactions are captured within your GA4 ecommerce tracking, you can go ahead and publish your GTM changes. After publishing, we recommend paying close attention to both your GA4 account and your UA account to make sure that orders are recorded as you would expect.

Who we are

We are one of the world’s most trusted and experienced Shopify Plus Partners. A full-service, fully in-house digital agency of over 50 talented people, we’ve helped hundreds of ambitious brands exceed their goals.

About Eastside Co

What we do

Eastside Co leads the way in UX-focused Shopify web design, results-driven marketing strategies, and best-in-class Shopify applications and software. We help online businesses escape the ordinary and achieve ecommerce success.

Discover Services
Over 500 Shopify builds.

Let's work together to build your store.

Get In Touch