Documentation
Feedback
Guides
Storefront Development

Storefront Development
Store FrameworkConfiguring Google Tag Manager
Setting up Google Tag Manager

Steps on how to track and analyze data from your store using Google Analytics 4

Once you have installed the VTEX IO Google Tag Manager app, set it up in your store by configuring all the necessary variables, triggers, and tags.

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 begin

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":946,"height":1281,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":210180,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/new-ga4-tags-variables___b2619df57689429d97a8abd56a5f7d83.png"}}

  3. 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:productImpressionimpressionsview_item_list
vtex:productClickclickselect_item
vtex:productViewdetailview_item
vtex:addToCartaddadd_to_cart
vtex:removeFromCartremoveremove_from_cart
vtex:viewCartNot applicableview_cart
vtex:beginCheckoutcheckoutbegin_checkout
vtex:addShippingInfoNot applicableadd_shipping_info
vtex:addPaymentInfoNot applicableadd_payment_info
vtex:orderPlacedpurchasepurchase
vtex:refundNot applicablerefund
vtex:searchNot applicablesearch
vtex:shareNot applicableshare
vtex:addToWishlistNot applicableadd_to_wishlist

Partially-supported events

The following events are not fully supported yet. Although the GTM app will listen and format them into GA4, their VTEX event triggers have not been implemented yet:

VTEXGA4
vtex:loginlogin
vtex:signUpsign_up
Contributors
4
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 4 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
See also
Vtex.search
Apps
Google Tag Manager
VTEX IO Apps
Migrating Google Tag Manager app from major 2.x to major 3.x
Storefront Development
Contributors
4
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 4 contributors
On this page