Documentation
Feedback
Guides
Storefront Development

Storefront Development
Store FrameworkGoogle Tag Manager
Setting up Google Tag Manager
In this guide, you will learn how to track and analyze data from your store using Google Analytics 4

In this guide, you will learn how to track and analyze data from your store using Google Analytics 4. Specifically, you will:

  • Set up GA4 events by downloading and importing a container file, adding necessary tags, triggers, and variables, and editing the Measurement ID field with your Google tag ID.

  • Test that the GA4 Configuration tag is firing correctly on every page and ensure that the GA4 Event tags accurately track user actions such as viewing a product or adding a product to the cart.

  • Verify that the events are arriving and the reports are being filled with data by accessing the Google Analytics' DebugView and Reports.

  • Use the available events that Pixel Apps can listen to and new events that GA4 has introduced to start tracking various user actions such as product impressions, add to cart, order placed, and more.

Before you start

Before proceeding any further, make sure you have the following requisites:

  1. Installed and configured the VTEX Google Tag Manager app. For more information, refer to Installing Google Tag Manager.

  2. Created A Google Analytics 4 (GA4) Configuration tag using your Measumerent ID in Google Tag Manager (GTM). For more information, refer to the following Google article Set up the Google Analytics 4 Configuration tag.

Step-by-step

Step 1 - Setting up GA4 events

Once the GA4 Configuration tag is created, set up all GA4 events as follows:

  1. Download the container file. This container adds all the necessary tags, triggers, and variables.

  2. Import the container file by following Google’s Import a container guide. This will add all the necessary tags, triggers, and variables to the workspace.

{"base64":"  ","img":{"width":919,"height":1271,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":145137,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/gtm-import-container___755c64280e03b4df0105de7722099c65.png"}}

  1. In the GTM container, go to the GA4 Configuration tag, and edit the Measurement ID field with your Google Tag ID ( G- ID).

To find your Google Tag ID, refer to Find your Google tag ID article

Step 2 - Testing Tags in Google Tag Manager

To test that the GA4 Configuration tag is firing correctly for every page, use the Preview mode in Google Tag Manager (GTM). Additionally, verify if the GA4 Event tags are firing accurately for user actions such as viewing a product or adding a product to the cart.

Step 3 - Testing Events sent to Google Analytics 4

To verify if the events are arriving and the reports are being filled with data, access the Google Analytics Admin and use the DebugView to verify if the events are arriving and the Reports are being filled with data.

{"base64":"  ","img":{"width":1488,"height":820,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":101996,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/gtm-debug-view___e2dc572dcc33e2e23e81749583226ec8.png"}}

To see the available events that GA4 can track, refer to the Overview of Events in Google Analytics 4 section.

Overview events

This section provides a list of events that GA4 can track.This section also explains the view_promotion event, which is usually attached to the promotion banners carousel displayed by the Slider Layout block.

View Promotion

The GA4 view_promotion expects to receive the product’s name or ID associated with it.

This event is commonly attached to the promotion banners carousel displayed by the Slider Layout block. For example, you can use the Site Editor to configure the Product ID and Product Name. To access the Site Editor, in the VTEX Admin, go to Storefront > Site Editor.

{"base64":"  ","img":{"width":819,"height":464,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":336599,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/gtm-site-editor___bc52365aafad63deb5bfed1d74f307c0.png"}}

Supported events

Check out the available events that Pixel Apps can listen to and their equivalent names in UA and GA4:

VTEXUAGA4
vtex:promoViewpromoViewview_promotion
vtex:promotionClickpromoClickselect_promotion
vtex:productViewdetailview_item
vtex:productImpressionimpressionsview_item_list
vtex:productClickclickselect_item
vtex:addToCartaddadd_to_cart
vtex:removeFromCartremoveremove_from_cart
vtex:cartLoadedcheckoutbegin_checkout
vtex:orderPlacedpurchasepurchase

GA4 events

Besides the events listed in the previous sections, GA4 has new events that stores can start tracking. The full list can be found on Google documentation.

The GTM app listens to the following events and sends them in the following corresponding GA4 format:

VTEXGA4
vtex:addPaymentInfoadd_payment_info
vtex:addShippingInfoadd_shipping_info
vtex:loginlogin
vtex:signUpsign_up
vtex:viewCartview_cart
vtex:beginCheckoutbegin_checkout
vtex:refundrefund
vtex:addToWishlistadd_to_wishlist
vtex:searchsearch
vtex:shareshare
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Installing Google Tag Manager
« Previous
Internationalization
Next »
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page