10:47 All In One With Google Tag Manager?

All In One With Google Tag Manager?

By Anonymous Updated: 05 Oct, 2018
Google Tag Manager interface

In the era of digital marketing thriving in terms of data, regardless of whether a site is a big ecommerce site or a small business page, it is important to pay close attention to what happens. After its flashy interface. One of the important things that a webmaster needs to grasp is the way people interact with the site, as well as the traffic information, location ... of the customer.


Google Analytics can provide a lot of important details like that, but it still has many limitations. By placing gadgets, such as Google Analytics, Google Ads, or non-Google gadgets, like a tag inside Google Tag Manager Tag Manager, so that you can collect more data. Specific data enhancements for the purpose are Tracking Data, Traffic, Remarketing ...


What is Google Tag Manager (GTM)?


Google Tag Manager, or Google Tag Manager (GTM), is a tool that simplifies the management of tags within your website. With GTM, you can work with tags without touching the source code. Through this online tool, you can deploy and manage different marketing analytics tags on your website or mobile app, even if it's not part of a Google product. Widgets can be tagged as Google Analytics, Histats, Twitter, Bing Ads, Crazy Egg, Hotjar ...


Google Tag Manager interface
Google Tag Manager interface

About cards in GTM


A tag is a javascript snippet used to crawl and measure from your site and then send that data to a 3rd party. You can use the tag for all purposes including scrolling tracking. , track form submissions, conduct surveys, create maps, market or track people to your site. They are also used to track tasks such as downloads, clicks on certain links, or items removed from the cart.


3rd party services can be Google Analytics, Google Adwords, Twitter, Facebook, Comscore ... If another tag has no template in GTM you can add your own custom code.


Websites often use different tags and the amount of code needed can be very large and must interfere with the source code. However, using the GTM tool will reduce the management of tracking tasks on your site.


Tag in Google Tag Manager
Tag in Google Tag Manager

Google Analytics tag example (also known as Google Analytics tracking code):




(i, s, o, g, r, a, m) {i[‘GoogleAnalyticsObject’]= r; i[r]= i[r]|| function () {


(i[r].q = i[r].q ||[]) .push (arguments)}, and[r].l = 1 * new Date (); a = s.createElement (o)


m = s.getElementsByTagName (o)[0]a.async = 1; a.src = g; m.parentNode.insertBefore (a, m)


} (window, document, 'script', '// www.google-analytics.com/analytics.js','ga');


ga ('create', 'UA-XXXX-Y', 'auto');


ga ('send', 'pageview');




Here's an example of a Facebook card (also known as a Facebook Pixel Code):


n (f, f, q) n.queue.push (arguments)}; if (! f._fbq) f._fbq = n; n.push = n; loaded = 0; n.version = '2.0'; n.queue =[]; t = b.createElement (e); t.async = 0; t.src = v; s = b.getElementsByTagName (e)[0]s.parentNode.insertBefore (t, s)} (window, document, 'script', '// connect.facebook.net/en_US/fbevents.js'); fbq ('init', '879030082151151'); fbq ('track', 'PageView');


As you can see, the tag is simply a piece of code. You can add this code (or tag) directly to your website by copying the code, in your webpage template (such as header.php), or you can add tags indirectly on your site. , through GTM.


The advantages and disadvantages of GTM


Adding tags to your site through GTM makes it easy for you to have more control over which tasks trigger, disable, or turn off site tracking tags easily. You can easily change the functionality of the tags you have added on your site, by adding, editing, enabling, or deleting or deleting any tag with just a few clicks of the button. Almost everything on your website can be managed with tags from tracking customers to measuring marketing tools ... Also, when you use GTM you can add, edit, enable, Turn off and delete all site tags from the central location.


GTM reduces dependence on developers but not completely eliminates. It also allows you to dynamically restrict the source code, but you can still add and change tags yourself. This is a great advantage, but you will still need someone to add the container code to each page of your site, if more complex then you may need to seek help from someone who understands the code.


