📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.
The VTEX Google Tag Manager (GTM) app is a first party integration to the Google Tag Manager solution.
- Access the Apps section in your account's admin page and look for the Google Tag Manager box;
- Then, click on the Install button;
- 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. - Click on Save.
Access the Google Tag Manager page and log in to your account in order to find out what is your account GTM ID. Use the number provided by the
Container ID
column.
To set up Google Tag Manager in your store, you must create and set up all necessary variables, triggers, and tags. Follow the Setting up Google Tag Manager documentation to create them.
To prevent GTM from creating additional session identifiers every time a user navigates the website, you must add the variables originalLocation
and originalReferrer
to your GTM container and configure your store’s Google Analytics tags. Notice that this is important to persist campaign data throughout a user session and avoid providing inconsistent campaign data to Google Analytics (GA).
⚠️ TheoriginalLocation
andoriginalReferrer
variables are available for VTEX IO Google Tag Manager versions2.x
and3.x
.
-
Log in to your GTM account and click on the GTM container you want to work with.
-
On the container page, click on Variables.
-
In the Built-In Variables section, check if the
Page URL
andPage Path
variables are enabled. Otherwise, click onConfigure
and selectPage URL
andPage Path
to enable them. -
Go to the User-Defined Variables section and click on
New
. A side popup will open. -
Replace the
Untitled Variable
value withOriginal Location
. -
Click on Variable Configuration.
-
On Page Variables, click on Data Layer Variable.
-
In the
Data Layer Variable Name
field, typeoriginalLocation
. -
Enable the
Set Default Value
option and fill in theDefault Value
field with the following value:{{Page URL}}
-
Click
Save
. Once you have saved theoriginalLocation
variable, create theoriginalReferrer
as described in the steps below. -
In the User-Defined Variables section, click on
New
. A side popup will open. -
Replace the
Untitled Variable
value withOriginal Referrer
. -
Click on Variable Configuration.
-
On Page Variables, click on Data Layer Variable.
-
In the
Data Layer Variable Name
field, typeoriginalReferrer
. -
Enable the
Set Default Value
option and fill in theDefault Value
field with the following value:{{Referrer}}
-
Click
Save
.
Now, let's configure every Google Analytics Settings variable that fires the originalLocation
and originalReferrer
variables.
-
Go to the Variables section;
-
On User-Defined Variables, click on the name of one of the Google Analytics Settings variables
-
Click on the Variable Configuration box;
-
Go to More Settings > Fields to Set;
-
Click on
Add Field
; -
Set the
Field Name
field aslocation
andValue
as{{Original Location}}
; -
Then, click on
Add Field
again; -
Set the
Field Name
field asreferrer
andValue
as{{Original Referrer}}
; -
Click on
Save
.
If you have any Google Analytics tags using the Google Analytics Settings variables you have changed, apply the same changes above directly on the tags that need it.
Once you have set up the Google Analytics variables and tags, follow Google's official guide on how to submit and publish your store’s container.
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 the VTEX Google Tag Manager app's default. If you want to disable this restriction, go tohttps://{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 below the full list of tags and variables that are blocked, by default, in the VTEX IO Google Tag Manager solution.
- Custom HTML Tag -
html
- Eulerian Analytics Tag -
ela
- SaleCycle JavaScript Tag -
scjs
- Upsellit Global Footer Tag -
uslt
- Upsellit Confirmation Tag -
uspt
- Custom JavaScript Variable -
jsm
Check out a list with all the GTM available tags on the Google Developer Guide.
This project follows the all-contributors specification. Contributions of any kind are welcome!