Forem: Erman Küplü

Shopify Checkout Extensibility & GA4 - Google Ads Tracking

Erman Küplü — Mon, 04 Mar 2024 15:07:30 +0000

Shopify announced that the checkout.liquid will be depreciated on August 13, 2024 - so not much left. Shopify Plus support team already stopped enabling this file for merchants. So Shopify Checkout Extensibility becomes the only option - if you ever want to edit your checkout steps & add tracking scripts (and of course you want to!)

Between keeping up with the relentless updates from Google, Meta, Shopify, Facebook and ensuring our tools like Analyzify stay ahead of the curve, I’ve barely had a moment to catch my breath, let alone share my thoughts here. But, here I am, finally making the time to talk about something that’s been a hot topic among our community: Shopify’s checkout extensibility feature - and its affects to conversion tracking.

At Analyzify, we received hundreds of questions about this topic - especially from Shopify developers, agencies - who have to do the migration. And yes, here is your old friend to help you out.

TLDR:

You will lose the tracking scripts (GA4, Google Ads, etc) on checkout.liquid once you upgrade to checkout.liquid. Don’t do the upgrade before you are ready with the scripts.
You will lose the Order Status Page - Additional Scripts - which holds 80% of merchant’s conversion tracking tags if you upgrade to the new Checkout thank you page.
It is possible to revert the changes; but your scripts won’t come back! So, make sure to take a backup of all your scripts.
You need to use the Shopify Customer Events section, Web Pixels API or an app like Analyzify (well, definitely Analyzify) as a replacement.
You will be unable to track the events as before because you no longer have direct access to the codes. Shopify Customer Events lives in a Sandbox environment on browsers - so we are quite limited here. (Ssh, don’t worry - we got you covered!)

Navigating Conversion Tracking with Shopify Checkout Extensibility

Transitioning to Shopify's Checkout Extensibility can significantly impact the functionality of your conversion tracking mechanisms for platforms like Google Ads, GA4, and Facebook.

Traditionally, integration codes for tools such as Google Tag Manager, Google Analytics, or Google Ads have been embedded within the checkout.liquid file or directly through Shopify's settings. However, this upgrade might render some codes ineffective, especially if their placement was within these now-altered locations.

To help with the process, Shopify Admin offers the following analysis of your existing structure and highlights what you should be careful with.

In the example above, Shopify found the Analyzify script on the checkout.liquid file and asks you to be careful with this and upgrade to Analyzify's latest version that supports checkout extensibility.

Leveraging Shopify Customer Events

As a workaround to the challenges presented by Checkout Extensibility, Shopify introduced its alternative solution: Shopify Customer Events. Think of it as Shopify's rendition of Google Tag Manager—albeit with its own set of limitations, it remains a viable option. This feature (sadly!) operates within a sandbox environment, providing a controlled space for tracking implementations. Shopify does this way to secure the storefront checkout from risks of code insertions.

Above you see the App Pixels section on Shopify Customer Events. You will see here the scripts that programmatically added by apps using Shopify Web Pixels API.

Considering diving deeper into Shopify Customer Events? It might be worth your while to explore a detailed discussion on this topic. (And yes, crafting an extensive post could be incredibly beneficial for many!)

For those looking to navigate these waters, we recommend consulting the comprehensive guides available on Shopify and Analyzify. These resources offer invaluable insights into making the most out of Shopify's Customer Events and adjusting your tracking strategies accordingly.

Learn more from Shopify's official guide: Shopify Help Center on Pixels

Check out our relevant guide: Analyzify on Shopify Pixels & Customer Events

In the screenshot above, you will see Analyzify's custom script enabling checkout events tracking and Google Tag Manager on Shopify's new checkout flow.

Prioritizing Crucial Tracking Events

It’s essential to underline that the most critical events to track, such as purchases, beginning the checkout process, and navigating through checkout steps, are the most affected by the shift towards checkout extensibility. This necessitates a focused effort to ensure the collection of accurate data during these key e-commerce moments.

So what could break:

Google Ads Conversion tracking
Google Ads Dynamic Remarketing Events - Checkout Steps
Google Analytics 4 Checkout Events
Google Analytics 4 E-commerce Reports
All other tracking pixels you manually added (such as affiliate tracking)

You need to move all of these scripts into either Shopify Customer Events (manually) or use an app like Analyzify that uses Shopify Web Pixels API.

You will find this section on Shopify Admin > Customer Events > App Pixels.

Professional Guidance Through Tracking Adjustments

Our team at Analyzify is ready to guide you through this evolution, ensuring your tracking remains precise and reliable.

With Analyzify, you gain access to comprehensive setup and review services, all for a one-time fee, ensuring your e-commerce tracking doesn’t skip a beat during this transition.

We offer a managed migration service at no extra cost for our new clients.

Setting up Google Tag Manager with Shopify Checkout Extensibility (2024)

As I mentioned, we no longer have direct access to the codes. Shopify Customer Events section works in a sandbox environment so it works on its little word with many limitations.

Shopify has an excellent tutorial on this topic but it doesn't cover all the needs. I will soon create an open source solution this matter as well. But for now, I will explain how we handle this issue for Analyzify clients.

Data Transformation:
- Identify data that is inaccessible due to the sandboxed checkout environment.
- Transform this data into a format suitable for analysis and tracking.
Data Layer Integration:
- Relay the transformed data to the dataLayer.
- This creates a bridge for information transfer, making data accessible for tracking purposes.
Data Transmission via GTM:
- Utilize Google Tag Manager (GTM) to send the data from the dataLayer to various destinations.
- These destinations include analytics and marketing platforms such as GA4, Google Ads, and Facebook.

In the screenshot above, you will see Analyzify's custom script enabling checkout events tracking and Google Tag Manager on Shopify's new checkout flow.

Benefits of Our Approach:

Efficient Data Utilization:
- Leverage GTM to manage and transmit checkout data efficiently.
- Ensure comprehensive tracking of checkout events and customer behaviors.
Detailed Checkout Tracking:
- Monitor crucial checkout events like “add_shipping_info”, “add_contact_info”, and “add_payment_info”.
- Gain clear insights into the customer journey throughout the checkout process.
Constant Updates and Compliance:
- Stay updated with the latest Shopify enhancements, including checkout extensibility and custom pixels.
- Ensure codes are continually refreshed to maintain compatibility and functionality.
Easy Debugging and Documentation:
- Benefit from a user-friendly system designed for easy debugging and problem resolution.
- Access comprehensive documentation effortlessly, ensuring smooth operation and utilization of our services.
Data Privacy Assurance:
- Adhere to GDPR and other data privacy regulations through full compatibility with Shopify's customer privacy API and consent management tools.
- Maintain the highest standards of data privacy and security for your customers' information.

FAQ

1. What is Shopify Checkout Extensibility?

Shopify Checkout Extensibility offers a comprehensive solution for customizing the checkout experience, including the design and functionality of checkout, thank you pages, order status, and customer accounts. This feature provides a dedicated environment for enhancing brand consistency and integrating advanced functionalities, all separate from the theme editor.

2. Why should I use Shopify Checkout Extensibility?

The primary advantage of utilizing Shopify Checkout Extensibility lies in its user-friendly sandbox environment, which enables significant customization without the need for coding expertise. This facilitates effortless checkout modifications, ensuring a seamless integration without affecting the existing theme structure.

3. How can I activate Shopify Checkout Extensibility?

To enable this feature, navigate to Settings > Checkout within your Shopify admin. Shopify Checkout Extensibility can be activated for various checkout stages including contact information, shipping details, payment information, and the thank you/order status page, catering to diverse customization needs.

4. How can you use Checkout Extensibility with Analyzify?

Shopify's Web Pixels feature offers a coding-free alternative for embedding tracking scripts, which is fully supported by Analyzify. This integration ensures accurate tracking across checkout steps, thank you pages, and order status, leveraging Web Pixels to facilitate comprehensive analytics.

5. Can I use GTM with Checkout Extensibility?

Analyzify enhances Shopify Checkout Extensibility by enabling the use of Google Tag Manager (GTM) functionalities, ensuring a robust and flexible tracking setup across the checkout process.

6. Impact on checkout.liquid File Post-Activation

Upon activating Shopify Checkout Extensibility, the traditional checkout.liquid file becomes redundant. However, Analyzify provides alternative tracking solutions that compensate for this change, ensuring continuous and precise analytics without relying on checkout.liquid.

7. What are the limitations and advantages of Web Pixels?

Advantages:

Universal Access: Web Pixels is accessible across all Shopify plans, removing the exclusivity of checkout data collection to Shopify Plus users.
Isolation from Theme Changes: Tracking remains unaffected by alterations in the theme, offering stability in analytics.

8. How can I set up Google Tag Manager on Shopify's Checkout Extensibility?

As explained above, you can use an app like Analyzify or use Shopify's guided tutorials. Please note that there are many limitations with the Do-It-Yourself option as it the Shopify Customer Events section lives on a sandbox environment. You can also check this video on YouTube to get a better idea of how the Shopify Customer Events section works.

Limitations:

Event Tracking Constraints: The scope of events that can be tracked via Web Pixels is limited.
Restricted Data Transmission: The granularity of information that can be sent with each event is limited, potentially impacting the depth of analytics.

In summary, Shopify Checkout Extensibility significantly advances e-commerce customization and analytics. By leveraging tools like Analyzify and the functionalities of Google Tag Manager, merchants can achieve a highly customized checkout experience that aligns with brand identity, enhances user engagement, and maintains rigorous analytics integrity, all while ensuring compliance with data privacy regulations.

Any questions? Hit me in the comments, and I'll do my best to respond.

How to set up Google Tag Manager on Shopify (+data layers)

Erman Küplü — Thu, 17 Nov 2022 12:47:07 +0000

This will be your go-to guide for understanding and setting up Google Tag Manager on on Shopify. We will be talking about Shopify but you can also apply these learnings to other platforms such as WordPress, Webflow, etc. You will just need to tweak some settings by yourself.

My team and I have completed Google Tag Manager setups for over 2000 Shopify stores. We have created a couple of open-source solutions used by 5000+ merchants. All of it to prove that - we know the drill. You are in the right place.

Google Tag Manager is a powerful tool and offers too much value - especially for e-commerce stores. I have created tons of content on this matter. You might be trying this first time (hey, new friend!), or you have used other tutorials of mine before, and you’re looking to upgrade your setup (welcome, again!).

This complete guide on Shopify Google Tag Manager Integration has 3 main sections, 9 steps and 24 sub-steps. I know it sounds like a lot! But I promise you that it is not exhausting. Each section is designed to teach you something important; they are interconnected. It will be too easy to follow.

