Documentation

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.

Google Tag Manager supports Google products, like Google Ads and Google Analytics, and third-party vendors. Google Tag Manager also supports custom tags.

​

Prerequisites

Get started

To track events from your website, follow these steps:

  1. Open the .env.local file in your commercetools Frontend project.

  2. For the NEXT_PUBLIC_GA_TRACKING_ID variable, set your Google Tag Manager container ID as the value. If you are working locally, you are set.

  3. On production, set your Google Tag Manager container ID as the value of the environment variable on Netlify or any other provider.

Out-of-the-box events

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 Changed event is also collected.

Events might take some time to appear on the Google Analytics dashboard.

Add events

You can track other events in addition to those already available. To implement additional events, use the following syntax.

Syntax to implement eventsJavaScript
gtag('event', EVENT_NAME, PAYLOAD);
Example of event implementationJavaScript
gtag('event', 'Product Viewed', { name: 'Modern Glam Dresser' });