You are viewing the v1 Nacelle Docs for existing merchants.New merchants can find the V2 docs here: nacelle.com/docs.

# Environment Setup for Google Marketing Platform

Most headless merchant stores have 2 to 3 environments to run their application:

  • development - this is the environment merchants run locally
  • staging / preview - this is a deployed environment that is just like production, but not production
    • useful for troubleshooting or QA in a deployed / hosted environment
    • also this kind of environment can be useful for previewing content in the client application as if it were live
  • production - this is the live customer-facing store

It's a great idea to set up your Google Tag Manager and Google Analytics configuration to mirror your deployment environment.

Let's do this!

# Environments in Google Tag Manager

# First Steps in Tag Manager

  1. Follow instructions to create environments in Google Tag Manager (https://support.google.com/tagmanager/answer/6311518?hl=en)

  2. Copy the snippet from the new environment. It should look something like this:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=abcdefghijklmnop&gtm_preview=env-2&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-000000');</script>
<!-- End Google Tag Manager -->

In the snippet you'll notice 3 parameters that we will need to continue this setup

gtm_id: 'GTM-000000'
gtm_auth: 'abcdefghijklmnop'
gtm_preview: 'env-2'
  1. IMPORTANT As soon as you create new environment(s) in Tag Manager, you will likely need to update the snippet code used for your live site. Copy the snippet code for your live site and check if any changes are needed.

# Update your application

Now that we have the GTM workspace parameters from the snippet, let's use those in our code.

First, we'll turn those GTM parameters into environment variables:

GTM_ID='GTM-000000'
GTM_AUTH='abcdefghijklmnop'
GTM_PREVIEW='env-2'

If using the Nuxt starter you can have a Nuxt plugin that uses JavaScript to inject the Tag Manager script (this is essentially the snippet provided by GTM).

The plugin would look something like this:

export default () => {
  if (typeof window !== 'undefined') {
    const rootScript = document.getElementsByTagName('script')[0]
    const gtagScript = document.createElement('script')

    const url = new URL('https://www.googletagmanager.com/gtag/js')
    url.searchParams.set('id', process.env.GTM_ID)
    url.searchParams.set('gtm_auth', process.env.GTM_AUTH)
    url.searchParams.set('gtm_preview', process.env.GTM_PREVIEW)
    url.searchParams.set('gtm_cookies_win', 'x')
    gtagScript.src = url.toString()
    gtagScript.type = 'text/javascript'
    gtagScript.defer = true
    rootScript.parentNode.insertBefore(gtagScript, rootScript)

    window.dataLayer = window.dataLayer || []
    window.gtag = function () {
      dataLayer.push(arguments)
    }
    window.gtag('js', new Date())
    window.gtag('config', process.env.GTM_ID)
  }
}
[Read our docs creating Nuxt plugins](/nuxt/nuxt-plugins.html)

Now, all you have to do is swap out your environment variables! When running the project locally you would use the development environment params in a .env or .env.development file.

Vercel and Netlify (ideal hosting platforms for our starter kits), have handy options to configure environment variables for different environments.

# Add Google Analytics

Let's make this more interesting with Google Analytics in different environments.

First step is to create separate properties in Google Analytics that correspond to your different environments.

Next, you have two possible paths forward:

# A. Use Google Analytics as a tag in Tag Manager

If you already set up Tag Manager for multiple environments, you use that to also manage Google Analytics properties. That means all of the configuration would happen inside Tag Manager.

  1. Add GA as a tag (if not already done)
  2. Create a new Lookup Table variable
  3. Use ((Environment Name)) as the Input Variable
  4. Now start adding rows for each environment that map from the GTM environment to the respective GA property.
  5. Set the Default Value to the GA Tracking ID for the live site property.
  6. Lastly, drop your lookup table variable into the Tracking ID option of the GA settings variable.

All set!

# B. Add Google Analytics as a separate script in your application

For this you would create a similar plugin as described above to embed the Google Analytics tracking code, and set up the Tracking ID's you set up for each environment.