Some are small things you will almost automatically do or have already done. So once again, 17 shouldn’t scare you. It will work like a charm; you’ll enjoy it.

Here is how we will set up Google Tag Manager on Shopify:

Section 1: Setting up GTM on Shopify

Step 1: Add the GTM script to the Shopify theme files.
Step 1.1: Copy GTM Script
Step 1.2: Shopify Theme > Edit Code
Step 1.3: Paste the script in theme.liquid
Step 2: Add the GTM script to thank you page > “Additional Scripts”
Step 3: Create a GA4 tag on GTM and validate the GTM setup
Step 3.1 Create a GA4 Global tag on GTM
Step 3.2 Verify with GTM’s Preview Mode

Section 2: Setting up data layers on Shopify

Step 4: Add product view data layer into the Shopify theme
Step 4.1: Create a new snippet
Step 4.2: Paste the Product View Data layer into the snippet
Step 4.3: Include the snippet
Step 5: Add purchase data layer on Shopify

Section 3: Set up Google Tag Manager Tags & Triggers & Variables

Step 6: Set up e-commerce variables
Step 6.1: Add new variable
Step 6.2: Name and choose the Data layer variable
Step 6.3: Add the DLV name & parameters
Step 6.4: Create all the variables
Step 7: Create GTM triggers for Shopify
Step 8: Create the GA4 - View Item e-commerce event
Step 8.1: Create a GA4 Event
Step 8.2: Add event parameters.
Step 9: Validate the Shopify GTM setup using Google Tag Manager debug mode.
Step 9.1: Test GA4 View Item - Debug Mode
Step 9.2: Test GA4 View Item - Tag details

Let’s get started, shall we?!

Section 1: Setting up GTM on Shopify

In this section, we will add the GTM container scripts into Shopify theme files and additional scripts to be triggered in the thank you pages. Once again, this will work for both Shopify Plus and Shopify non-Plus. (Yes, you can set up Google Tag Manager also on Shopify non-Plus plans.)

Feel free to skip Step 1 and Step 2 if you are sure you set up GTM on your Shopify store and it is working well. I would strongly recommend taking the Ste3 action and validating the GTM working correctly on the store.

Step 1: Add the GTM script to the Shopify theme files.

It is quite classic. We will copy the GTM container’s script from your Google Tag Manager account and then paste it into theme.liquid file and checkout.liquid file. Checkout.liquid is only for Shopify Plus merchants.

Step 1.1: Copy GTM Script

Go to your Google Tag Manager account. You can easily create a new account or a new container within an account if you don’t have one. When you click the GTM ID (such as GTM-KL4TS23) on the right top of the menu section, it will show you the full code block.

Just copy it. We can ignore the second code block. It doesn’t have much use in our case. If you are curious why we ignore it, ask the question in the comments and I will answer.

Step 1.2: Shopify Theme > Edit Code

We have to edit the theme files. You can use a duplicated theme or production theme. It is totally up to you.

Shopify Admin > Sales Channels > Online Store > Themes > Choose theme > Edit Code

Step 1.3: Paste the script in theme.liquid

It is time to add this GTM script to Shopify’s theme liquid. This script will reflect in all pages except for the checkout steps. Shopify Plus merchants should also add the code into the checkout.liquid file.

Just make sure to paste the code block above in the file. This is the best place for a Google Tag Manager script.

SAVE the code change. If you are using a duplicated theme, you will need to either PUBLISH or PREVIEW the theme while doing tests. We have had lots of merchants who complain that the solution is not working - yet they just test out the wrong theme.

And once again, the Google Tag Manager setup on Shopify works for non-Shopify plus merchants as well. You are just missing out on the checkout events. The purchase will still be covered in the next step. The great news is that I will soon publish another tutorial where you can also track the checkout events using Shopify’s new features Shopify Customer Events and Shopify Pixels.

Step 2: Add the GTM script to thank you page > “Additional Scripts”

You must be familiar with this section as well. Shopify allows you to manage the scripts on your “Order status page (aka thank you)” page.

Visit Shopify Admin > Settings > Checkout > Order status page > Additional Scripts

Just paste the GTM code here as well. Ideally, it should be at the top. As you are here, you can also clean up this section if there are redundant scripts. Don’t delete anything you are not aware of.

Now it is time to test our GTM installation.

Step 3: Create a GA4 tag on GTM and validate the GTM setup

This step has two purposes:

Creating a Google Analytics 4 configuration tag. This will track all the page views and also help us with the next events.
Testing out the GTM integration. Yes, even though you are sure your GTM is up and running on your store; we never move on without testing so that we know where the problem is.

Step 3.1 Create a GA4 Global tag on GTM

Now we will create a Google Analytics 4 configuration tag (aka global tag).

Google Tag Manager > Tags (Left menu) > Add New > Name it as: “GA4 - Global”.

Add your GA4 measurement ID. It should look like this: G-Y5VMTEWR8V. You can create a new Google Analytics property if you don’t have one.

Then choose ALL PAGES from the Triggering section and then SAVE the Tag.

Step 3.2 Verify with GTM’s Preview Mode

Go back to GTM and click PREVIEW on the right top corner. Type your store URL and click CONNECT. It should show the GA4 Global tag on the debugging screen.

If you have installed the GTM container script into a duplicated Shopify theme; then you will need to use a theme preview link here.

We can safely move to the next phases if we have seen Google Tag Manager and Google Analytics 4’s Global tag worked on your Shopify store.

Section 2: Setting up data layers on Shopify

We need data layers to properly process and send the data through Google Tag Manager. We will set up data layers for the product page and purchase on your store.

Oh, gosh - I love data layers.

Data layers carry out the data in a standardized, structured format so that GTM can read and process it correctly.

As an example, in the single product page; we need to send:

Product ID
Product Name
Product Price
Currency
Product Category, etc

So, all these will be formatted within the Product View data layer. The same will apply the Shopify’s Order Status page. We will add the purchase data layers.

I will, of course, share the code blocks, as well as most of you, are here for that purpose, huh?

Step 4: Add product view data layer into the Shopify theme

We will now add a new snippet on your theme files and put the data layers there.

It is possible to add the data layers directly on your theme.liquid file but I choose more organized method. We will create a new snippet for this.

As you will see in the code blocks, we will have the following events on the Shopify Product data layers:

Product ID
Product Name
Product Price
Product Brand
Product Collection
Product Type
Product SKU
Variant ID
Variant Title
Currency

All of these Shopify product data layers will be available on Google Tag Manager after we set this up correctly.

Step 4.1: Create a new snippet

Just like in Step 1.2, go to your Shopify Theme’s “Edit Code” page. This time, we will do something differently. Scroll down and find the section called “Snippets”.

Click “Add New Snippet” and then name it as: “analyzify-product-datalayer”. You can name it however you like but it is better to name it this way to be able to track the changes later on.

Step 4.2: Paste the Product View Data layer into the snippet

You got the point! We will use Analyzify’s open-source Product data layer script. Just copy the code below, paste it into the new snippet, and then SAVE it.



{% comment %} Product view data layer v2.1 - part of "Shopify GA4 Kit" by Analyzify
Visit https://analyzify.com/shopify-google-analytics/ga4 for complete tutorial 
{% endcomment %}

{% assign template_name = template.name %}

<script type="text/javascript">
window.dataLayer = window.dataLayer || [];

window.appStart = function(){
  window.productPageHandle = function(){

    var productName = "{{ product.title | remove: "'" | remove: '"' }}";
    var productId = "{{ product.id }}";
    var productPrice = "{{ product.price | money_without_currency }}";
    var productBrand = "{{ product.vendor | remove: "'" | remove: '"' }}";
    var productCollection = "{{ product.collections.first.title | remove: "'" | remove: '"' }}";
    var productType = "{{ product.type | remove: "'" | remove: '"' }}";
    var productSku = "{{ product.selected_or_first_available_variant.sku | remove: "'" | remove: '"' }}";
    var productVariantId = "{{ product.selected_variant.id | default: product.variants[0].id }}";
    var productVariantTitle = "{{ product.selected_variant.title | default: product.variants[0].title }}";

    window.dataLayer.push({
      event: "analyzify_productDetail",
      productId: productId,
      productName: productName,
      productPrice: productPrice,
      productBrand: productBrand,
      productCategory: productCollection,
      productType: productType,
      productSku: productSku,
      productVariantId: productVariantId,
      productVariantTitle: productVariantTitle,
      currency: "{{ shop.currency }}",
    });
  };


  {% case template_name %}
  {% when "product" %}
    productPageHandle();
  {% endcase %}

}
appStart();
</script>

Make sure to SAVE the snippet.

Step 4.3: Include the snippet

Now we will include (render) the snippet using the theme.liquid file. Again open the theme edit section.

Find theme.liquid file under the “Layout” section on the left bar. Open the theme.liquid file and search "/head" in the file. Paste the following code just above it:



{% render 'analyzify-product-datalayer.liquid' %}

At final, it should look like in the screenshot. We are ready to move on setting up the purchase data layer.

Step 5: Add purchase data layer on Shopify

We will now add the Purchase data layer into the Order Processing > Additional scripts - just like we have done in Step 2.

Go to your Shopify Admin > Settings (Left bottom) > Checkout and then Navigate to Order Processing > Additional Scripts.

Copy the code below and then paste it right under the Google Tag Manager script that we have recently added.



{% comment %} Purchase data layer v2.1 - part of "Shopify GA4 Kit" by Analyzify
Visit https://analyzify.com/shopify-google-analytics/ga4 for complete tutorial 
{% endcomment %}

{% assign template_name = template.name %}

<script type="text/javascript">
window.dataLayer = window.dataLayer || [];

