[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides getting started 3 in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/getting-started-3)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-1-basicsetup)

[2\. Configuring your account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-2-prerequesites)

[3\. Creating a Store Theme project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-3-settingyourstoretheme)

[4\. Configuring templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-4-configuringtemplates)

[5\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-5-definingstyles)

[6\. Building your own store theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme)

[7\. Making your store theme public](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-making-your-theme-content-public)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-glossary)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/getting-started-3)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-1-basicsetup)

[2\. Configuring your account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-2-prerequesites)

[3\. Creating a Store Theme project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-3-settingyourstoretheme)

[4\. Configuring templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-4-configuringtemplates)

[5\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-5-definingstyles)

[6\. Building your own store theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme)

[7\. Making your store theme public](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-making-your-theme-content-public)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-glossary)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/storefront-best-practices)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/storefront-development)

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/store-framework)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/getting-started-3)

Storefront

Learn how to build a Store Theme with VTEX IO and Store Framework from scratch.

This comprehensive guide will take you through the process of building a Store Theme using VTEX IO and Store Framework.

[Part 1\. Setting up your development environmentLearn how to configure your development environment to build a Store Theme app with VTEX IO.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-basicsetup)[Part 2\. Configuring your accountSet up your account Edition to get started with Store Framework.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-2-prerequesites)[Part 3\. Creating a Store Theme projectCreate your very first Store Framework storefront project.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-settingyourstoretheme)[Part 4\. Configuring templatesDiscover how to manage templates, add or remove blocks, and customize your Store Theme.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-configuringtemplates)[Part 5\. Defining stylesLearn how to set specific styles for your store components to enhance your store's user experience.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-definingstyles)[Part 6\. Building your own Store ThemeAccess our hands-on course on Store Framework.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme)[Part 7\. Making your theme content publicFind out how to make your Store Framework theme accessible to end users.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/getting-started-3.md)

[Store Theme« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3//docs/guides/vtex-io-documentation-store-theme)[1\. Setting up your development environmentNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3//docs/guides/vtex-io-documentation-1-basicsetup)

See also

[1\. Setting up your development environmentStorefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/docs/guides/vtex-io-documentation-1-basicsetup)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/getting-started-3.md)

Copy page

On this page

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Explain troubleshooting google analytics 4 is tracking inconsistent data from my store in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/updates/release-notes)

Troubleshooting

API

---

Development

---

Store performance

[I can't complete a purchase on a FastStore website](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/i-cant-complete-a-purchase-on-a-faststore-website)

[My store is slow or unavailable](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/my-store-is-slow-or-unavailable)

[Google Analytics 4 is tracking inconsistent data from my store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store)

[UTMs are not being applied to the cart at Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout)

[My routes are not behaving as expected](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/my-routes-are-not-behaving-as-expected)

[My store is presenting price inconsistencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/my-store-is-presenting-price-inconsistencies)

[My store translation is not behaving as expected](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/my-store-translation-is-not-behaving-as-expected)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/updates/release-notes)

Troubleshooting

API

---

Development

---

Store performance

[I can't complete a purchase on a FastStore website](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/i-cant-complete-a-purchase-on-a-faststore-website)

[My store is slow or unavailable](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/my-store-is-slow-or-unavailable)

[Google Analytics 4 is tracking inconsistent data from my store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store)

[UTMs are not being applied to the cart at Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout)

[My routes are not behaving as expected](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/my-routes-are-not-behaving-as-expected)

[My store is presenting price inconsistencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/my-store-is-presenting-price-inconsistencies)

[My store translation is not behaving as expected](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/my-store-translation-is-not-behaving-as-expected)

---

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting)

Store performance

Google Analytics 4 is tracking inconsistent data from my store

If Google Analytics 4 is not accurately traciing data, try server-side tagging and configuring a VTEX IO Pixel app.

**Keywords:** GA4 | performance | analytics

After configuring [Google Analytics 4 (GA4)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/google-tag-manager), your store may experience issues with inconsistent data tracking.

Due to General Data Protection Regulation (GDPR) restrictions, some companies are updating their operating systems, browsers, and devices to block events triggered during shopper navigation, which is the main reason behind this problem.

## Solution

To solve this problem, follow the instructions below.

### Step 1 - Setting up server-side tagging

Server-side tagging shifts tag processing from the client side to the server environment. This enhances website performance by reducing client-side code, improves data security by managing sensitive information on the server, and provides greater control over data collection.

