📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Google Tag Manager

The VTEX Google Tag Manager app is a first party integration to the Google Tag Manager solution.

Configuration

It is possible to install the VTEX native GTM app in your store either by using App Store or the VTEX IO Toolbelt.

Using VTEX App Store

1. Access the Apps section in your account's admin page and look for the Google Tag Manager box;
2. Then, click on the Install button;
3. You'll see a warning message about needing to enter the necessary configurations. Scroll down and type in your GTM ID in the Google Tag Manager field.
4. Click on Save.

ℹ️ Access the Google Tag Manager page and login to you account in order to find out what is your account GTM ID. The number your should use is the one provided by the Container ID column.

Using VTEX IO Toolbelt

1. Install the vtex.google-tag-manager@2.x app. You can confirm that the app has now been installed by running vtex ls again.
2. Access the Apps section in your account's admin page and look for the Google Tag Manager box. Once you find it, click on the box.
3. Fill in the Google Tag Manager field with your GTM ID.
4. Click on Save.

ℹ️ Access the Google Tag Manager page and login to you account in order to find out what is your account GTM ID. The number your should use is the one provided by the Container ID column.

After installing the app, you are ready to use your GTM as usual by accessing your account dashboard directly on the Google Tag Manager page.

Restrictions

In order to avoid performance problems and unforeseen behavior, our VTEX IO Google Tag Manager solution uses the native GTM blacklist feature. You can read more about this feature on the Google Developer Guide.

We, by default, blacklist the html ID, which automatically blocklists all the tags, variables and triggers of the type customScripts. The main consequence of this blocklist is that Custom HTML tags will not be triggered.

⚠️ The HTML blacklist is VTEX Google Tag Manager app's default. If you want to disable this restriction go to https://{accountName}.myvtex.com/admin/apps/vtex.google-tag-manager@2.x/setup and check the toggle below.

Most of the widely used Custom HTML tags are integrations with third-party services, like Customer Chat, Analytics, Remarketing, and Pixel tags. If your store needs a Custom HTML for one of those cases, the integration can either be done by transforming the tags into a VTEX IO Pixel App or by removing this restriction.

Check out below the full list of tags and variables that are blocked, by default, in VTEX IO Google Tag Manager solution below:

Blocked tags

• Custom HTML Tag - html
• Eulerian Analytics Tag - ela
• SaleCycle JavaScript Tag - scjs
• Upsellit Global Footer Tag - uslt
• Upsellit Confirmation Tag - uspt

Blocked variables

• Custom JavaScript Variable - jsm

Check out a list with all the GTM available tags on the Google Developer Guide.

Contributors ✨

This project follows the all-contributors specification. Contributions of any kind are welcome!