# 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 [Store Launchpad for B2C Retail](/frontend-development/b2c-store-launchpad-overview.md) comes with an out-of-the-box Google Tag Manager integration that allows your website to communicate with your [Google Tag Manager](https://support.google.com/tagmanager/) 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](https://support.google.com/tagmanager/answer/6106924). Google Tag Manager also supports [custom tags](https://support.google.com/tagmanager/answer/6107167).

​

**Prerequisites**

- A [Google Analytics 4](https://developers.google.com/analytics/devguides/collection/ga4) account.
- A [Google Tag Manager](https://support.google.com/tagmanager/answer/6103696?hl=en) account and container for your website.

## 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](https://support.google.com/tagmanager/answer/6103696?hl=en\&ref_topic=3441530#zippy=%2Cwhat-is-a-container) 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](https://docs.netlify.com/environment-variables/overview/) 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](https://www.algolia.com/doc/), 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.

```javascript title="Syntax to implement events"
gtag('event', EVENT_NAME, PAYLOAD);
```

```javascript title="Example of event implementation"
gtag('event', 'Product Viewed', { name: 'Modern Glam Dresser' });
```

## Related pages

- [Area overview page with navigation](/frontend-development.md)
- [Previous page: Algolia](/frontend-development/algolia.md)
- [Next page: SendGrid](/frontend-development/sendgrid.md)
- [Search documentation and API specs](/search.md)