Adding Google Tag Manager code to your website is something a digital marketer has to do sooner or later. Now it’s your turn. It can be said that Google Tag Manager is number 1 in website measurement because it can be combined with all different tracking and advertising platforms. In this article, I have summarized how to add Google Tag Manager to WordPress and Websites. I will help you.
A quick introduction to Google Tag Manager
What is Google Tag Manager?
Think of Google Tag Manager as a container. It will contain all the tracking codes of platforms like Google Analytics, Google Ads, and Facebook Pixel. And instead of you having to edit the website source code to add for each platform, you need to add Google Tag Manager to your website. You can then add and edit other tracking codes right in the management interface of Google Tag Manager. Avoid touching the website source code, which can damage your website.
Does Google Tag Manager make your website slow?
Insignificant, even when you use Google Tag Manager to store other Google code, such as Google Analytics and Google Ads, it is even more compact than adding the code directly to the website source code.
Is it okay to add a tracking code to the website and then add it to Tag Manager?
There will be duplicates, and the numbers may be duplicated in your reports. So, any tracking code that has been added to the website source code does not need to be added to Google Tag Manager anymore. You can remove all tracking codes in the website source code and then add them back to Google Tag Manager for easy management.
How to create and get the Google Tag Manager code
If you have never used Google Tag Manager, learn how to create a Tag Manager account and get its code.
Create a Google Tag Manager container
Step 1: Go to tagmanager.google.com and click the Create Account button.
Step 2: You fill in the information completely and then click the Yes button.
- Account Name : The name of your brand or website.
- Country: Vietnam.
- Container Name : The name of your brand or website.
- Targeting Platform: Web.
Step 3: You tick I accept the Terms of data processing required by GDPR. Then click the Yes button above.
Step 4: After creating the Tag Manager container, click Submit for it to work.
Step 5: You don’t need to fill in anything; click Publish above.
Step 6: You do not need to fill in anything; click Continue below.
Wait a few seconds Google Tag Manager will finish publishing. Then, click on the workspace tab (just below the logo Tag Manager) to slightly make the code.
Get the Google Tag Manager code
In the workspace tab of Google Tag Manager, you click on the ID will receive 2 codes. To make the article easier to understand, I will name them as follows:
- Code A: The code added between the <head> and </head> of the website.
- Code B: Is the code added between the <body> and </body> of the website.
How to Add Google Tag Manager to WordPress
One of the most popular open web platforms today is WordPress. And it only takes 2 steps to add Tag Manager to WordPress.
Step 1: To add secure Google Tag Manager code to your WordPress website, install the Insert Headers and Footers plugin.
Step 2: Go to Settings and select Insert Headers and Footers. Then you add the Tag Manager code as follows.
- Script in Header: You add code A.
- Scripts in Body: You add code B.
After adding, remember to click Save. Note: If you use a cache generator plugin, please clear the cache.
How to add Google Tag Manager to LadiPage web web
How to add Google Tag Manager website LadiPage with ID code: Go to Settings > Conversion code. Then paste the ID code into the Google Tag Manager ID section. You can see its example to understand.
How to add Google Tag Manager to LadiPage by code: Go to Settings > Javascript/CSS Code. Then you paste the Google Tag Manager code as follows.
- Before the </head> tag: You paste the code A.
- Before the </body> tag: You paste the code B.
After adding the Tag Manager code, remember to click Publish LadiPage.
How to add Google Tag Manager to Haravan website
In Vietnam, Haravan is also very popular, and here are 2 steps to add Tag Manager to Haravan surprisingly easily.
Step 1: You log in to Haravan’s admin page, then go to Website and Interface. In the interface you are using, click the 3-dot button and select Edit code.
Step 2: You find it in the Layouts folder; click theme.liquid to edit. You add code A before </head> and code B after <body> as shown below. After adding, remember to click Save.
Note: This method cannot be added on Haravan’s Payment pages. You can only send the Tag Manager code to Haravan’s technical staff to help you. Please keep these two things in mind:
1. Make sure to add, otherwise you’ve met a “lazy” technical staff. (I’ve used this method a few times and it’s ok but I have to be very hard on them)
2. Please check with the tool at the bottom of the article to make sure they have successfully added you.
How to add Google Tag Manager to another website
Usually, you guys are affiliates or use static websites (HTML files). You find the right HTML file of the landing to edit and then add the Google Tag Manager code according to this rule.
<head>
Code A
</head>
<body>
Code B
</body>How to check if Google Tag Manager is working?
After adding Tag Manager to the web already, but how do we know if it’s working? In many cases, the agency side asked the customer to notify the website service provider to add it, but in the end, one side said it had added the other party and said it didn’t.
Then how to check if Google Tag Manager has been added to the web and add it correctly, I will show you.
Step 1: You install the Tag Assistant utility on the Chrome browser. Click the button below to open the utility page.
Step 2: You click the widget button and then click the pin button next to Tag Assistant to bring it up for easy use.
Step 3: You open the website with Google Tag Manager added, then click on Tag Assistant and then click Enable and reload the website.
The way to know if the tags in the Tag Assistant have been added correctly or not is as follows.
- Blue and Green: You added it correctly, the tracking codes worked.
- Yellow and red: You have added wrong, need to check again.
Some common errors when adding Tag Manager to the website
If you use it for the first time, you may encounter an error when adding Tag Manager to the web. Here are some common errors and how to deal with them.
- Added correctly but why does Tag Assistant check not work properly: There are 2 cases. 1 is that you have not clicked submit as in the step of creating the Tag Manager container . 2 is that you added the wrong place of code A and code B, please read the article carefully and see if you have added it correctly.
- Code found outside of <body> tag: Check if code B is correctly added between <body> and </body>.
- Invalid or missing account ID: Check if your Google Tag Manager ID code is incorrect.
- Tag is included in an iframe: Your Tag Manager tag must be placed directly on your website, not through an iframe.
The errors below are caused by you adding code B in the middle of an element tag in HTML that is not <body>. You must add code B right after <body> to be correct. Check the location of add code B.
- <script> tag must not be included in a <span>
- <script> tag must not be included in a <section>
- <script> tag must not be included in a <p>
- <script> tag must not be included in a <i>
- <script> tag must not be included in a <header>
- <script> tag must not be included in a <form>
- <script> tag must not be included in a <footer>
- <script> tag must not be included in a <dl>
- <script> tag must not be included in a <center>
- <script> tag must not be included in a <ns:robots>
- <script> tag must not be included in a <flow:ifenabled>
- <script> tag must not be included in a <div>
- <script> tag must not be included in a <div>
How to use Google Tag Manager for tracking
This article’s content focuses on the main problem of adding Tag Manager to the web. As for how to use it to track styles, I will write another article and update the link here, or you can see it in the article section about Google Tag Manager.
- How to to tracking MGID conversion with Tag Manager.
- Tracking Tawk.to conversions with Google Tag Manager.
Conclusion
Regardless of the website platform, the rules for adding Tag Manager code to the web are the same, code A is before </head>, and code B is after <body>. If there is a popular platform in Vietnam that you have not been able to add, please comment below, I will support you and update the article. It would help if you also looked at how to add user to Google Tag Manager to share permissions for employees or agencies.