{% if first_time_accessed and post_purchase_page_accessed != true %}

  var shippingPrice = "{{shipping_price | money_without_currency }}".replace(",", ".");
  var totalPrice = "{{checkout.total_price | money_without_currency }}".replace(",", ".");
  var taxPrice = "{{tax_price | money_without_currency }}".replace(",", ".");
  var orderItemsName = [];
  var orderItemsId = [];
  var orderItemsCategory = [];
  var orderItemsBrand = [];
  var orderItemsType = [];
  var orderItemsPrice = [];
  var orderItemsSku = [];
  var orderItemsvariantId = [];
  var orderItemsQuantity = [];
  var orderItemsvariantTitle = [];
  var totalQuantity = 0;

  {% for line_item in checkout.line_items %}  
      orderItemsName.push("{{ line_item.product.title | remove: "'" | remove: '"'}}");
      orderItemsId.push("{{ line_item.product_id }}");
      orderItemsPrice.push("{{ line_item.price | times: 0.01 }}");
      orderItemsSku.push("{{ line_item.sku | remove: "'" | remove: '"' }}");
      orderItemsQuantity.push("{{ line_item.quantity }}");
      orderItemsvariantId.push("{{ line_item.variant_id }}");
      orderItemsvariantTitle.push("{{ line_item.variant.title }}");
      orderItemsCategory.push("{{ line_item.product.collections.last.title | remove: "'" | remove: '"' }}");
      orderItemsBrand.push("{{ line_item.vendor | remove: "'" | remove: '"' }}");
      orderItemsType.push("{{ line_item.product.type | remove: "'" | remove: '"' }}");
      totalQuantity += {{ line_item.quantity }};
  {% endfor %}

  window.dataLayer.push({  
      page_type: "purchase",
      event: "analyzify_purchase",
      currency: "{{ shop.currency }}",
      totalValue: totalPrice,
      totalValueStatic: totalPrice,
      currencyRate: window.Shopify.currency.rate,
      shipping: shippingPrice,
      tax: taxPrice,
      payment_type: "{{order.transactions[0].gateway}}",
      {% if order.name %}
      transaction_id: "{{order.name | remove: "'" | remove: '"'}}",
      {% else %}
      transaction_id: "{{checkout.id | remove: "'" | remove: '"'}}",
      {% endif %}
      productName: orderItemsName,
      productId: orderItemsId,
      productBrand: orderItemsBrand,
      productCategory: orderItemsCategory,
      productVariantId: orderItemsvariantId,
      productVariantTitle: orderItemsvariantTitle,
      productSku: orderItemsSku,
      productType: orderItemsSku,
      productPrice: orderItemsPrice,
      productQuantity: orderItemsQuantity,
  });

{% endif %}

}
appStart();
</script>

Now our data layers are ready and already should be sending the data pieces and events. The fun part is about to begin!

Section 3: Set up Google Tag Manager Tags & Triggers & Variables

Google Tag Manager is my favorite tool and I am happy to show you around. We will create Tags, Triggers, and Variables. In this section, we will make the variables and events ready on your GTM account.

We will set up GA4 E-commerce events through GTM for your Shopify store. You can use this knowledge and set up other tags as well.

Step 6: Set up e-commerce variables

Do you remember the data layers we added above? Now we will take their variables one by one and then define them into GTM. In this way, your Shopify store data will flow into GTM.

There are too many variables to set. I will do this for one of them, and you will repeat the process for all others.

Step 6.1: Add new variable

Visit Google Tag Manager, Click VARIABLES from the left menu and then ADD NEW.

Step 6.2: Name and choose the Data layer variable

The naming convention is quite important here as we will have too many data layer variables. Name the first variable as: dlv - productId

You can actually choose the name you like - but I strongly recommend following this practice:



“dlv - variable-name”

Step 6.3: Add the DLV name & parameters

So in this case, the variable name will be: dlv - productId, and we will add productId in the Data Layer Variable Name section.

This section is case-sensitive, so make sure to add it totally matching your data layer variables from the code blocks. You can refer to the image below to make sure.

SAVE this one and then move on to create all the rest.

Step 6.4: Create all the variables

Now it is time to create all the variables. You can check your data layer codes to make sure about the variable names.

These are the ones that we should be creating:

totalValue
totalValueStatic
currencyRate
shipping
tax
payment_type
transaction_id
productName
productId
productBrand
productCategory
productVariantId
productVariantTitle
productSku
productType
productPrice
productQuantity
productVariantId
productVariantTitle
currency

The bad news is that you have to create all of them one by one. I could provide you with a pre-built file. I have only created the ones that I will use in the next steps.

Feel free to create the ones that you want to use as well. But I really want you to practice and learn, sorry about it :)

Here is how I do it:

And the final result should look like this:

Step 7: Create GTM triggers for Shopify

We will create the following custom events as triggers:

Product View
Purchase

The triggers will get the data from the custom data layer events that we have recently added on Shopify themes & order processing scripts.

The event section, right under dataLayer.push on our code block refers to the custom event I mention above.