Acting as an intermediary between users and data vendors, server-side tagging enables faster page loads, stronger security policies, better privacy, and more durable cookies, all while using familiar Google Tag Manager tools.

To configure server-side tagging, follow Google's [Server-Side Tag Manager](https://read.calvincode.net/reader?url=https://developers.google.com/tag-platform/tag-manager/server-side) documentation.

### Step 2 - Creating a VTEX IO Pixel app

Follow the instructions in the [Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps) guide to develop your own Pixel app.

After creating the Pixel app, add the Google Tag Manager (GTM) script passing the correct container code and the server URL (which holds the server-side tag manager configuration) that will trigger the events for Google.

### Step 3 - Setting up the native GTM app

Keep the native [GTM app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/google-tag-manager) installed in your store, but pass a **fake container code** to the app.

To access the GTM app settings, go to `https://{accountName}.myvtex.com/admin/apps/vtex.google-tag-manager@3.5.4/setup/`, replacing `{accountName}` with your VTEX account name. In the `Enter the ID (GTM-XXXX) from your Google Tag Manager` field, add the fake container code.

![{"base64":"  ","img":{"width":979,"height":699,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":46725,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/store-performance/gtm-fake-container.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/store-performance/gtm-fake-container.png)

### Step 4 - Setting up the store checkout

Remove the container code from the store checkout configuration.

Go to `https://{accountName}.myvtex.com/admin/portal/#/sites/default/checkout/`, replacing `{accountName}` with your VTEX account name, to access your store checkout configuration.

![{"base64":"  ","img":{"width":1078,"height":790,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":67146,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/store-performance/checkout-settings-gtm.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/store-performance/checkout-settings-gtm.png)

Insert the GTM script with the correct container and the server URL into the JavaScript tab within the [Checkout UI Custom app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.checkout-ui-custom) and click `Publish` to track the events triggered on the store checkout pages.

![{"base64":"  ","img":{"width":1615,"height":785,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":23344,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/store-performance/checkout-custom.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/store-performance/checkout-custom.png)

The expected behavior is that your store's analytics data should be consistent and reflect user interactions.

After following these steps, if the error continues, open a [support ticket](https://read.calvincode.net/reader?url=https://help.vtex.com/support).

## Learn more

* [Configuring Google Tag Manager](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/integration-with-google-tag-manager--frequentlyAskedQuestions%5F616)
* [How to customize the Checkout UI Custom in the Admin](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/how-to-customize-the-checkout-ui-custom-in-the-admin--548aDBJciQu97Vh0BhEiWx)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/troubleshooting/store-performance/google-analytics-4-is-tracking-inconsistent-data-from-my-store.md)

[My store is slow or unavailable« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/my-store-is-slow-or-unavailable)[UTMs are not being applied to the cart at CheckoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/utms-are-not-being-applied-to-the-cart-at-checkout)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

ON THIS PAGE

[Solution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store%23solution)

[Step 1 - Setting up server-side tagging](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store%23step-1-setting-up-server-side-tagging)[Step 2 - Creating a VTEX IO Pixel app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store%23step-2-creating-a-vtex-io-pixel-app)[Step 3 - Setting up the native GTM app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store%23step-3-setting-up-the-native-gtm-app)[Step 4 - Setting up the store checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store%23step-4-setting-up-the-store-checkout)

[Learn more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store%23learn-more)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/troubleshooting/store-performance/google-analytics-4-is-tracking-inconsistent-data-from-my-store.md)

Copy page

On this page

ON THIS PAGE

[Solution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store%23solution)

[Step 1 - Setting up server-side tagging](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store%23step-1-setting-up-server-side-tagging)[Step 2 - Creating a VTEX IO Pixel app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store%23step-2-creating-a-vtex-io-pixel-app)[Step 3 - Setting up the native GTM app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store%23step-3-setting-up-the-native-gtm-app)[Step 4 - Setting up the store checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store%23step-4-setting-up-the-store-checkout)

[Learn more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store/docs/troubleshooting/google-analytics-4-is-tracking-inconsistent-data-from-my-store%23learn-more)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides vtex io documentation 8 translating the component in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-getting-started)

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

[2\. Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-3-creating-the-new-app)

[3\. Declaring a theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

[4\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-5-defining-styles)

[5\. Structuring documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-6-structuring-documentation)

[6\. Consuming data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-7-consuming-data)

[7\. Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component)

[8\. Improving performance with caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

[9\. Making your app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-developing-custom-storefront-components)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/create-master-data-crud-app)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-getting-started)

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

[2\. Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-3-creating-the-new-app)

[3\. Declaring a theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

[4\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-5-defining-styles)

[5\. Structuring documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-6-structuring-documentation)

[6\. Consuming data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-7-consuming-data)

[7\. Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component)

[8\. Improving performance with caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

[9\. Making your app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-developing-custom-storefront-components)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/create-master-data-crud-app)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/app-development)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-getting-started)

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[7\. Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component)

7\. Translating the component

Before thinking about brand globalization, it is very important to first look into **content internationalization on your website**.

**Messages** is the VTEX IO app that translates store components, working directly on block code so that the development cycle is not limited by the necessary versioning flow from one language to another.

Once implemented in the app, Messages automatically identifies and interprets passive text messages for translation, reducing obstacles in the evolution process of your code–except in cases where you have already entered a customized translation manually.

## Configuring Messages

For Messages to work as expected, we will use the [react-intl](https://read.calvincode.net/reader?url=https://formatjs.io/docs/react-intl) library. Serving as a translation engine, this highly versatile library has several advanced internationalization features (_i18n_) for your _front_ app.

1. Open your app's code in the code editor of your choice.
2. Access the `react` folder and then run the command `yarn add react-intl@3 && yarn add @types/react-intl@3 --dev`.
3. Access the `manifest.json` file and add the `messages` builder to the `builders` list, as shown in the following example:

`1

{

2

 ...

3

 "builders": {

4

 "react": "3.x",

5

 "docs": "0.x",

6

+ "messages": "1.x"

7

 },

8

 ...

9

}

`

1. Save your code changes.

All set! Having all the `react-intl` dependencies installed and the Messages [builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-builders/) configured, we can proceed to the next steps.

## Allowing automatic translations

To understand how VTEX IO translations work in practice, consider the React `HelloWorld` component imported in article 3 of this series:

`1

import React from 'react'

2

3

const HelloWorld = () =>
Hello World!

4

5

export default HelloWorld

`

Note that, regardless of the language used on the store page, the `Hello World!` text will be rendered in the component.

In order to have the `Hello World!` text automatically translated when the page language changes, we have to use the `FormattedMessage` component from the `react-intl` package to specify which strings should be translated into other languages.

As a parameter for the `FormattedMessage` component, we will have a unique ID (`id`) associated with a specific string declared in your app:

1. Substitute the `HelloWorld` component code with the code below:

`1

import React from 'react'

2

import { FormattedMessage } from 'react-intl'

3

4

const HelloWorld = () => {

5

 return (

6

7

 <FormattedMessage id="store/my-app.hello"/>

8

9

 )

10

}

11

12

export default HelloWorld

`

> Note that in the example above we use the `FormattedMessage` component by associating it to the `"store/my-app.hello"` ID, which we created for our example. Since each ID has to be linked to a single string only, it is necessary to define the `FormattedMessage` component in this folder as many times as necessary in accordance with the translatable strings.

> When creating an `id`, consider using the `store/` or `admin/` prefixes (depending on your app's functionality) followed by the app name (`my-app`) and, finally, a short word that can identify this string. For example,`store/my-app.hello`.

1. In your app's root directory, create a `messages` folder.
2. In the newly created folder, create a new `.json` file named using the ISO code for the desired language. For example: `pt`, `en`, `fr`.
3. In the desired language file, such as `messages/en.json`, associate the `id` used in the `FormattedMessage` component with the desired string:

`1

{

2

 "store/my-app.hello": "Hello World!"

3

}

`

1. Save all your code changes.

When you [_link_](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app/) your app again and change the page language, you will notice that the text `Hello World!` is automatically translated into the UI thanks to the `react-intl` library component and Messages.

> To test these effects in the store linked to your VTEX account, access `https://{workspaceName}-{accountName}.myvtex.com` and add the query string `cultureInfo` with desired language value. For example, to check your page in Brazilian Portuguese type: `https://{workspaceName}-{accountName}.myvtex.com/?cultureInfo=pt-BR`, substituting `{workspaceName}` and `{accountName}` with the development workspace name and your VTEX account name, respectively.

## Overwriting automatic translations

Depending on your business scenario, you may want to change an automatic translation with a customized one.

In this section, we will teach you how to override Messages’ automatic translations using the same example as before:

1. In the `Messages` folder, access the file you want for the translation language that will be overwritten (`messages/pt.json`, for example).
2. In this file, define a new translation for the same `id` previously linked to the desired string. For example:

`1

{

2

 "store/my-app.hello": "Olá, pessoal!"

3

}

`

By linking the same `id` to another translation, you are telling VTEX IO to ignore Messages’ automatic translation and consider only the one you defined manually.

[_Link_](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app/) your app again and change the page language to Portuguese to see how the translation you defined is rendered!

## Advanced translations

Internationalizing a component can mean more than translating its strings. For example, it can include changing price and percentage formatting.

Having your app's purpose in mind, you can (and should) make some adjustments to the rendered messages when they contain:

* Price representations;
* Variable values;
* Gender and number agreement dependencies
* Percentage representations;
* Dynamic messages, such as error messages.

### Adjusting price representations

Price formatting for describing prices varies from country to country. If the app you are developing includes price variables, it is essential to set it up to handle different internationalization scenarios.

To automate these price changes in the translation flow, you need to add the `vtex.format-currency` library to your app's dependencies:

1. Access the `manifest.json` file and add `vtex.format-currency` to the `dependencies` list:

`1

 dependencies: {

2

+ "vtex.format-currency": "0.x"

3

 }

`

1. Access the file created in the `react` folder for the imported React component.
2. Once you are in it, import the `FormattedCurrency` component from `vtex.format-currency`.
3. Use the `<FormattedCurrency value={price} />` format to indicate that the variable `price` should be treated as the price notation value. For example:

`1

import React from 'react'

2

import { FormattedCurrency } from 'vtex.format-currency'

3

4

const PriceComponent = () => {

5

 const price = 10.50

6

7

 return (

8

9

 <FormattedCurrency value={price} />

10

11

 )

12

}

13

14

export default PriceComponent

`

1. Save your code changes.

### Adjusting variable values

It is common to have a variable in the middle of the message that the component is rendering.

Consider our `HelloWorld` example. To render a greeting following the format `Hello, {userName}!`, we have to use **variable interpolation**.

Given you have already added the `react-intl` package to your app's dependencies, as explained earlier in this article, follow the instructions below:

1. Access the file created in the `react` folder for the imported React component.
2. Once you are in it, import the `FormattedMessage` component from `react-intl`, setting the variable `user` (sent as a component parameter) using the following standard format: `<FormattedNumber id={id} values={{ user: user }}/>`. For example:

`1

import React from 'react'

2

import { FormattedMessage } from 'react-intl'

3

4

const HelloUser = () => {

5

 const user = 'John'

6

7

 return (

8

9

 <FormattedMessage id='store/my-app.hello-user' values={{ user: user }} />

10

11

 )

12

}

13

14

export default HelloUser

`

1. Access the file containing Messages’ translations for the desired language (`messages/en.json` for example).
2. For the `FormattedMessage` `id` (in our example, `store/my-app.hello-user`), define the string that will be rendered in English using the value passed in `user`:

`1

{

2

 "store/my-app.hello-user": "Hello {user}!"

3

}

`

1. Save your code changes.

> If concatenating the string seems complicated, we recommend reading this [documentation](https://read.calvincode.net/reader?url=https://format-message.github.io/icu-message-format-for-translators/index.html). It will help your learning process, explaining more details about formatting messages using ICU and variable interpolation.

### Adjusting gender and number agreement

A variable's gender and number have a direct impact on string concatenation.

For example, when you do a search, it may return nothing, return one result, or even several results at the same time. That means the answer that we want to render for the user will not remain constant, varying depending on the search itself and the results that are found.

If we analyze this case, it turns out we could render `No products found`, `One product found`, and `X products found`, respectively.

To make the messages in your app agree in gender and number in their given scenario, we will use **variable interpolation**.

Given you have already added the `react-intl` package to your app's dependencies, as explained at the beginning of this article, follow the instructions below:

1. Access the file created in the `react` folder for the imported React component.
2. Import the `FormattedMessage` component from `react-intl`, setting the `myQuantity` variable (sent as a component parameter). Use the following format: `<FormattedNumber id={id} values={{ quantity: myQuantity }}/>`. For example:

`1

import React from 'react'

2

import { FormattedMessage } from 'react-intl'

3

4

const PluralSingularComponent = () => {

5

 const myQuantity = 1

6

7

 return (

8

9

 <FormattedMessage id='store/my-app.pluralsingular' values={{ quantity: myQuantity }} />

10

11

 )

12

}

13

14

export default PluralSingularComponent

`

1. Access the file containing Messages’ translations for the desired language (`messages/en.json`, for example).
2. For the `FormattedMessage` `id` (`store/my-app.pluralsingular` in our example), define the string that will be rendered in English as per the value returned by `myQuantity`:

`1

{

2

 "store/my-app.pluralsingular": "{quantity, plural, =0 {No product found} one{One product found} other{# products found}}"

3

}

`

1. Save your code changes.

> If concatenating the string seems complicated, we recommend reading this [documentation](https://read.calvincode.net/reader?url=https://format-message.github.io/icu-message-format-for-translators/index.html). It will help your learning process, explaining more details about formatting messages using ICU and variable interpolation.

### Adjusting percentage representation

Like prices, percentages are expressed in different ways depending on where you are.

If the app you are developing has variables with percentages, it is essential to set it up to handle different internationalization scenarios.

Given you have already added the `react-intl` package to your app's dependencies, as explained at the beginning of this article, follow the instructions below:

1. Access the file created in the `react` folder for the imported React component.
2. Import the `FormattedNumber` component from `react-intl`, defining the `value` and `style` properties with the following format: `<FormattedNumber value={variable} style="percent"/>`. For example:

`1

import React from 'react'

2

import { FormattedNumber } from 'react-intl'

3

4

const PercentageComponent = () => {

5

 const percent = 0.1

6

7

 return (

8

9

 <FormattedNumber value={percent} style="percent" />

10

11

 )

12

}

13

14

export default PercentageComponent

`

1. Save your code changes.

### Adjusting dynamic messages

There are cases where you cannot predefine the message displayed by the block because it depends directly on actions taken by users during navigation. A common case of dynamic messages on the interface is HTTP error messages.

Given you have already added the `react-intl` package to your app's dependencies, as explained at the beginning of this article, follow the instructions below:

1. Access the file created in the `react` folder for the imported React component.
2. Import the `FormattedMessage` component from`react-intl`, defining the `errorCode` variable (sent as a component parameter) to match the HTTP status code returned. For example:

`1

import React from 'react'

2

import { FormattedMessage, defineMessages } from 'react-intl'

3

4

const messages = defineMessages({

5

 404: {

6

 id: 'store/my-app.errors.404',

7

 },

8

 500: {

9

 id: 'store/my-app.errors.500',

10

 },

11

})

12

13

const ErrorMessage = ({ errorCode = 500 }) => {

14

 return {

15

16

 <FormattedMessage id={messages[errorCode].id} />

17

18

 }

19

}

20

21

export default ErrorMessage

`

1. Save your code changes.

> Note that we use a variable to choose the `id` used in the `FormattedMessage` component, making the message dynamic. To declare dynamic messages in your block's code, you need to describe all possible exported messages in an object passed in the `defineMessages` function from the `react-intl` package. This function, which returns the same object without changes, is useful for analyzing the code statically, ensuring that Messages delivers only the messages necessary for the browser to render.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/vtex-io-documentation-8-translating-the-component.md)

[6\. Consuming data« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component//docs/guides/vtex-io-documentation-7-consuming-data)[8\. Improving performance with cachingNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component//docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

See also

[8\. Improving performance with cachingApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Configuring Messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23configuring-messages)

[Allowing automatic translations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23allowing-automatic-translations)

[Overwriting automatic translations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23overwriting-automatic-translations)

[Advanced translations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23advanced-translations)

[Adjusting price representations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23adjusting-price-representations)[Adjusting variable values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23adjusting-variable-values)[Adjusting gender and number agreement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23adjusting-gender-and-number-agreement)[Adjusting percentage representation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23adjusting-percentage-representation)[Adjusting dynamic messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23adjusting-dynamic-messages)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/vtex-io-documentation-8-translating-the-component.md)

Copy page

On this page

ON THIS PAGE

[Configuring Messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23configuring-messages)

[Allowing automatic translations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23allowing-automatic-translations)

[Overwriting automatic translations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23overwriting-automatic-translations)

[Advanced translations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23advanced-translations)

[Adjusting price representations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23adjusting-price-representations)[Adjusting variable values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23adjusting-variable-values)[Adjusting gender and number agreement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23adjusting-gender-and-number-agreement)[Adjusting percentage representation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23adjusting-percentage-representation)[Adjusting dynamic messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component/docs/guides/vtex-io-documentation-8-translating-the-component%23adjusting-dynamic-messages)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)