For businesses, using GTM will be easier to edit without developer intervention, as there are technical limitations to managing the site. GTM can manage dozens of tags at the same time without slowing page load.


The most advantageous use of GTM is the ability to track on your site that takes less time. GTM provides many tags and its variable can track advanced in a short time. Manual processing takes one to several days without GTM. For example, if you want to track clicks on all external links to your site, you can only define them through the web pages with the link. If you do not use GTM, you'll have to add the event tracking code to any outbound links that are time-consuming and error prone. Similarly, if you are using GTM, you can track clicks on the embedded button on your web pages in just a few minutes.


Cards can slow down site speed if sync is enabled. One problem with traditional tracking tags is that if they are fully activated they can slow down your page load. When the card is activated synchronously, if a card is delayed loading it will slow down all other cards. Pages take a long time to load pages, the ability to leave without waiting for page load is huge. However cards created in GTM are asynchronously loaded by default, meaning each tag is triggered whenever it is ready. You can set the priority order to avoid slowing down the website.


GTM can be used for AMP sites and mobile apps. You are not restricted from using GTM with standard web pages. GTM can also be used to manage tags for AMP sites and mobile apps. In the case of a mobile app, GTM has a huge advantage because it allows you to add and edit your tags without having to release an updated version of your app, which users can not load. down quickly. In some respects, using GTM for an AMP site or mobile app is quite similar to using GTM for a regular site, but they are a bit different. In this tutorial, we will focus on exploring GTM on the website.


What is the structure of GTM?


In fact, GTM is pretty easy to learn and use if you spend some time, which is of course because of any tools we have to learn a little bit. In this case, you can see the GTM as a car, its engine will be the container tag, its shell (interface) and the steering wheel is the user interface.


The container tag provides all the functionality needed for the GTM tool, to run and deploy tags on your site. The user interface, which when used as an end user, makes it easy to control the container tag.


Just like when you're driving, the steering wheel makes it easy for you to control the car's engine, and to control the car to the left or right. The outer casing is made to look more eye-catching and more intuitive.


When developers refer to GTM, they usually consider container tags. For non-programmers who refer to GTM, they usually interact in the UI.


Therefore, depending on the context, GTM can have many meanings like 'container tags' or 'user interfaces'.


What is a container tag?


The container tag in GTM is a two-part tag.


The first part of the container tag is placed in the header (...) of all pages on your website:


(w, d, s, l, i) {w[l]= w[l]||[]w[l]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 .j = id = 'i + dl; f.parentNode.insertBefore (j, f);}) (window, document,' script ',' dataLayer ',' GTM-TXAAA ');


The second part of the container tag is placed immediately after the opening tag of all the pages on your website:



If you already have a GTM account, you can see the container code by following the steps below:


Step 1 : Log in to your GTM account: https://tagmanager.google.com/


Step 2 : Click the 'Admin' tab.


Step 3 : Click the 'Google Tag Manager Settings' link:


You will now see your GTM container tag code:


GTM container tag code
Tag container tag in GTM

Where does the container ID come from?


Part of the container tag code is 'GTM-TXAAA', it's called ID container.


This ID is used to uniquely identify each container tag. There is another piece of code with the name 'gtm.js 'Is a JavaScript library, which is used by the container tag.


When the container tag code is added to your site, GTM is now installed on your website.


Summary, Google Tag Manager is a container tag.


How to get a container ID?



  • Step 1: Create a new GTM account. It is mandatory for GTM to have a Google Account, without a Google Account, then create one. See how to create a GTM account just below.

  • Step 2: If you already have a GTM account, sign in and look for the GTM container ID located at the top right of the user interface.


The container ID is located at the top right of the interface
The container ID is located at the top right of the interface

What is a Google Account?


If you have an account to access the website: https://accounts.google.com/SignUp


If you do not have a Google Account, you can create one by visiting this link and following the instructions there: https://accounts.google.com/SignUp. Almost all Google gadgets and services are able to sign in / sign up with a Gmail account. Such as Google Search Console, Google Analytics, Google Correlate ...


Note: If you use Gmail, you already have a Google Account.


How to create a GTM account?


You need a Google Account to create a GTM account. So when you have a Gmail account, you can use Google gadgets by default, by signing in to your Gmail account and password.



  • Step 1: Use your Google account, visit https://tagmanager.google.com/ and then sign in with your Google Account login.

  • Step 2: Click on the 'Create Account' link on the homepage.

  • Step 3: Name the new GTM account after your company name and then select the country from the list available.

  • Step 4: Select the 'Share anonymously with Google and others' checkbox (to enable benchmarking) and then click the 'continue' button.

  • Step 5: Enter the container name after your website name and then select 'Web' (as long as you want to use GTM on the website, not on the mobile app). So, if your website name is 'seoconghuong..com' then your container name must be 'seoconghuong.com'.

  • Step 6: Click the 'Generate' button.

  • Step 7: Read the GTM Terms of Service and then click the 'Yes'

  • Step 8: If you do business in the European Economic Area, you first need to read and accept the GDPR Data Processing Terms before you can accept the GTM Terms of Service.

  • Step 9: You will now be shown the code to install Google Tag Manager. As part of the GTM containter, the GTM-XXXXXXX snippet is called the container ID. This ID is used to uniquely identify each GTM container tag. So, do not use the container ID mentioned here, just use your own website. You can find and use your own unique container ID, located at the top right of the user interface.


This ID is the unique identifier for each container
This ID is the unique identifier for each container

GTM account and Container tag


Each GTM account can have one or more container tags. The general rule is to create a container tag for each website, which is by default. So, if you have 3 different websites, then you would create 3 different tag tags, one per site but only on the same GMT.


Create / Use multiple GTM accounts


Interestingly, you can create multiple GTM accounts from a single Google Account login. You can also create one on a different Google Account if you like, but for convenience, integration is better for your administration.


Often, every company or organization should have a GTM account. And you can create a new GTM account from scratch, or you can add an existing GTM account to your GTM account.


Marketers often require customers to add their current GTM account to their GTM account. Since we can create / add multiple GTM accounts from one Google Account, it is not necessary to create one once it is available. We may use some Google accounts to manage multiple GTM accounts.


Card Manager Deployment Guide



  • The process of setting up Google Tag Manager includes the following steps:


Step 1: Define tracking requirements


Think about the information you want to collect, thinking of the additional tags needed for tracking the site.


Tracking requests will depend on the current migration status, such as:



  1. Moving from a non-Google product like "Omniture" to Universal Analytics (UA)

  2. Jump from classic Google Analytics to Universal Analytics

  3. Migration from Google Analytics card is hard-coded to tags deployed via GTM

  4. Install the new Google Analytics and all other cards through GTM

  5. Migrate hundreds of different configurations along with Classic GA to Universal Analytics via GTM


Step 2: Perform a card check of the live site


In card testing, it is important to identify all tags that are hard coded on the live site.


The following information about each tag should be noted.



  1. What is this tagging purpose? What data is being collected

  2. Where cards are sent

  3. Cards still serve the original purpose or are outdated

  4. How tags collect data

  5. Data capture card on the page

  6. When cards collect data


Need to record all the information back into an excel file to be able to track the card better.


Step 3: Create technical design and functionality for the card


Functional design is what you have to do for your card, engineering design is how the intended function will be implemented in the code and produce the result.


The format your tag will create is also the technical design of your tag. Once you know the technical design and functionality, you can check the tags on your development site and make sure it works the way it was before implementing the tag on the customer's mediation site.


Step 4: Plan card deployment


Scheduling involves defining the entire sequence in which you will enter each tag in GTM without breaking current track or creating technical issues.


There are two ways to implement the tag


Complete Card Deployment: This means moving all of your hard-coded cards to GTM.


+ Partial tag implementation: This means that only a subset of hard-coded tags is migrated to GTM.


But the whole point of using GTM is to eliminate the need to edit site code multiple times, just to add, delete or edit tags. You will not be able to accomplish this goal by keeping the tags hard-coded on the site.


To get the full benefit of GTM, you must remove all hard-coded tags from the site and deploy them through the container tag.


Step 5: Risk assessment


Moving your card to GTM is not as easy as you think. The GTM card management solution will not let you go beyond basic tasks (setting up Google Analytics tracking code, some basic goodies, etc.) if you do not know the DOM. and JavaScript.


The power of GTM lies in its use of variables. Many predefined variables will not perform the trick and you need to create custom JavaScript variables, custom HTML tags, or use DOM elements, and so on.


You need to have good knowledge of DOM and Javacript code



  • Can you drill down into a specific DOM element?

  • Do you understand how console debugging works?

  • Do you understand what the variable is, how the function and the data layer work?

  • Do you have the confidence to debug your GTM installation or to revert to a previous version of the operation if something goes wrong?


You need to do this type of risk assessment before deciding to move the card to the deployment of your outsourcing card or your own to a third party.


In addition to technical expertise, you should consider the following factors before starting the migration process:



  1. The size and complexity of the site

  2. The complexity of tracking


Step 6: Create project scope document


The scope document outlines all the distributions of the project and identifies constraints, assumptions, resources, costs and milestones.


Move the card to a GTMlaf project, for both you and IT. Create a project scope document to acquire a client as they need to know in advance about your requirements before commencing the migration process.


It's a great way to manage your customer's wants and avoid times or disagreements or conflicts.


Step 7: Purchased from IT


The main purpose of using GTM is to accelerate and streamline. There are many blogs out there that can tell you how to use GTM to troubleshoot specific tracking issues, and in many cases, if you follow the instructions, you can fix the problem.


Each time you follow someone's instructions or use someone else's code without understanding your development environment, you will have certain risks with your code and actions. This risk will increase if you work on a large site with dozens of different configurations.


By choosing to ignore IT by implementing the code through GTM, you take complete responsibility for your code and dynamic row. A typical commercial website is updated at anytime and if it does not involve IT in code implementation, they may place the wrong tag containing or breaking your data layer.


Step 8: Set up a Google Tag Manager account


Actions for creating a Google Tag Manager


1.Sign in to GTM: https://tagmanager.google.com with your Google username and password.


2. Click the 'create account' link on the homepage. Usually only one GTM account per company.


3. Enter a name for your new GTM account after your company name and then select your country from the drop-down list.


Add new account
Add new account

4. Select "Share anonymously with Google and others" then click the resume button.


Enter your container name after the site name and then select 'Web' (use the GTM area on the site).


Each company should only have one account
Each company should only have one account

6.Click 'Create'


7. Read the Google Tag Manager terms of service agreement and then click the 'Yes' button:


Read the terms of agreement and accept
Read the terms of agreement and accept

8. If you do business in the European Economic Area, you first need to read and accept the GDPR's data processing requirements before you can accept the GTM terms of service agreement.


Step 9: Install the GTM container tag on the staging site


Navigate to the 'administration' section of your GTM account and then click on the 'Google Tag Manager Setup' link.


Take that, copy the GTM code on every page of your staging site by following the GTM guidelines:


Copy the GTM code and follow the instructions
Copy the GTM code and follow the instructions

Make sure your container tag is located on each site, not ruining the functionality of the staging site, or creating tracking issues on the staging site.


If you have a mobile-specific application, you also need to create a separate mobile app container tag.


Step 10: Create, test and publish cards on the staging site


Create and test each card on a staging site according to your card deployment plan. Cards that depend on one another can be deployed simultaneously, deploying cards in the same order without breaking the current track or creating technical problems.


Add the data layer just above the code snippet and initialize it for each site individually, checking the tag in preview mode and debugging.



  • Check cards on different browsers and web devices.


Ensure that the tag is being triggered from the GTM container and not from the page source.


Make sure the tag is not activated twice and is firing on all targeted sites.



  • Remember the GTM debugger does not provide full testing.


Do not blindly believe in this unique testing tool.


Once done, publish each card on the staging site and also remove the corresponding hard-coded card from the site.


Step 11: Install the GTM container tag on the live site


Create and install a new GTM container tag on the live site. Make sure that this tag does not ruin site functionality, check the container tag in browsers and other devices, it's important that you keep two different versions of your own container tags. .


Maintaining two different versions of the container tag can be difficult but this is necessary and avoids risk on the live site.


Step 12: Create, publish and test cards on the live site


GTM configurations (tags, variables, triggers) are not automatically imported from the container into the container directly. You can not be sure that the staging container is the exact container directly, and you will not want to accidentally overwrite the container's configuration settings directly.


Instead of importing the GTM configuration from the staging container, manually create, publish and test each tag on the live site as per your deployment plan.


Step 13: Perform a card check of the live site


Perform another card check on the live site. The purpose of this test is:



  1. No pages are missing container tags.

  2. The metrics and marketing tag is on all targeted pages.

  3. Mỗi thẻ đang kích hoạt và đang được kích hoạt khỏi vùng chứa chứ không phải từ mã nguồn của trang.

  4. Không có thẻ nào được kích hoạt hai lần.

  5. Các lớp dữ liệu điều nguyên vẹn.

  6. Mỗi thẻ đang hoạt động theo cách cần thiết.

  7. Không có thẻ nào vi phạm tính năng theo dõi hoặc chức năng hiện tại.


Nhập – Xuất Các Tệp Vùng Chứa Trong GTM


Lợi thế của việc sử dụng tính năng vùng chứa xuất trong GTM là gì?


Thông qua tính năng vùng chứa xuất, bạn có thể chia sẽ cấu hình GTM của mình (còn gọi là thẻ, trình kích hoạt và biến) với bất kỳ bên thứ ba nào. Điều đó có nghĩa, nếu bạn muốn chia sẻ cấu hình GTM của mình để theo dõi video với bên thứ ba hoặc trng web khác, bạn có thể thực hiện điều đó thông qua tính năng vùng chứa xuất GTM. Đối với việc muốn chia sẻ phiên bản vùng chứa hoặc không gian làm việc cụ thể, nếu bạn muốn sao lưu một phiên bản vùng chứa hoặc không gian làm việc cụ thể hãy sử dụng tính năng xuất vùng chứa.


Cách xuất không gian làm việc trong GTM


Làm theo các bước sau đây:


Bước 1: Đăng nhập vào tài khoản GTM của bạn và sau đó nhấp vào tab ‘Quản trị’:


Đăng nhập vào tài khoản GTM của bạn
Đăng nhập vào tài khoản GTM của bạn

Bước 2: Nhấp vào liên kết ‘Xuất vùng chứa’ bên dưới cột ’Vùng chứa’:


Xuất vùng chứa
Xuất vùng chứa

Bước 3: Nhấp vào nút ‘Chọn phiên bản hoặc không gian làm việc’


Bước 4: Chọn không gian làm việc bạn muốn xuất:


Chọn không gian làm việc bạn muốn xuất
Chọn không gian làm việc bạn muốn xuất

Bước 5: Nhấp vào nút xuất. Sẽ có một hợp thoại cung cấp để tùy chọn mở JSON không gian làm việc đã xuất hoặc lưu tệp vào đĩa cứng.


Bước 6: Lưu tệp và sao đó chọn OK


Bước 7: Nhấn hủy để đóng tính năng xuất vùng chứa.


Như vậy, mình vừa giới thiệu cho các bạn những điều cơ bản về Google Tag Manager, để cho những bạn từ cơ bản đến nâng cao có thể dễ dàng tìm hiểu và tự áp dụng được cho websitw của mình. Dù rằng có thể mình và các bạn đã sử dụng qua GTM, nhưng ắt hẳn vẫn còn nhiều kiến thức chưa biết về công cụ tuyệt vời này. Thế nên nếu bài viết còn thiếu sót thì các bạn cùng chia sẻ bên dưới để mọi người được học hỏi với nhé.


The post Tất Cả Trong Một Với Google Tag Manager? appeared first on Seo Plus.