window.dataLayer.push({
page_type: "purchase",
event: "analyzify_purchase"

So our triggers will be custom events named as:

Analyzify Shopify Purchase: analyzify_purchase
Analyzify Shopify Product View: analyzify_productDetail

Here is how you should create the Purchase trigger.

And here is how it should look like in the final:

Step 8: Create the GA4 - View Item e-commerce event

It is time to use the variables and triggers in action. We will create a Google Analytics 4 - View Item event for Shopify.

Step 8.1: Create a GA4 Event

Click Tags > Create a New Tag (Just like in Step 3). Name the tag as GA4 - View Item. This time, choose GA4 Event from the Tag types.

The event name should match GA4’s guideline, so it should be view_item

Step 8.2: Add event parameters

Now we have to attach event parameters. The parameter name should match GA4’s documentation again so it will be item_name instead of product_name.

And the second field is where we will choose the VARIABLES that we have recently added. The brackets refer to variables.

Here is the full list I have used in the image.



'item_name': {{dlv - productName}},
'item_id': {{dlv - productId}},
'item_brand': {{dlv - productBrand}},
'item_category': {{dlv - productCategory}},
'item_variant': {{dlv - productVariantTitle}},
'price': {{dlv - productPrice}},
'quantity': {{dlv - productQuantity}},

We have now completed the Product View event. You can do the same with “Purchase” event if you are seeking a GA4 E-commerce setup. As the topic here is installing GTM on Shopify; I will not lose more time with GA4.

Step 9: Validate the Shopify GTM setup using Google Tag Manager debug mode.

Now we will use Google Tag Manager’s debug mode - just like we have done in Step 3.2. We will try the product view event.

Step 9.1: Test GA4 View Item - Debug Mode

Follow the steps same as Step 3.2 and this time type a product URL instead of the homepage. Once again, make sure to use a theme preview link if you are not using your production theme.

The GTM Debug mode should show the events on the left, and the tags on the right. If you are seeing analyzify_product detail and GA4 View Item tag; it is correctly done and time to celebrate.

Step 9.1: Test GA4 View Item - Tag details

Let’s deep dive here for those who want to understand and debug more. Click the event name on the left and then the tag name on the right. You will not see the details if you don’t click the event name first.

You should be seeing all the parameters that are sent along with this event.

It looks like we are all set. If something went wrong, make sure to double-check your data layers and GTM container. You must have done something wrong while connecting your Shopify store with data layers or the GTM.

This is a bulletproof tutorial. Feel free to challenge me in the comments - and I’m happy to answer and make edits if needed.

FAQ on Shopify & Google Tag Manager Integration

Well, you can imagine we receive tens of questions every day on this topic. I will try to cover the commonly asked questions and answers here. Feel free to ask if you have an additional question on Shopify & GTM topics.

Can I use GTM on Shopify without the Shopify Plus plan?

Yes, you can definitely set up GTM on Shopify with a Shopify Basic or Advanced plan as well. Shopify Plus offers you additional checkout.liquid file - where you can also add the Google Tag Manager snippet on your Shopify Checkout steps. However, checkout.liquid is also now going away with Shopify’s recently launched Shopify Checkout Extensions.

Can I install Google Tag Manager on Shopify Checkout?

Yes but it requires a Shopify Plus plan. While you can set up GTM on Shoify with all plans; editing the checkout process is only available for the Shopify Plus plan - using the checkout.liquid file.
However, Shopify announced that it won’t be possible adding scripts including GTM with the latest Shopify Checkout Extensions updates.

Do I need Shopify data layers for Google Tag Manager?

You can install Google Tag Manager on Shopify without data layers as well but you can not use it much. You need data layers if you want to pass any specific data such as Product ID, name, price, Order ID, etc. The data layers will allow you to pass the parameters with specific tags. You can check the article above to find the full answer with examples.

How can I set up enhanced e-commerce on Shopify using Google Tag Manager?

Enhanced E-commerce is a Universal Analytics feature. You don’t need to install Google Tag Manager on Shopify to use enhanced e-commerce. Shopify’s native Universal Analytics integration already covers it. You can use the tutorial above and Shopify GA4 Kit to set up Google Analytics 4 e-commerce events on Shopify.

What is the difference between Google Tag Manager vs Google Analytics?

Google Analytics is a tracking and reporting tool. You can see your visitor and user behavior data in Google Analytics. Google Tag Manager is a connector between your website and the tracking tools. GTM allows you to set up the tracking scripts easily on your website and pass the relevant data along with them.

Do I need a Shopify app to set up Google Tag Manager?

Technically no. You can install the GTM scripts on Shopify without using an app. This in-depth tutorial is all about setting up GTM without using an app. However, apps like Analyzify offers you more in-depth tracking. The Analyzify data layers cover many other parameters and it offers full e-commerce tracking. Shopify GTM Apps also offer many built-in integrations. So you don’t have to tweak the code and play around with GTM to set up the complete tracking.

I hope it was all helpful! More questions? Send them along through the comments.

Introducing Shopify GA4 Kit - Setup GA4 on Shopify

Erman Küplü — Mon, 04 Apr 2022 09:15:07 +0000

We have prepared an open-source & completely free toolset for Shopify merchants to help them set up GA4 using data layers, Google Tag Manager, and GA4.

This beginner-friendly toolset also provides a downloadable pre-built GTM container that includes the major Google Analytics 4 tags.

Change the GA4 measurement ID and kick things off right away.

Note: This is the updated and enhanced version of our tutorial & code blocks from last year.

2023 August Update
Here are the latest sources about Shopify <> GA4 Integration:
Set up Google Analytics 4 on Shopify with the Official Integration [2023] on Youtube

Set up GA4 on Shopify in 5-mins using Analyzify [Complete Ecommerce Integration] on Youtube

What will Shopify GA4 Kit do?

Shopify GA4 will help you set up GA4 including all the e-commerce features you need for your store.

You don’t need to use any app to secure all that: Just use the code blocks, tutorials, and step-by-step guides we provide and get:

Google Analytics 4 main reports,
Product-level ecommerce reports,
Transactions with the product-level data

How does the Shopify GA4 Kit work?

We have prepared a list of assets for you to set up GA4 on your Shopify store without any app or professional support.

You will see many step-by-step tutorials and video guides to get everything done with ease.

At this point, we should kindly remind you that this is a Do-It-Yourself process which means you will need to get involved with codes.

That’s nothing to worry about, though. It’ll be all about copy-pasting, uploading the assets we provide, and doing the adjustments.

Simply put, you will be:

Creating GTM & GA4 accounts if you don't have any,
Setting up GTM,
Adding data layers (product + purchase),
Downloading the Shopify GA4 Kit's GTM container,
Importing the GTM container into your GTM account,
Changing the GA4 measurement ID on the GTM container,
Activating e-commerce reports on GA4,
Validating the whole setup.

The Shopify GA4 kit will provide you with a GTM & GA4 setup that is decked out with many important reports and capabilities.

Steps to set up GA4 on Shopify using Shopify GA4 Kit

There are several potential methods to set up Google Analytics on Shopify. We prefer executing a setup through GTM because that will give you a great amount of flexibility allowing you to use the triggers and variables for other tags as well.

Here are the steps to follow during the installation. You can also follow our related, in-depth tutorial on Youtube: link

Step 1: Add GTM on Shopify
Our setup works through Google Tag Manager. So, you need to set up GTM on your Shopify store first. You can see how through a separate tutorial here.

Step 2: Get Shopify Purchase data layer (inc. product-level data)
Copy the data layer code to paste it into the checkout scripts on the next page later on.

Visit the following page and get the most up-to-date Shopify purchase data layer. Make sure to copy it properly and move to the next step.

Step 3: Add the data layer to the Shopify checkout page
Paste the code right below your GTM container on Shopify Admin > Checkout > Additional Scripts.

Step 4: Add the product data layer to the Shopify product pages
It is a multi-layered step. You need to

Create a new, empty snippet on your theme
Render that snippet in your theme liquid file
Copy & paste the code block that you see below and SAVE.

Copy the the data layer from the following page: Shopify product data layer

The data layers are perfectly ready for the GTM container. You can check this short video-tutorial if you need a hand here.

Step 5: Download Shopify GA4 Kit's GTM Container(Free)
Download our pre-built Google Tag Manager that includes the following tags:

GA4.01 - All Pages: Google Analytics 4 global configuration tag. It also functions as the "Page View" tag.
GA4.02 - Event - View Item: E-commerce event for product page views. It sends the product-level data into GA4 and allows product-level reports to function.
GA4.03 - Event - Purchase: Core of all e-commerce reports. It sends order-level and product-level data into GA4 and helps with the attribution.

It also includes all related triggers and variables.

Visit the Shopify GA4 Kit page and download the most up-to-date container there.

Step 6: Import GTM Container

Now navigate to Google Tag Manager > Admin > Import and then import the container. You should choose the following options just like you see in the screenshot:

Step 7: Add your GA4 measurement ID
Now get your GA4 measurement ID from your Google Analytics 4 > Admin > Data Streams and then update it in the GTM container.

Note: You can see the complete Youtube video tutorial starting from for the following steps 17:15 - How to Set up Google Analytics 4 on Shopify

Step 8: Pause other GA4 tags on GTM
If you tried to do a GA4 setup earlier, you should pause the previous GA4 tags that you added earlier so as not to cause any double counting.

Step 9: Validate your GA4 setup using GTM's preview mode
A double-check is always a great idea in the world of data analytics. Follow the video below and double-check your setup using both GTM’s preview mode and GA4’s Debug View.

Step 10: Complete your tests and publish
If you pass all the tests, you are ready to publish the GTM container and make the setup live. You can run a test purchase just like we have done on the following video.

I hope all went well for you and you could set up Google Analytics 4 on your Shopify store.

This post is created for Dev.to community as a shorter and more simplified version of our complete tutorial. Sources: GA4 on Shopify - Complete Youtube Video Tutorial

We have also uploaded the tutorial to Vimeo Pro for the ones who want to have an Youtube-free experience: Watch on Vimeo: Shopify GA4 Kit Tutorial

Good-bye Universal Analytics 👋 Next-steps on Google Analytics

Erman Küplü — Mon, 21 Mar 2022 14:28:51 +0000

Not too many people knew the term Universal Analytics a year ago. It has always been known as Google Analytics among all of us, until last year when Google announced the new version: GA4. Universal Analytics (aka. UA) was now a thing of the past!

Not long after, Google even made GA4 the default version - and you now had to make some tweaks to be able to create a Universal Analytics account properly.

Just last week, Google announced that they will be retiring Universal Analytics by July 2023. We all knew this day would come - but it surely arrived a little bit faster than we all thought.

Many people, including professionals, aren’t into GA4 at all - and they keep saying “Where are the standard reports?!”. On the other hand, GA4 offers some exciting new features - and a completely different approach to data collecting.

In this post, I will try to help you understand how GA4 works, how it differs from UA, and what you should do with your own (or your clients’) website and more.

Type your questions in the comments section and I'll either answer them or add them into the post as well!

The differences between GA4 vs. UA

I don’t want this post to be too technical. I will quickly mention the core differences between UA and GA4, and provide you with some links, in case you want to do some more research on your own.

Hit-Based & Event-Based

This is probably the main difference between GA4 and UA - and we can also blame this feature as the reason why your data hasn’t been carried over to GA4. Yes, you heard it right. The data on your UA property won’t be carried over.

UA worked on a hit-based data collection method. There were hit types such as hits, events, social, transactions.

On the other hand, GA4 works on a totally event-based logic. A page-view is an event, a transaction is another event, and the same goes for scroll_depth, form_tracking, etc.

Automatically Collected Events

Another exciting feature: Your Global Site Tag (gtag.js) can now detect and collect some events without having to set up additional tracking through codes or GTM. Some examples for this are:

Form submissions,
Scroll trackings,
Video interactions,
File downloads,
Outbound link clicks, and many others.

In UA, you cannot track these events by default, and you needed to set up additional custom events using custom Global Site Tag codes or through GTM.

Whereas with GA4, you can automatically collect some events by just enabling them from the settings, without touching any code or meddling with GTM.

BigQuery Integration

This may be not the most exciting feature for end-users, but it’s certainly a huge thing for developers and enterprises. GA4 comes with a native BigQuery integration, which means you can import the full data to BigQuery without any limitation.

In UA, you need to have UA-360 to have this feature (which costs $150K/year). In GA4 however, there is not only BigQuery, but a few other UA-360 features that come by default and free as well.

AI & Machine Learning Powered

It is always hard for small business owners to follow and understand their data properly within a sea of reports.

Google Analytics 4 will help business owners to understand their data and give them actionable insights. The AI and ML-powered “Insights” section is visible almost on every page in GA4 and might get more and more useful when you collect more data.

Customization Capabilities

UA was the standard for almost every use case. You could make custom reports and dashboards, but it wasn’t quite likely for an average user to use these features.

GA4 focuses on customization a lot - and allows users to edit almost every piece, including the main menu elements and standard reports. Even the homepage gets more unique every time you view different reports. Here is a rough summary of customization features that GA4 has:

Edit homepage,
Explore section,
Edit left menu & navigation,
Customize events, data, goals.

Many Other new & cool features

Predictive - ML-powered Audiences
Deeper audience integration with Google Ads
Customer lifecycle-framed reporting
Insights and predications powered by artificial intelligence
Explorer - report builders to build all types of custom reports

Action & Migration Plan from UA to GA4

I know you are used to UA - but let’s admit it has run its course. We should start using GA4 immediately, collect data, enable all possible features, and take advantage. Here is the action plan that we suggest:

Parallel tracking (UA & GA4 together)

You don’t need to (and shouldn’t, even) leave UA immediately. You should keep using them together until the moment that GA4 covers all of UA’s features, and you’ve gotten comfortable using it.
So, start using GA4, and don’t touch your existing UA setup.

Create your GA4 property

You don’t need to wait another day for this: Create your GA4 property right now. You can use the GA4 setup assistant so that your UA & GA4 properties will be connected with each other.
Just another kind reminder: Your UA data won’t be carried over, but only some simple settings.

Basic GA4 setup

This is quite easy - we advise that you should just do it now and start collecting some basic data. Add the code for GA4 Global Site Tag directly on your website - to all pages. Alternatively, you can use Google Tag Manager and set up GA4 through GTM as well.
The basic setup will only provide you the default tracking options: page view and a few other automatically collected data. However, the most important piece of your tracking is already there: visitors!

A few quick important settings

Simple yet quick wins to improve your first data:

Activate Google Signals (tutorial),
Set event retention to 14-months(tutorial),
Integrate with Google Ads, Search Console, Google Optimize and Merchant Center if applicable. For data sharing & collecting - earlier is always better.
Mark automatically collected events.

Start learning & customizing GA4

GA4 is a relatively new tool, and it keeps changing every day. I wouldn’t recommend heavily investing in GA4 from day one. Slowly moving your pieces and learning GA4 is a much sounder approach. In the meantime, the product keeps getting better and receives constant updates from the Google team.
You can set a few custom events - that matters the most to you. Such as:

E-commerce tracking for online stores,
Form/conversion tracking for B2B lead focused websites,
Newsletter sign-ups for blogs.

Mark these custom events as conversions, and start tracking important KPIs on your GA4.

Set up your favorite UA reports in GA4 and start using them on a regular basis.

Here is how Google announced the change:

How to Set Up GA4

I can write a whole new article series on this topic if there is a demand, but right now this will just be a quick wrap-up. Let me know in the comments if you wish to have more in-depth tutorials on setting up GA4.

Method 1: Set up GA4 using Global Site Tag

This is the most common way of setting up Google Analytics. It was the same with Universal Analytics - just the code block is different this time.

Go to Google Analytics 4 > “Admin” > “Data Streams”, and click your data stream. Find “Tag Installation”, and you can copy the global site tag code from there.

You will need to paste this code to each page of your website. You can use the header.php code on WordPress, theme.liquid on Shopify, or custom header scripts on your own CMS solution.

Make sure to validate your setup using the RealTime report in GA4.

Method 2: GA4 setup using Google Tag Manager

I have a detailed tutorial on this topic: Tutorial: Setup GA4 on Shopify using GTM. The tutorial is for Shopify, but it will also be applicable to your case if you already have GTM installed on your website.

What will happen to Universal Analytics

The UA will stop processing on July, 2023 but you will still have a change to access your existing data for another 6-months. You can learn more about this on Google's related announcement.

Do you have any questions? Feel free to add to the comments and I'll try my best to answer!

I'm also happy to share some additional resources on this topic:

Why should you build for the Shopify App Store? (+How to Start)

Erman Küplü — Wed, 15 Dec 2021 12:37:25 +0000

I realize more and more that the Shopify market is being overlooked by developer communities. Whereas we have been active on the platform for almost a year now and can’t be happier.

In this post, I will try to give you some reasons why you should give Shopify's App Store a chance and shortly share our story and gainings. Feel free to ask your questions in the comments section, I will do my best to answer.

Here is a quick summary of why this is a great market:

A rapidly growing market with over 1.7 million stores,
%0 commission on Shopify App Store,
84% Shopify Partners revenue growth (a 84% increase year-over-year)
$12.5 billion in revenue in 2020 and that is 4x the revenue of Shopify’s own platform.

Let’s now get into the details.

Shopify Partners’ Ecosystem

It is no secret that Shopify became Shopify because of its partner ecosystem. It is one of the first companies who has an understanding of the value of partners and built an amazing API infrastructure.

There are countless needs in the e-commerce field for merchants. But Shopify didn’t opt for building everything, and Instead, they focused on the core business and left the rest for the partners.

As an example, it is hard to believe that Shopify’s core product is missing too many important features, one of them being “Subscriptions”. You can not add a subscription feature to your e-commerce store if you are not using one of the apps.

Shopify partners’ ecosystem includes the following elements:

And there are many other professionals or agencies that are not officially included in the ecosystem but still work as a “Shopify Developer” or “Shopify Agency”. This helps Shopify grow even more - and make merchants happy because there are 1000’s of professionals or resources available when they need help.

Shopify App Store as a Market

Merchants have a lot of needs - and they constantly search for apps to solve their problems and make their store better.

At the moment, there are 13000+ apps in the app store. And a merchant uses 6 apps on average. It is not hard to build an app - or to be accepted to the app store.

As far as I know, it is one of the rare “app stores” in the world that has 0% commission. Shopify removed its 20% commission this summer. You don’t have to pay any commission if your annual revenue is under $1M.

There are some giant players in the app store as well:

Klaviyo - recently valued at $4B+
Privy - with over $2B+ valuation
Bold Commerce - received $40M+ investment
Oberlo - acquired by Shopify for $15m
and many others.

Of course, the Shopify app store is not only for big players. There are hundreds of independent developers who build on Shopify and achieve double-digit MRRs in such a short amount of time such as Gil and myself.

Shopify Partners Ecosystem Stats - 2024 Update

A lot change since I wrote this post - so I wanted to provide a quick update with the latest information & stats.

The ecosystem kept growing with these impressive numbers:

Shopify reported a total revenue of $7.1 billion for the year 2023, a 26% increase from the previous year.
Shopify’s MRR saw a significant increase to $149 million from $110 million the previous year.
Gross profit dollars grew 28% to $3.5 billion in 2023, compared with $2.8 billion for 2022.
Shopify serves over 700 million buyers in 2024, contributing $319 billion to global ecommerce.

Sources: Shopify Stats 2024 - Shopify Q4 - 2023 Report - Insights from Shopify Annual Reports

Shopify grows, so do partners. There are many more app in the app store. Here is the quote from Shopify's 2023 Annual Report.

Our partner ecosystem helps drive the growth of our merchant base by
extending both the reach and the functionality of the Shopify
platform. As of December 31, 2023, more than 13,000 apps were
available in the Shopify App Store. The partner ecosystem helps drive
the growth of our merchant base, which in turn further accelerates
growth of the ecosystem.

You heard right, there are now 13.000 app on Shopify app store. In my humble opinion, growing competition shouldn't scare you if you are planning to develop apps. Because the opportunities grow with the same speed.

Shopify keeps updating the platform in a lighthing speed. That means lots of new opportunities for partners and developers. As an example, Shopify released Checkout Extensibility feature. It means now the app developers can develop apps that can edit the checkout pages.

Now there are 10s of Checkout Customization Shopify Apps - with more to come.

Most of these apps are new to the Shopify app store and they are still quite successful.

These types of updates also offer a great opportunity for the existing apps. As explained on my latest dev.to post; we made lots of updates on our app, Analyzify - thanks to this wonderful opportunity.

Want to get inspired by some successfull apps? Check out these resources:

[ ] Top 11 Shopify Apps - Shopify Blog
[ ] Best Shopify Apps - Analyzify
[ ] Best Marketing Apps - Shopify App Store

How to build Shopify apps?

I am not a developer myself. However, I have only heard great things about Shopify’s API and how easy it is to build things for Shopify. They don’t have tech-stack requirements.

You can literally build with any programming language and host your app anywhere you like. You will have to use Shopify’s API to authenticate and charge users. Shopify apps can work in an EMBEDDED or INDEPENDENT format that opens in a new tab.

Here’s a GIF for you to see how it looks 👇

As you see on the example, our app Analyzify works in the EMBEDDED format while the other app opens in the new tab. Most apps choose the “New Tab” solution.

We firstly built Analyzify with Ruby & Rails - now we are switching to No-Code & Low-Code stack. I have seen many apps that use the Laravel framework. It is just about your t
aste and capabilities.

Approval Process & Going to Production:

Our app was approved within 5 days. We initially received a rejection because of the wrong use of the payment gateway. We have made the asked changes and it got immediately approved.

I can only say good things about Shopify Partners’ support. They are very helpful and willing to answer the questions you should have. We have also got some support from Shopify developers’ Slack group.

Getting Sales on the Shopify App Store:

The app developers keep giving the same suggestion: “Don’t rely on the app store for the sales”. That’s true: while there are too many searches happening on the app store,you should still look for alternative customer acquisition channels.

At Analyzify, we have only gone for organic channels such as content marketing, video marketing, SEO, and Shopify community forums. Many app developers are using Shopify App Store Ads that work with the PPC model.

Merchants don’t really rely on the App Store, but instead, they search Google. You will find a lot of listicles like “The Best Shopify Apps for X”. You will need to make yourself visible there - and probably make your own list just like we did: Shopify Google Tag Manager Apps.

I also see a lot of app developers who rely on merchants’ communities such as Facebook & Slack Groups, Twitter conversations, Discord Channels, and so on.

Depending on your competition, you might have to be a bit more creative and hard-working here. All will work if you create a good product and make your clients happy. Simple as that.

As in almost every app store, reviews are crucial on the Shopify app store as well. The merchants don’t tend to give reviews for regular apps and experiences. You need to provide exceptional customer support to get proper reviews. The sales will go way higher once you pass 10+ positive reviews.

What kind of apps should you build for Shopify?

Well, that’s a great question that everybody asks. There are several methods to start with:

Serve to Shopify clients. Provide services to them on your domain. That’ll help you understand and get to know them. They will immediately start telling you “Only if I had an app for X”, etc.
Hang out in the Shopify community forums & Reddit & Twitter. Merchants keep asking “Is there an app for X?” or complaining about the apps that they are using.
Study the app store. Check the apps with negative reviews and try to understand if you can make that negative experience better.

Keep reading below - I’ll mention some latest updates from the Shopify ecosystem.

I would also recommend not to fear the competition. Of course, don’t go and create a “Page Builder App” where top developers have 2000+ reviews.

Find a smaller competition and make things better. You will have the advantage of building from scratch and building the things the competitors are too busy to do.

Latest Updates & Opportunities on Shopify World

Shopify keeps opening new developer spaces for partners. They announced a few major upcoming changes in the latest Shopify unite event. You might want to take a closer look at that because the existing Shopify partners are always too busy with their roadmap and clients.

*Online Store 2.0: *
They released a large update on how to build themes.

Online Store 2.0 opens up massive opportunities for developers building themes and apps for Shopify merchants. We’ve rebuilt the online store experience from the ground up, and are introducing a new set of developer tools to help you create amazing experiences for merchants and shoppers.

Theme Store is back again:
Shopify had closed their theme stores but now it is reopened.

Headless Shopify (React!):
Well, of course, they are going after the headless market. They announced Shopify Hydrogen.

Hydrogen's React-based framework for building custom storefronts on Shopify gives you everything you need to start fast, build fast, and deliver the best-personalized shopping experiences.

NFTs:
Shopify is also looking to integrate with the NFT market. They recently released a BETA program for this - only available in the US for now.

Final Words:

I strongly recommend you build something on Shopify depending on your skills. Create an MVP version, watch the market closely and enter when you feel ready.

We have reached 500+ merchants and over $15K MRR only in 8 months. This is huge for us considering it was our first attempt on the Shopify app store. Now we started building more apps and new features for our existing app.

I am more than willing to answer your questions. Leave it in the comments section!

dataLayers & Google Tag Manager & GA4 for Developers

Erman Küplü — Tue, 30 Mar 2021 10:05:20 +0000

I am always amazed by the full-stack developer's knowledge, experience, and learning habits. They use too many tools at the same time and know most of them easy as winking.

One topic I am surprised though is not many developers know about dataLayers, Google Tag Manager; and how they can be a great combination to track the key metrics, funnels and gather a valuable amount of information.

We use dataLayers and Google Tag Manager mostly for analysis, reporting - but even for debugging purposes by tracking user behavior in-depth.

In this post, I will give you a high-level overview of how dataLayers, GTM, and GA4 can be used to track important user metrics and even find the problems!

Have any questions? Ask in the comments and I'll do my best to answer!

Case Study on dataLayers & Google Tag Manager

We have created a complex web application that would take users eight steps to complete their orders because the purchase process required a lot of customization.

The Problem

We had a serious problem. The conversion rate was quite low. We were losing a lot of clients in the funnel.

What We Did

The classic funnel tracking wasn't working for us because the URL wasn't changing at every step. Also, the classic funnel tracking doesn't allow you to pass extra data. So we needed to set up advanced dataLayers and send relevant data on each step. I will walk you through in this case study on:

How we used dataLayers to track important events and collect important information,
How we processed the dataLayers through Google Tag Manager,
How we passed the data into Google Analytics 4,
How we make meaningful FUNNELS to clearly understand bottleneck and user behavior on Google Analytics 4.

Let's get started!

What is a Data Layer?

Data Layer is one of the most essential concepts in the data-analytics world. It is like the main storage for certain events and relevant data where you, developers, or 3rd-party-tools tools can temporarily store data (about user, page content, etc.). You can also watch this video - where I demonstrate what a dataLayer is and how it works.

Let's immediately jump into the example:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'event': 'form_submitted',
 'formLocation': 'footer'
 });
