Integrating GA E-commerce Extensions in SPAs

Google Analytics (GA) e-commerce extensions are crucial tools for capturing detailed analytics about user interactions and transactions within e-commerce platforms. By implementing these extensions, developers can obtain valuable insights into user behaviors, conversion rates, and overall effectiveness of their marketing efforts, enabling data-driven decision-making to optimize their e-commerce strategies. 

In this blog article we will provide a guide through the process of integrating GA e-commerce extensions using the react-ga4 library in a React application, as we had to do for several of our projects. Before jumping to the solution itself, let's discuss some basic concepts for GA4 e-commerce integration.

Introduction to GA E-commerce Extensions

When working with GA e-commerce extensions, tracking the right events is fundamental to gaining meaningful insights. Here are four core events crucial for e-commerce analytics:

• View Item: This event is triggered when a user views the details of a product. Tracking this event helps to analyze which products are attracting the most attention, providing insights into consumer preferences and product visibility.
• Add to Cart: When a user adds a product to their shopping cart, this event is recorded. This action is a strong indicator of purchasing intent.
• Begin Checkout: This event is crucial as it marks the start of the checkout process. Tracking this event allows businesses to gauge how many users move from adding items to their cart to actually initiating the purchase process.
• Purchase: The completion of a purchase is captured by this event. It’s essential for directly measuring revenue and the overall effectiveness of the conversion funnel.

Knowing these basics, now let's jump to the solution.

Solution

Integrating react-ga4

Since we are going to use react-ga4 library, the first step we need to do is installing it via npm or yarn.

Then, we need to initialize it in our code (generally, this is done in the root application file).

Now, let's explore how events need to be structured so they can be submitted correctly.

Event structure

Each GA event sent from a React application using react-ga4 generally contains several key parts:

• Category: This is a broad grouping used to categorize what types of interactions the event represents (e.g., "E-commerce").
• Action: This describes the type of interaction taking place (e.g., "Add to Cart").
• Label (optional): Provides additional context for the event, which can be useful for further segmentation in analytics reports.
• Value (optional): A numeric value associated with the event, typically used to quantify the significance of an event (e.g., monetary value).
• Items: An array of objects, where each object represents an individual item involved in the event.

The items array is a crucial part of the event data structure, especially for e-commerce tracking. It provides detailed information about each product involved in an event. Here’s what each object in the items array typically contains:

• item_name: The name of the product.
• item_id: A unique identifier for the product, such as a SKU or inventory ID.
• price: The price of the product.
• quantity: The number of units involved in the event.
• item_category (optional): The category to which the product belongs, helping to segment products into groups.
• item_variant (optional): Details about variations of the product, like size or color.

Now, let's show how we can trigger each event by using the aforementioned structure

View item

When a user views an item, we need invoke gtag function as following

Add to cart

For adding an item to the cart, the event looks like this:

Begin checkout

The beginning of the checkout process is tracked as:

Purchase

A completed purchase might be sent as:

The result

After implementing these events properly, we will be able to use the full power of the GA console (as shown below) in the context of our sales processes. Each of these data points allows for deep analysis, helping to understand customer behavior, optimize our sales funnels, and enhance overall business strategies.

Conclusion

Integrating GA e-commerce extensions with react-ga4 in a React application allows developers to track user interactions effectively. In this article we've shown how event tracking for e-commerce activities can be set up. This enables product and engineering teams to gather valuable data to optimize e-commerce strategies and enhance user experience, ultimately driving better business outcomes.