I have integrated google tag manager and google analytics using the vue-gtm plugin found at vue-gtm
Within google tag manager, I have set up 3 environments under the same container.
In a user-defined variable called GA from environment, I have created a lookup table where the input variable is set as {{ Environment Name}}. The output variables are:
- dev - ua_123_1
- staging - ua_456_1
- prod - ua_789_1
This is how my vue-gtm setup looks like:
Vue.use(VueGtm, {
id: config.services.googleTag.id,
queryParams: config.services.googleTag.gtm_auth ? { // Add url query string when load gtm.js with GTM ID (optional)
gtm_auth: config.services.googleTag.gtm_auth,
gtm_preview: config.services.googleTag.gtm_preview,
gtm_cookies_win: config.services.googleTag.gtm_cookies_win,
} : {},
defer: false, // defaults to false. Script can be set to `defer` to increase page-load-time at the cost of less accurate results (in case visitor leaves before script is loaded, which is unlikely but possible)
enabled: true, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
debug: true, // Whether or not display console logs debugs (optional)
vueRouter: router, // Pass the router instance to automatically sync with router (optional)
});
Upon visiting the site, no data is being tracked in analytics. Upon checking the debug logs, it shows that the environment name variable is set to something like:
'Preview Environment 2 2020-08-05 071543'Do I need to manually set this variable in the code? I don't believe so, since I am utilizing gtm_preview functionalities to automatically handle this. Any thoughts on what could be causing this issue?