You are viewing the v1 Nacelle Docs for existing merchants.New merchants can find the V2 docs here: nacelle.com/docs.

# Benefits of Google Analytics 4

Google Analytics 4 comes with many eCommerce specific events and will allow you to track the popularity of products and collections as well the impact of discounts on user interactions with your store.

# List of new eCommerce specific events:

  • view_item_list -> Send an event when the user is presented with a collection of products
  • view_item -> Send an event when the user is presented with a product details page
  • select_item -> Send an event when the user selects a product in a search page or box
  • view_promotion -> Send an event when the user is presented with a discount (requires discount integration with your headless store)
  • select_promotion -> Send an event when the user selects a discount (requires discount integration with your headless store)
  • add_to_cart -> Send an event when the user adds a product to the cart
  • remove_from_cart -> Send an event when the user removes a product from the cart
  • begin_checkout -> Send an event when the user adds a product to the cart
  • add_payment_info -> Send an event when the user adds payment info (should be set up outside of the headless store)
  • add_shipping_info -> Send an event when the user adds shipping info (should be set up outside of the headless store)
  • purchase -> Send an event when the user completes a purchase (should be set up outside of the headless store)
  • refund -> Send an event when the user requests a refund (should be set up outside of the headless store)

For more details about Google analytics 4, please visit their documentation (opens new window)

# Migration steps

Upgrading a headless storefront to send the newly available events will require some changes in the code. If you are using the Next Starter Kit or the Nuxt Starter Kit, you will be able to take advantage of the EventDispatcher component in order to update how each event is fired.

To see a full example of how it works, please visit our latest version of the Nuxt Starter Kit (opens new window)

# Steps

First, update the EventDispatcher component to account for the new events by adding cases to the reducer (for react) or to the log watcher (for vue).

Then add the appropriate methods for each of the new events, and update the already existing events to use google analytics 4 events instead of universal events.

Finally, add the new events to the queue by dispatching those new events in the appropriate location in the code.