Google Tag Manager
You can use the Google Tag Manager integration to enhance your B2C website with analytics features.
Website analytics provide insights and data that you can use to create a better user experience for your customers. Understanding customer behavior is the key to optimizing a website for key conversion metrics.
The B2C store template comes with an out-of-the-box Google Tag Manager integration that allows your website to communicate with your Google Tag Manager account. Google Tag Manager allows you to configure and publish tags to your commerce website through its web-based user interface instead of manually adding tags to your website code. Through tags, you can track and analyze how customers interact with your website.
To track events from your website, follow these steps:
.env.localfile in your commercetools Frontend project.
NEXT_PUBLIC_GA_TRACKING_IDvariable, set your Google Tag Manager container ID as the value. If you are working locally, you are set.
On production, set your Google Tag Manager container ID as the value of the environment variable on Netlify or any other provider.
The following events are already implemented and collected from your commercetools Frontend project.
PRODUCT_VIEWED: the user viewed a product.
AUTOCOMPLETE_PRODUCT_CLICKED: the user clicked the product name in the autocomplete list.
SLIDER_PRODUCT_CLICKED: the user clicked the product slider.
PLP_PRODUCT_CLICKED: the user clicked the product in the product listing page.
PDP_VIEWED: the user viewed the product details page.
PDP_VIEWED_AFTER_SEARCH: the user searched products and viewed the product details page.
QUICK_VIEW_PRODUCT_ADDED_TO_CART: the user added a product to the cart using the product quick view.
QUICK_VIEW_PRODUCT_ADDED_TO_CART_AFTER_SEARCH: the user searched products and added a product to the cart using the product quick view.
PDP_PRODUCT_ADDED_TO_CART: the user added a product to the cart from the product details page.
PDP_PRODUCT_ADDED_TO_CART_AFTER_SEARCH: the user searched products and added a product to the cart from the product details page.
- If you are using Algolia, the
Search UI State Changedevent is also collected.
Events might take some time to appear on the Google Analytics dashboard.
You can track other events in addition to those already available. To implement additional events, use the following syntax.