</script>

This could be a simple example of a form-submission event. You could push this dataLayer code once the form is successfully submitted. Nothing will happen if you only do this. You will need to listen & process this data using Google Tag Manager. We will visit in the next steps.

DataLayers can include more complex data as well. Check the example below for Google Analytics 4's addToCart event.

// Measure when a product is added to a shopping cart
dataLayer.push({
  'event': 'add_to_cart',
  'ecommerce': {
    'items': [{
      'item_name': 'Donut Friday Scented T-Shirt', // Name or ID is required.
      'item_id': '67890',
      'price': '33.75',
      'item_brand': 'Google',
      'item_category': 'Apparel',
      'item_category2': 'Mens',
      'item_category3': 'Shirts',
      'item_category4': 'Tshirts',
      'item_variant': 'Black',
      'item_list_name': 'Search Results',
      'item_list_id': 'SR123',
      'index': 1,
      'quantity': '2'
    }]
  }
});

If you want to see another example, you can check out Analyzify Shopify DataLayers.

How we used dataLayers to track complex funnels

Our application has an 8-step complex, multilayered purchase process. That's why we added dataLayers on each step - and also included the relevant information.

Always make sure to create/open a window dataLayer object before you push any data.

<script>
window.dataLayer = window.dataLayer || [];
</script>

