In this article, we will learn how to set up multiple GTM environments for your website so you can test changes on staging before publishing them to the live website.
What are GTM Environments?
Google Tag Manager (GTM) environments help you to test your Tag manager changes before publishing them to the live website.
You can set up multiple environment servers in Google Tag Manager. If you work with a large website which has a Quality Assurance process, or if you test your changes on a staging server before publishing them to a live website, you need to consider using Tag Manager environments on your website.
Why do you need to use Google Tag Manager Environments?
Google Tag Manager Environments are helpful for those companies that use multiple deployment environments like ‘development‘, ‘staging‘, and ‘production‘ in their workflow.
It allows you to test your new tag edits on a development or staging website before releasing them to the live website.
Advantages of using Google Tag manager Environments.
Before using the environments, you need to know the benefits you’re getting as a part of using this feature. So you can use this feature at its full potential. The main advantages of using Google Tag Manager Environments are,
- It allows you to add or modify tags to the existing tag manager container and test its working on the staging website before publishing it to the live site.
- It helps you to share a preview of the Tag Manager container with your newly added changes that will work on a staging or development website.
- You don’t have to share user permissions of Tag containers with the Quality Assurance team or developers to preview the new implementations on test environments.
- It helps you to revoke access using the “reset authentication token” option.
- It allows you to create many custom environments for different teams and test servers.
- While publishing a version, you will get the option to choose the environments.
Who should use Google Tag Manager environments?
If you are working in a large organization that handles the website with various teams like development, and social media, you might have to consider using Tag Manager environments to get maximum control over new feature additions.
For individuals and agencies, who maintain different versions of websites like staging, development, and pre-production rather than the live version of the website, tag manager environments is a helpful feature for those people.
It gives you the flexibility to share the versions for different deployments, so you can separately test each feature provided by each department.
How to Create a Tag Manager Environment for Staging?
Before creating environments inside the tag manager, I would suggest you define the environments that you’re planning to create. Decide what each environment will be called, and what the purpose of each environment will be. Often this has already been established by your development team or organization. Here are some commonly-used terms:
- Dev / Development – This server is the one you and your team use for day-to-day website development.
- Staging / QA – A staging site replicates your live website, but is not accessible to the public. It enables you to test any changes or major features that you plan to implement on the live website.
- Production / Live – The live version of your website, that is visible to your users.
Once you get clarity on the above points, you can configure them in Tag Manager.
To create a staging environment inside the Tag Manager container, Go to Admin -> Environments
Once you click on the environments page, you’ll land on a page where you can see existing environments.
Click on New to create an environment.
As you can see, there are already two environments listed as default.
Difference between the Live & Latest environments in Tag Manager.
- The Live environment is the one which is connected with the public version of your website ( Production site )
- The Latest environment is the one which contains the recent changes you applied to the tags. While submitting the tags, “create and publish” is the one that is applied by default. So, the live and latest will be the same.
When you choose “Create version”, you will see the latest and live is pointed to a different version.
Till now, the latest environment will always be pointed towards the Live environment.
Once we create a staging environment, we will get the option to point the latest version of tag manager to either live enviroment or staging.
In the next window, add relevant details to identify your staging environment. Give proper name and description, enable auto debugging by default and also give your staging server address in the destination URL. Finally, click on Create Environment.
Once you click on Create Environment, the Staging environment will be created and you can see it under “Custom Environments”.
Now, you need to reconfigure the GTM tags on both production website and the server website. Even though there is already a GTM code on your production website, you need to replace it with the new code.
How to add new Tag Manager snippet codes for GTM environments?
To get tag manager code for your staging website, go to the admin tab -> click Actions -> Get Snippet
Paste the tag manager code snippet to both head and body sections on your website.
Now, we need to do the same for the production website also. This time, make sure you are getting the snippet code from Live Environment. Not from the Latest.
As mentioned above, paste the tag manager script to the head and body section of your live website.
That’s all about creating a staging environment on tag manager. Now you have got two different environments with the same tag settings.
From now onwards whenever we publish a new change or a tag, we can decide to which environment we should publish it.
How to test Tags in Staging Environment before publishing to live website?
For testing purposes, we are going to create a dummy tag and then publish it to the staging environment. Then we will check both the staging website and the live website to see, on which website the new changes got applied.
Create a new tag with “Custom HTML” as Tag configuration and “All Pages” as Triggering.
Copy and paste the below code on Custom HTML, to print the message “Hello” on your browser console.
<script> console.log("Hello"); </script>
Click on Submit and give the appropriate name and description to identify the new version.
⚠️ Before publishing the tag, make sure you’ve changed the environment from Live to Staging.
Once you publish the tag, you will be redirected to the version page. Here you can see, that the latest version is now pointed to the staging website which contains the “Dummy Tag” whereas the older version is still pointed to the live website.
To verify the changes,
Visit the staging website & production website. Now open the browser console through inspect element on both websites.
If everything is working correctly, you should see a message “Hello” on the staging website console and no messages on the production website.
Congratulations 🎉
Next post: How to add multiple/different GA4 Analytics to one Tag Manager?