1st Step:

dataLayer.push({
            'event': 'signup-steps',
            'step': '1',
            'stepname' : 'GetStarted'
        });

2nd Step:

dataLayer.push({
            'event': 'signup-steps',
            'step': '2',
            'stepname' : 'Address',
                        'client-type':'Personal' //here we are passing the information that we received in the previous step
        });

7th Step:

dataLayer.push({
            'event': 'signup-steps',
            'step': '7',
            'stepname' : 'Payment',
                        'uid': '12345', //the system generated a user ID in the 3rd step and we are now pushing it at each step
                        'payment-type' :'iFrame' // the user chose the payment type in the previous step
        });

8th Step:

dataLayer.push({
            'event': 'signup-steps',
            'step': '8',
            'stepname' : 'iFrame',
                        'uid': '12345',
                        'iFrame-ID' :'iFrame-ID' // the user chose the payment type in the previous step
        });

Final Step:

dataLayer.push({
            'event': 'signup-steps',
            'step': '9',
            'stepname' : 'ThankYou',
                        'uid': '12345',
                        'order-ID' :'order-ID'
        });

We have now pushed all the relevant information and user actions to dataLayer. It is time to process them using Google Tag Manager.

Data Layer & Google Tag Manager

You need to have a Google Tag Manager account and the GTM snippet should be inserted into your application to achieve this result. To understand the process better, you can check out this article where we set up GTM on Shopify. You will see there how to add and debug a GTM container.

Create a custom event trigger on GTM

We first need to create an event trigger in GTM. We named our event as 'event': 'signup-steps' in the dataLayer. So follow along:

Go to Google Tag Manager > Triggers (Left) > Create New

Name the Trigger nicely, and choose CUSTOM EVENT from the Event Types:

Use the exact same name as you pushed into the dataLayer >

Now we have the trigger. So the GTM will listen to this event carefully.

Create Custom Variables on GTM

Now it is time to create variables for the data that we are passing with the dataLayers. In the example above, we have step, stepName, uid, order-ID, iFrame-ID. Each of them should be created a separate custom variable - if we want to pass this data into Google Analytics or another platform.

Go to Google Tag Manager > Variables (Left) > New (Scroll down to see User-Defined Variables)

Similar to the above, we need to choose the Variable type. Choose DATA LAYER VARIABLE and name it correctly. We usually use a prefix dlv - so it looks like this dlv - user ID

Make sure to use the exact same name as in the dataLayer:

In the example here, I have only created one variable. You should create all of them one-by-one.

Google Tag Manager Debug DataLayers & Variables

Only a few times in my career, I could complete and publish the data setup without needing to change it. It never works in the first place :) That's why the debug process is crucial and needs to be done after every data implementation.

Once you are sure the GTM installed on your website >

Go to Google Tag Manager > Click Preview > Enter Your URL

Enter your URL and click START. The window should open your website in the new tab and the "Debugger Connected" should be visible at the right-bottom corner.

Once you see this, go back to the Tag Assistant tab on your browser and you should be seeing something like this >

Now go back to your site and take a few of the actions that you are pushing the dataLayer for. Once you are back to the Tag Assistant, you should be seeing the event names and dataLayer details in the screen >

These are dataLayers, now let's check if the variables we created are in place. Click the event name from the left, and then choose "Variables" from the tabs. You should be seeing the values.

If you are not seeing it this way, most probably you have just misspelled the names. Make sure to double-check with the names in your dataLayers.

Using Variables in GTM

As we have the events and variables, it is time to use them. We can pass that data to other parties such as Google Analytics, Facebook Pixel, and many others. In this example, I will create a Google Analytics 4 Custom Event and pass some of the data we collected.

We will now CREATE a NEW TAG. Go to GTM > Tags > Add New

Choose Google Analytics 4 Event and name the tag properly. If you didn't add the GA4 tag before, you need to configure it first. Very easy, so I will skip that one. You can check this video if you don't know how to add GA4 with GTM.

Choose your configuration and name the event properly.

Now we will add custom variables. We will use EVENT PARAMETERS for event-based data and USER PARAMETERS for user-based data. Make sure to do something similar with the screenshot. A quick tip - when you write {{ on the right side - the variables will be listed so that you can choose the ones that you just created.

Make sure that it looks like this. The parameters name on the left and variable names on the right >

It is not done yet! We need to choose the trigger. We should choose the custom event we have created above so that this event will only be triggered when the expected action happens.

Click this >

And then choose the trigger you recently created >

Now all should be set, SAVE and then Publish the container. Submit from the right-top corner and then Publish.

Debug One Last Time!

I mentioned above. Data setup mostly doesn't work the first time. After you publish the changes, click PREVIEW mode again and type your URL. Do the desired actions and then you should be seeing tags, triggers, variables just like below >

Google Analytics 4 Custom Events & Funnels

Even though GA4 is quite new, I have been fortunate to work with Google Analytics 4 intensely because of our GTM App for Shopify. GA4 is still under development and has some bugs but I love it and every day even more.

GA4 has many great features, and I mentioned the most important GA4 qualities in a blog post.

Now I will show you how to add custom events, parameters, data to GA4 and make funnels.

GA4 Custom Event Parameters

Make sure to register GA4 and add the global tag through GTM first. If you are not seeing a similar screen as below, you are probably not in Google Analytics 4 - but in the old one.
Click Custom Definitions > Create Custom Dimensions

To be able to achieve this, you need to run some test user interaction so that GA4 receives your event data. If you don't see your new data-name here; wait for some time and try again. It can also be visible the next day.

Once you complete this step, you are sending all the data to GA4 perfectly and you are ready to create your amazing funnels. I will have another article on that so stay tuned!

Any questions? Did you face any problems? More than happy to answer.

How to set up Google Tag Manager on Shopify (+2022 Updates)

Erman Küplü — Tue, 02 Mar 2021 09:23:06 +0000

Google Tag Manager(also known as GTM) is one of the most influential and useful tools for marketers, entrepreneurs, developers, and many others. However, Shopify doesn't have a native integration for GTM and it is a little tricky to set it up.

Update (11.12.2022) 🎉 We are excited to announce the release of our updated guide on setting up Google Tag Manager on Shopify. This new version includes the latest updates and improved methods for setting up Google Tag Manager on your Shopify store. To access the guide, please visit the following link: How to set up Google Tag Manager on Shopify.

We hope this guide will help you easily implement Tag Manager on your store and improve your tracking and analysis capabilities.

Update (17.04.2022) We have made an in-depth update on our tutorial series and also included data layers for product - purchase pages, GTM container and more. Check out our latest tutorial: Set up GTM on Shopify [2022 Edition].

Update (23.03.2021) This tutorial explains how to add GTM into Shopify directly. We have made a new - free Shopify - Google Tag Manager video course series on Youtube. Check out the video series if you want to further expand your data-analytics setup.

Why use Google Tag Manager on Shopify

Google Tag Manager allows us to manage all the marketing and tracking tags from one place, deploy and test quickly. Without using the GTM, marketers need developers to set up the tags - and even it isn't very easy for developers to set up certain tags in certain conditions. As a concrete example, you need to add the Google Analytics Global tag to all pages, the purchase event to thank you page, the form submission event to be triggered once the form is submitted correctly. All of them can be done quickly in GTM within minutes. I can count the benefits of GTM for hours, but the topic is now how to add the Google Tag Manager into your Shopify store.

Shopify - Google Tag Manager Integration

Shopify doesn't have a native integration with the GTM. There are two methods to add the Google Tag Manager container (code) into the Shopify stores. We will add the code manually into your Shopify store's theme and checkout files in the first method. In the second method, we will review a few Shopify apps that do the integration for you.

Method 1: Adding GTM into the Shopify Theme

It might not sound effortless, but it is actually quite applicable. We will walk you through the steps, and you will easily be able to add Google Tag Manager to your Shopify store. Follow the steps below, and don't miss the last step. Otherwise, the code won't be triggered on your thank you page, which is very important.

Step 1: Get your GTM Container Code

Register for Google Tag Manager if you are not registered already. You can follow this simple tutorial if you don't have an account yet. Once you are logged in to your account, click your GTM ID at the top of the screen and copy the given code below.

Copy the first code. Don't mind about the second code. That's rarely needed, and it will complicate the setup of your store. Once you make sure to copy the first container code - move to the second code.

Step 2: Insert GTM code into Your Theme Files

As we have your Google Tag Manager Container code in place, it is now time to place it into your Shopify store. You need to be logged in to your Shopify admin to do so.
Shopify Admin > Online Store (Left Menu) > Actions (Near your theme name) > Edit Code

Search "theme.liquid" on the left search bar and find

tag within the file. Paste the GTM container right below the tag.

Now the GTM code will be shown on every page in your store except for the checkout processing and thank-you pages.

An important note: If you are using a page builder plugin, you need to paste the code within those liquid files.

Step 3: Insert GTM code into Your Checkout Processing Page

Shopify's basic plans won't allow you to edit the checkout process and add codes there. But you can still add codes on the "order completed" page. This is a crucial step because you want to track purchases in your Shopify store.
Follow the steps below to find the Order Processing section.
Shopify Admin > Settings > Checkout > Order Processing Section
and then paste your GTM container code there.

Now we are set. The GTM will work on your store pages and also on the thank you page. Let us remind you again that it won't work in the checkout steps (where the user enters their credit card and address information) - but it will still work on the order completed page.

Step 4: Validate if the GTM is working

With the data-related works, you always have to double-check and validate. GTM has a great tool called Debugger (also known as Preview & Debug Tool or Google Tag Assistant) to show you if the GTM works on your store and which tags/triggers are working.

Go back to your Google Tag Manager interface and find PREVIEW from the right-top corner.
Enter your store's URL and click Start
It should open your store in a new window. Make sure that your browser is not blocking the pop-up. If yes, firstly allow it. You should see DEBUGGER CONNECTED at the right-bottom of the screen.
Go back to Tag Assistant, and you should be seeing the "CONNECTED" message here and the TAGS in your GTM account.

Method 2: Using a Shopify App for Google Tag Manager

The second option is using an app to add Google Tag Manager into your Shopify store. There are several apps in the market.

If you only need the GTM container, you do not need to use an app. Method 1 will work great for you. The apps are doing the same steps that we walked you through to make the GTM working on your store. If you are looking for an in-depth tracking setup, then we definitely recommend using an app. Because the apps will also insert dataLayers into your store, allowing you to track more actions such as product impressions, add-to-cart events, search listing actions, checkout process, remove from cart, user ID, and many others.

The app we developed, Analyzify does the following (and even more) for your store:

Add advanced dataLayers to track all essential actions
Provides you a complete GTM container that has all the triggers, tags, and many others,
Sets up Google Analytics 4 with all-important e-commerce features store (Learn more about GA4 for Shopify)
Provides custom setup support(at no extra cost),
Creates precious user metrics such as User ID, User Recency, User Type, User Lifetime value, and many others,
Sets up Facebook Pixel and all related events,
Sets up Google Ads conversion tracking and all related remarketing events

Analyzify is not the only solution in the Shopify app store. There are other cool apps as well. Make sure to check each of them before you make your decision!

Google Tag Manager without Shopify Plus

We keep receiving this question from Shopify community: "Can I use Google Tag Manager without Shopify Plus plan?" The answer is short: you definitely can - and 1000s of Shopify merchants are already using GTM with regular Shopify plans. There will only be a limitation:

You will not be able to add your GTM container into checkout pages as you don't have the checkout.liquid file. However, your GTM setup will still work on all other pages + order complete pages. That means you can still track 95% of your page visits including the most important e-commerce events.

In other words, if you are running a Shopify Plus store; your GTM script will be running during the visitor's checkout process as well. Without the Shopify Plus plan, it will be interrupted during the checkout steps (where the user enters their credit card, address, etc information) and then be loaded back on the thank you page.

FAQ on Shopify & Google Tag Manager Integration

I wanted to collect here some of the most commonly asked questions on Shopify & GTM topic.

How can I set up enhanced e-commmerce on Shopify using Google Tag Manager?

Shopify merchants are often confused about the enhanced e-commmerce (aka EEC) topic. EEC is actually a feature of Google Universal Analytics and it doesn't mean a full e-commerce tracking. Google Ads or Google Analytics 4 doesn't have enhanced e-commerce tracking; they have their own terms for the same reports. As for the question, you can not do a complete enhanced e-commerce setup without a Shopify Plus plan because you will miss the checkout steps. For a complete e-commerce tracking using Google Tag Manager; we would strongly recommend using: Analyzify: GTM & GA4 App for Shopify.

How to track Shopify checkout steps using GTM?

Well, this is only possible if you are on a Shopify Plus plan as explained in-depth above. You won't be able to add a code to the checkout steps on Shopify without having to access to checkout.liquid file.

How to track Add To Cart event with Google Tag Manager?

It is relatively a complex setup as "Add to Cart" scripts differ from store to store. We recommend using an app to have an accurate solution on this. As Analyzify, we provide a custom development support to make "Add to Cart" tracking work properly on Shopify stores.

Does Shopify have GTM data layers?

Shopify doesn't have the data layers by default. However, there are open-source solutions like Analyzify Shopify data layers that you can use.

What about Shopify Google Tag Manager apps?

The apps will provide you a more in-depth setup, data layers, pre-built Google Tag Manager container, and support. We would strongly recommend using one of the Shopify GTM apps especially if you are spending good amount of marketing dollars. Your reporting and tracking will get better and it should help with your ROI.

Final Words on Usage of GTM on Shopify

We only walked through the installation and setup process in this tutorial. GTM is powerful and beneficial. You should research more and learn better to take advantage of it in the best possible way.

How to set up Google Analytics 4 on Shopify

Erman Küplü — Tue, 02 Feb 2021 11:59:39 +0000

In today's data-driven world, e-commerce businesses rely heavily on analytics to make informed decisions, optimize user experience, and drive sales.

Shopify merchants invest significant resources in digital ads to attract customers and drive sales.

However, without accurate measurement and data analytics, optimizing ad performance and maximizing return on investment (ROI) is impossible. GA4 offers quite important features for Ads measurements and integrations.

Google Analytics has long been a go-to tool for website owners and digital marketers to gain insights into user behavior and website performance. With the introduction of Google Analytics 4 (GA4), a new era of data analytics has begun, bringing many new features and opportunities for e-commerce businesses.

As a Shopify merchant, you may know that integrating GA4 with your online store is essential for

tracking key e-commerce events,
understanding customer behavior,
optimizing your marketing efforts,
analyzing your product and collection performances.

However, the transition to GA4 and its integration with Shopify has not been without challenges.

In this comprehensive guide, we'll explore the ins and outs of Shopify GA4 integration, discuss the challenges merchants face, and provide solutions to help you make the most of GA4's powerful analytics capabilities. Whether you're new to GA4 or looking to enhance your existing setup, this guide will equip you with the knowledge you need to succeed in the competitive e-commerce landscape.

Importance of Proper GA4 Setup

Setting up GA4 properly is the cornerstone of successful ad optimization. It provides valuable insights into customer preferences, ad engagement, and conversion rates, enabling merchants to optimize their marketing campaigns and allocate ad spending effectively.

With GA4, you can access a wealth of data, including real-time user interactions, conversion tracking, and detailed audience segmentation. By leveraging these insights and ensuring proper GA4 setup, you can tailor your ads to target the right audience, improve ad creatives, and ultimately increase ROI.

In the following chapters, we'll delve deeper into GA4, explore its features, and guide you through the various methods of setting up GA4 integration with Shopify. We'll also discuss your challenges and provide solutions to ensure seamless and accurate data tracking.

Let's begin our journey into Shopify GA4 integration and unlock the potential of data-driven ad optimization through proper setup!

Overview of Google Analytics 4 (GA4)

What is GA4?

Google Analytics 4, also known as GA4, is the new and default version of Google Analytics. It represents a significant update to the platform, introducing new features and capabilities designed to help businesses better understand user behavior, track key e-commerce events, and optimize marketing efforts.

GA4 was introduced as a response to the evolving needs of businesses in the digital age. It offers a more holistic view of the customer journey, integrating data from multiple touchpoints, including websites and mobile apps. With GA4, businesses can access real-time insights, advanced audience segmentation, and powerful automation features.

Key Features and Benefits for E-Commerce

GA4 brings several key features and benefits that are particularly valuable for e-commerce businesses:

Event Tracking: GA4 allows for more flexible and detailed event tracking, enabling businesses to measure interactions such as "add to cart," "view item list," "purchase item," and more. Custom events can also be defined to track specific actions unique to the business.
Enhanced Reporting: GA4 provides comprehensive and customizable reports that offer valuable insights into user behavior, conversion paths, and marketing campaign performance. These reports help businesses identify trends, opportunities, and areas for improvement.

Audience Segmentation: GA4 enables businesses to create and analyze audience segments based on various criteria, such as demographics, behavior, and interests. This allows for more targeted marketing and personalized experiences.
Predictive Analytics: GA4 uses machine learning to provide predictive analytics, helping businesses forecast customer behavior and identify potential growth opportunities.
Cross-Platform Tracking: GA4 allows seamless tracking across websites and mobile apps, providing a unified view of the customer journey across different devices and platforms.

While GA4 brings exciting new possibilities, it also comes with challenges for Shopify merchants looking to integrate GA4 with their online stores. In the next chapter, we'll delve into setting up GA4 integration with Shopify, discuss various integration methods, and address the challenges and limitations merchants may encounter.

Setting Up GA4 Integration with Shopify

Let's continue our journey into Shopify GA4 integration and explore how to set up GA4 to unlock its full potential for your e-commerce business!

Shopify GA4 Setup Methods

We will try to cover all possible Shopify GA4 setup methods so that you can make your own mind.

Manual Integration with GA4 Kit

For merchants who prefer a hands-on approach, GA4 can be integrated manually using the GA4 Kit, an open-source solution developed by the Analyzify team for the Shopify community. The GA4 Kit provides data layers, a Google Tag Manager container, and other resources to facilitate GA4 integration. It has already been used by over 10,000 merchants. This method requires technical knowledge and careful implementation to ensure accurate tracking of e-commerce events.

It includes data layers, pre-built and ready-to-go GTM container and in-depth tutorials. Visit the following link to get most up-to-date information: GA4 Setup on Shopify

You can also follow the step-by-step tutorial through the following video:

Shopify GA4 Apps

To simplify the integration process, there are various Shopify GA4 Apps available, each with its own set of features and benefits. Merchants are encouraged to explore different options to find the app that best meets their needs.

One standout app is Analyzify, which offers comprehensive GA4 integration with Shopify. Analyzify has received nearly 200 positive reviews with a 5.0 average score on the Shopify App Store. Merchants love Analyzify not only because of its perfect software but also because of its great support. The Analyzify team doesn't only provide support for their own software but also goes above and beyond to help merchants with Google Ads, Google Analytics, Google Tag Manager, data layers, and many other specific problems.

Pros of Analyzify:

Professional support
In-depth data tracking and reporting
Professional implementation support
GA4 education resources
Google Ads integration
High review count and positive feedback \

Cons of Analyzify:

Cost (paid solution)
Using an extra software

Shopify's Native GA4 Integration

In March 2023, Shopify introduced native GA4 integration through the Google Sales Channel. While this integration simplifies the setup process, it has limitations and does not cover all important e-commerce events.

Pros of Native Integration:

Free to use
Easy to integrate
No additional software required

Cons of Native Integration:

Missing some major events and parameters
No customization opportunity
No data layers
No professional support
Reported inaccuracy for some events

Making the Right GA4 Integration Choice for Your Shopify Store

Ultimately, the choice between manual integration with GA4 Kit, Shopify GA4 Apps, and native integration depends on your business needs and technical expertise. Professional support, customization, and accurate data collection are key considerations when selecting a GA4 integration method.

In the next chapter, we'll discuss how to leverage GA4 reports to optimize user experience and ad ROI, and how tools like Analyzify can simplify reporting and provide valuable insights.

Let's continue our journey into the world of Shopify GA4 integration and explore how to make the most of GA4's powerful analytics capabilities!

GA4 Ecommerce Reports for Shopify Merchants

GA4 reports provide a wealth of data that can be used to make strategic decisions for your e-commerce business. By analyzing these reports, you can gain insights into your audience demographics, product performance, purchase behavior, revenue sources, user retention, and technological preferences.

The key to success is using this data to inform your marketing and advertising efforts, optimize user experience, and drive revenue growth.

As a Shopify merchant, you have the opportunity to leverage GA4's powerful analytics capabilities to better understand your customers and optimize your business. By setting up GA4 integration properly and utilizing the available reports, you can gain a competitive edge in the e-commerce landscape and achieve your business goals.

Constantly analyzing your store's data is essential to making informed decisions and optimizing your marketing efforts. Google Analytics 4 (GA4) offers a suite of important and useful reports for e-commerce stores, providing insights that can help answer critical questions about your business.

In this section, we'll take a closer look at some of the most significant Google Analytics 4 e-commerce reports and how they can provide valuable insights to Shopify merchants.

GA4 Demographics: Understanding Your Audience

The GA4 Demographics report provides insights into your customers' country, region, city, language, age, and gender. Understanding the demographics of your audience is key to engaging with the most important segments effectively.

Key Questions Answered:

Who are my website visitors?
What are their age, gender, and interests?

Strategic Decisions:

Compare your audience demographics with your target audience for advertising.
Tailor your marketing efforts to engage the most important audience segments.

GA4 E-commerce Product Performance: Evaluating Product Success

The GA4 E-commerce Product Performance report offers detailed information about how your products are performing, including sales, revenue, and cart addition rate.

Key Questions Answered:

How are my products performing?
Which products/categories are most popular or underperforming?
Which products should I consider adjusting the price for?

Strategic Decisions:

Analyze product performance metrics and make changes to product mix and pricing strategy.
Identify opportunities to promote popular products and address underperforming ones.

GA4 E-commerce Purchases: Tracking Transactions and Behavior

The GA4 E-commerce Purchases report tracks e-commerce transactions, including add-to-carts, purchase-to-view rate, items purchased, purchase revenue, and session conversion rate.

Key Questions Answered:

What is the purchase behavior of my customers?
Which products are my customers buying, and how often?

Strategic Decisions:

Understand customer purchase behavior and adjust e-commerce strategy accordingly.
Identify patterns in customer behavior to inform marketing and promotional efforts.

GA4 Monetization: Analyzing Revenue Sources

The GA4 Monetization report shows revenue from e-commerce, subscription, and ad sources, helping you understand what is driving revenue for your brand.

Key Questions Answered:

How much revenue do I get from my website?
Which products or sources generate the most revenue?

Strategic Decisions:

Optimize monetization strategy based on revenue sources and performance.
Evaluate ad campaigns and adjust marketing efforts to maximize revenue.

GA4 Retention: Measuring User Engagement Over Time

The GA4 Retention report tracks user behavior and engagement over time, providing data on the number of users who return to your website or app after their initial visit.

Key Questions Answered:

How many users are returning after their first visit?
How often do customers return, and how long do they stay on the pages?

Strategic Decisions:

Identify areas for improvement in customer experience to increase user engagement and retention.
Evaluate the effectiveness of user acquisition strategies and adjust as needed.

GA4 Tech Overview: Assessing Technological Preferences

The GA4 Tech Overview report provides insights into your audience's technological preferences, including browser, device type, operating system, and more. It also shows engagement sessions and engagement rate.

Key Questions Answered:

Is my website user-friendly across different platforms and devices?
What are the operating systems, browsers, and device categories used by my visitors?

Strategic Decisions:

Improve website performance and compatibility across different browsers and devices.
Address

technical issues that may be impacting user engagement and conversion rates.

Simplified Reporting Interface and Educational Resources

Tools like Analyzify simplify the reporting process by providing a user-friendly interface that displays the most important GA4 and Google Ads reports in one screen. Analyzify also offers educational videos to help you learn how to use GA4 and Google Ads reports to better understand user behavior and optimize your ads.

Setting Up GA4 Property

If you don't have a GA4 property, you can follow the steps below and set it up.

For the new accounts:

You will see Google Analytics 4 as a default option if you want to create an account now. However, there is an Advanced Setting that allows you to create both GA4 and Universal Analytics. Go to the "Create Google Analytics Account" screen and find the "Advanced" setting - kindly check the GIF below:

For the existing accounts:

Upgrade your current account. It won't make you lose any data, don't worry about it. It is actually not "an upgrade"; it will just create a new GA4 account attached to your existing UA account.

After you do this, you will find your new GA4 account; under your properties at the top menu.

Get the GA4 Global Tag

As you have the account now, it is time to get the new global tag and insert it into your Shopify store.
Find your new GA account in your Google Analytics, and then > Click Admin > Data Streams > Click the Tag > And then find Global Tag and copy the full code

Technical Overview of Shopify GA4 Integration

In this section, we'll provide a technical overview of Shopify GA4 integration, covering key components such as data layers, GA4 e-commerce tracking, and GA4 events. Understanding these technical aspects is essential for ensuring accurate data tracking and making the most of GA4's powerful analytics capabilities.

Data Layers

Data layers are a fundamental component of GA4 integration, serving as a structured way to pass information from your Shopify store to Google Analytics. Data layers act as an intermediary, allowing you to collect and organize data about user interactions, e-commerce events, and other important information. By defining and configuring data layers, you can customize the data you send to GA4 and gain deeper insights into user behavior.

GA4 E-commerce Tracking

GA4 e-commerce tracking enables you to monitor and analyze e-commerce activities on your Shopify store. With GA4 e-commerce tracking, you can track key metrics such as revenue, transactions, product performance, and conversion rates. GA4 provides a comprehensive view of the customer journey, from product discovery to purchase, helping you optimize the shopping experience and drive sales.

GA4 Events

GA4 events are user interactions or activities that you can track on your Shopify store. These events provide valuable information about how users engage with your website and products. Some of the main GA4 events relevant to e-commerce businesses include:

Purchase: Tracks completed transactions and captures details such as revenue, quantity, and product information.
Add to Cart: Monitors when users add products to their shopping carts, providing insights into product interest and potential sales.
View Item: Records when users view product detail pages, helping you understand product visibility and engagement.
Begin Checkout: Captures when users initiate the checkout process, allowing you to analyze checkout behavior and identify potential barriers to purchase.
View Item List: Tracks when users view a list of products, such as a category or collection page, providing insights into product discovery.
Select Item: Monitors when users select a product from a list, capturing user interactions with product listings.
Add Payment Info: Records when users enter payment information during the checkout process, helping you analyze payment behavior.

These events, along with other custom events you define, provide a wealth of data that you can use to analyze user behavior, optimize the shopping experience, and improve e-commerce performance.

Frequently Asked Questions

What is GA4, and how is it different from Universal Analytics (UA)?

GA4, or Google Analytics 4, is the latest version of Google Analytics. Unlike UA (Universal Analytics), GA4 offers event-based tracking, cross-platform tracking, improved AI-powered insights, and enhanced privacy features. GA4 does not have a dedicated "Enhanced E-commerce" section like UA but provides powerful e-commerce reports.

How do I set up GA4 integration with my Shopify store?

You can set up GA4 integration with your Shopify store using manual integration with GA4 Kit, a Shopify GA4 App like Analyzify, or Shopify's native GA4 integration. Each method has its own advantages and considerations, so choose the one that best fits your needs.

What are data layers in GA4?

Data layers are a structured way to pass information from your Shopify store to Google Analytics. They act as an intermediary for collecting and organizing data about user interactions and e-commerce events, allowing you to customize the data sent to GA4.

What are the key GA4 events I should track for my e-commerce store?

Key GA4 events for e-commerce stores include Purchase, Add to Cart, View Item, Begin Checkout, View Item List, Select Item, and Add Payment Info. These events provide insights into user behavior, product performance, and the customer journey.

Can I track customer demographics with GA4?

Yes, GA4 provides a Demographics report that offers insights into your customers' country, region, city, language, age, and gender. This information helps you understand your audience and tailor your marketing efforts.

How can I use GA4 reports to optimize my marketing campaigns?

GA4 reports provide data on user behavior, product performance, conversion rates, and more. By analyzing these reports, you can identify trends, optimize user experience, tailor your marketing campaigns, and improve advertising ROI.

Can I track revenue and transactions with GA4?

Yes, GA4 e-commerce tracking enables you to monitor revenue, transactions, product performance, and other key metrics. This information helps you evaluate sales performance and make informed business decisions.

Can GA4 help me improve user retention?

Yes, GA4's Retention report tracks user engagement over time, providing data on returning users and the duration of their engagement. By analyzing this report, you can identify areas for improvement in customer experience and increase user retention.

Is GA4 compatible with different devices and browsers?

GA4 is designed to be compatible with different devices (desktop, mobile, tablet) and browsers. The GA4 Tech Overview report provides insights into your audience's technological preferences, allowing you to optimize your website's performance across platforms.

Is GA4 integration with Shopify free?

Shopify's native GA4 integration is free, but third-party Shopify GA4 Apps like Analyzify may have associated costs. Manual integration with GA4 Kit is an open-source solution developed by the Analyzify team and is free to use.

What are the advantages of using Analyzify over Shopify's native GA4 integration?

Analyzify offers several advantages over Shopify's native GA4 integration, including:

Professional support: Analyzify provides dedicated support for their software and helps merchants with Google Ads, Google Analytics, Google Tag Manager, data layers, and more.
In-depth data: Analyzify offers super in-depth data tracking, including additional events and parameters not covered by the native integration.
Customization: Analyzify allows for customization and professional implementation support, catering to merchants' specific needs.
GA4 education: Analyzify offers educational resources to help merchants understand and utilize GA4 effectively.
Google Ads integration: Analyzify provides integration with Google Ads, including enhanced conversions through Google Tag Manager.

12. Are there any downsides to using Analyzify instead of Shopify's native GA4 integration?

While Analyzify offers many advantages, there are a few considerations to keep in mind:

Cost: Analyzify is a paid solution, whereas Shopify's native GA4 integration is free.
Additional software: Using Analyzify requires installing an additional app on your Shopify store.

It's important to weigh the pros and cons of each option and choose the one that best aligns with your business needs and goals.

Conclusion

In this guide, we explored the importance of proper GA4 integration with Shopify, the various setup methods available, and the challenges and considerations merchants may face. We highlighted the benefits of using GA4 for data tracking and reporting and discussed how tools like Analyzify can enhance the integration process.

Accurate and actionable data is essential for success in the competitive e-commerce landscape.
Google Analytics 4 (GA4) offers valuable insights through powerful reports on audience, product performance, purchase behavior, revenue sources, and user retention.
Proper setup of GA4 integration with your Shopify store is crucial for accurate data tracking.
Merchants can choose between manual integration with GA4 Kit, Shopify GA4 Apps (e.g., Analyzify), or Shopify's native GA4 integration.
GA4 reports empower merchants to:
- Optimize marketing and advertising efforts.
- Tailor campaigns to reach the right audience segments.
- Evaluate product performance and uncover growth opportunities.
- Enhance user experience and improve customer retention.
- Maximize advertising ROI.
You can't optimize what you don't measure correctly—GA4 provides the tools to measure, analyze, and optimize with confidence.
Leveraging GA4's analytics capabilities can help merchants navigate challenges and achieve their business goals.

Thank you for joining us on this journey into the world of Shopify GA4 integration. We hope this guide has equipped you with the knowledge and resources you need to unlock the full potential of GA4 and drive success for your business.