Managing code snippets and pixels on your website or app to measure traffic can be a little bit stressful, especially if you have a marketing team that constantly needs to make changes. Luckily, there are tools out there like Google Tag Manager that will make them a little easier to wrangle.
在网站或应用程序上管理代码段和像素来衡量流量可能会有些压力，尤其是如果您的营销团队经常需要进行更改时。 幸运的是，还有诸如Google跟踪代码管理器之类的工具，可以使它们更容易处理。
什么是Google跟踪代码管理器？ (What is Google Tag Manager?)
If you’ve ever worked with any kind of analytics software, or you have worked with a marketing team before, you’ve probably heard the word pixel thrown around. A pixel is literally what it sounds like: a 1x1 image that sends information to a server through an image request.
如果您曾经使用过任何种类的分析软件，或者您曾经在市场营销团队中工作过，那么您可能已经听说过像素一词。 一个像素实际上就是它的听起来：一个1x1的图像，它通过图像请求将信息发送到服务器。
Though pixels are still common, many teams have moved towards small javascript snippets that sit right along side the rest of your HTML. They will allow software like Google Analytics to run their own scripts on your page, sometimes even with a pixel backup, in the event that a browser doesn't run JavaScript.
尽管像素仍然很常见，但许多团队已转向使用小型JavaScript代码段，这些代码段与HTML的其余部分并排放置。 他们将允许Google Analytics(分析)之类的软件在您的页面上运行自己的脚本，即使浏览器未运行JavaScript，有时甚至具有像素备份。
These pixels and snippets work great. But when you’re dealing with a bunch of them and they all use the same data, it might seem like you’re just adding to an unmanageable mess of single use code snippets that never feel like they’re in the right place.
这些像素和代码片段效果很好。 但是，当您处理一堆它们并且它们都使用相同的数据时，似乎您只是在添加一些难以处理的一次性代码片段，这些片段永远不会感觉到它们在正确的位置。
Google Tag Manager, or GTM, is a software solution to manage these pixels and snippets for you. To start, GTM works pretty much like any of those other code snippets, as it’s a code snippet itself. But where it shines is that you get to manage the rest of those pixels and snippets along with the flow of data inside GTM, leaving it to be the only snippet to manage within your code.
Google跟踪代码管理器或GTM是一种软件解决方案，可以为您管理这些像素和代码段。 首先，GTM的工作原理几乎与其他任何代码段一样，因为它本身就是一个代码段。 但是，最引人注目的是，您可以管理其余的这些像素和代码片段以及GTM内部的数据流，从而使其成为在代码内进行管理的唯一代码片段。
我为什么要使用它？ (Why do I want to use it?)
更少的代码更改，更少的部署 (Fewer code changes, Fewer deploys)
Most of the time, if you’re managing these snippets in your code, each change will require another merge request and another deploy to get the changes out. Not only does this add more risk, as you need to make yet another change to the code, but this is additional time spent dealing with your deploy pipeline and making sure everything is working as it should be.
在大多数情况下，如果您要在代码中管理这些代码段，则每次更改都将需要另一个合并请求和另一个部署才能将更改取出。 这不仅增加了更多的风险，因为您需要对代码进行另一次更改，而且还浪费了更多时间来处理部署管道并确保一切正常进行。
GTM allows you to break outside of that flow, giving you more flexibility to get changes out that could give some needed insight into fixing some UI errors or could add a few bucks to the bottom line.
GTM允许您突破这种流程，让您拥有更大的灵活性来进行更改，从而可以更深入地了解解决某些UI错误或增加底线的费用。
更易于管理的数据流 (More manageable data flow)
Wrangling all the different variables throughout your application, making sure they’re all available in the right spot, and keeping up with avoiding breaking any changes can prove to be challenging. This also makes your code more fragile and prone to breaking.
整理整个应用程序中的所有不同变量，确保它们都在正确的位置可用，并努力避免破坏任何更改，这可能是具有挑战性的。 这也使您的代码更脆弱，更容易被破坏。
Google Tag Manager utilizes what they call a dataLayer, which essentially functions like an array of events that it listens to. This allows you to push or seed new data to make available within GTM itself. And it means you’re funneling all of your variables to one spot in the code. This lets whoever manages GTM do the rest – they can use that data with peace of mind, knowing that your data flow won’t break after forgetting to update 1 out of 10 spots.
Google跟踪代码管理器利用了他们所谓的dataLayer ，它的功能本质上类似于它侦听的事件数组。 这样，您就可以推送或播种新数据，以在GTM自身中使用。 这意味着您要将所有变量集中到代码中的某个位置。 这样一来，管理GTM的任何人都可以完成剩下的工作–他们知道您的数据流在忘记更新10个点中的1个之后就不会中断，因此可以放心使用。
赋予营销人员更多访问权限的能力 (Ability to give marketers a little more access)
This is an opportunity to free up some of your time by letting the marketing team deal with tag changes themselves rather than you being the middle man for them. Perhaps they need to adjust the ID for your analytics software or maybe they want to add Crazy Egg. With the right permissions (explained later), they can do all of the work and send the changes to you for review before publishing them.
通过让营销团队自己处理标签更改，而不是让您成为标签中间商，这是释放您一些时间的机会。 也许他们需要为您的分析软件调整ID，或者他们想添加Crazy Egg 。 有了正确的权限(稍后说明)，他们可以完成所有工作并将更改发送给您以供审核，然后再发布它们。
这与Google Analytics(分析)有什么关系？ (How does this relate to Google Analytics?)
There is no direct relation. But along with Google Analytics, GTM is another tool in the Google Marketing Platform and gives you the immediate ability to more easily manage your Google Analytics installation. GA comes with prebuilt tags inside GTM that make it a breeze to set up.
没有直接关系。 但是，与Google Analytics(分析)一起，GTM是Google Marketing Platform中的另一个工具，使您可以立即轻松地管理Google Analytics(分析)安装。 GA在GTM内随附了预构建的标签，因此设置起来很容易。
我还能用它做什么？ (What else can I use this for?)
Google Analytics is just one of many code snippets this can be used for. Ideally, you’re not going to write your entire site here. But you have the ability to pretty much do whatever you want on your own site as long as Google doesn’t deem it malware.
Google Analytics(分析)只是可用于其中的许多代码片段之一。 理想情况下，您不会在此处编写整个网站。 但是只要Google不认为它是恶意软件 ，您就可以在您自己的网站上做任何事情。
Some other use cases include:
其他一些用例包括：
Conversion and remarketing pixels with Google Ads
Google Ads的转化和再营销像素
A/B Testing with Google Optimize or AB Tasty
使用Google Optimize或AB Delicious进行 A / B测试
Client side error tracking (and logging them)
客户端错误跟踪(并记录它们)
- GDPR compliance management GDPR合规管理
There are many baked-in like the examples above, meaning you don’t even need to mess with code. Just add the IDs or settings and go. But for whatever custom solution or tag you need, you can always set up the HTML manually.
像上面的示例一样，有很多内置的功能，这意味着您甚至不需要弄乱代码。 只需添加ID或设置即可。 但是，无论您需要哪种自定义解决方案或标签，都可以随时手动设置HTML。
在加入之前我需要了解什么？ (Anything I need to know before jumping in?)
Before jumping right in, let’s familiarize ourselves with a few key terms that will make this ride a little easier.
在继续学习之前，让我们熟悉一些关键术语，这些术语会使乘车变得更容易。
标签 (Tags)
Tags in GTM are your pixels or code snippets. A tag includes a single instance of a contained piece of code that is used for one function.
GTM中的标签是您的像素或代码段。 标签包括用于一个功能的所包含代码的单个实例。
Example: your Google Analytics snippet will be one tag and if you add Crazy Egg, that will be another tag.
示例：您的Google Analytics(分析)摘要将是一个标签，如果您添加Crazy Egg，则将是另一个标签。
变数 (Variables)
A variable is a name that you give a predetermined or dynamic value. The variable can be based on a variety of different things, hence the name “variable”. But it will function as a single name that you can give and reference that will never change when using it.
变量是您提供预定值或动态值的名称。 变量可以基于各种不同的事物，因此命名为“变量”。 但是它将作为您可以提供和引用的单一名称，使用时不会改变。
Example: we’ll set up your Google Analytics ID as a variable, meaning you’ll use that variable within the GA tag itself. If you ever need to update that ID, you won’t need to modify the tag or any other tags that use the variable – you’ll only need to update the variable itself.
示例：我们将您的Google Analytics(分析)ID设置为变量，这意味着您将在GA标签本身中使用该变量。 如果您需要更新该ID，则无需修改标签或其他使用该变量的标签-您只需要更新变量本身即可。
扳机 (Triggers)
Triggers are the event or action that make your tag fire or load. This can happen in a variety of ways, such as when all or a specific page loads, when something is clicked, or when you have a completely custom event you fire with Javascript.
触发器是触发或加载代码的事件或操作。 这可以通过多种方式发生，例如，加载全部或特定页面时，单击某些内容时或使用JavaScript触发完全自定义事件时 。
Example: when we set up Google Analytics, our trigger will be when any page loads.
示例：当我们设置Google Analytics(分析)时，触发器将在加载任何页面时触发。
容器 (Container)
GTM allows you to manage multiple “containers” or groups of tags within your organization. This is helpful when you have one company with a few different website properties.
GTM允许您管理组织中的多个“容器”或标签组。 当您拥有一家拥有几个不同网站属性的公司时，这将很有帮助。
Example: you’re a small company under a parent company. The parent company wants to maintain one organization, but each smaller company gets their own container, as they have their individual needs for tags and code snippets.
示例：您是母公司下的一家小公司。 母公司希望维持一个组织，但是每个较小的公司都有自己的容器，因为它们对标签和代码片段有各自的需求。
如何设置？ (How do I get set up?)
设置您的帐户 (Getting your account set up)
The first thing you’ll need to do is get your account set up. After getting to the tag manager homepage, you’ll probably want to use your preexisting Google account. If you’re in an organization setting it up for the organization, you most likely want to use your business email, otherwise your personal account works okay too.
您需要做的第一件事就是设置您的帐户。 进入标签管理器首页后 ，您可能要使用您现有的Google帐户。 如果您在组织中为该组织进行设置，则很可能要使用公司的电子邮件，否则您的个人帐户也可以。
Next, create a new GTM account:
接下来，创建一个新的GTM帐户：
Once there, fill out the form appropriately. The Account Name should represent the top level of your hierarchy and the container name should represent the specific installation instance.
到达后，适当填写表格。 帐户名称应代表层次结构的顶层，而容器名称应代表特定的安装实例。
As for the target platform, choose whichever makes sense. If it’s a website or web app, Web makes the most sense here.
对于目标平台，选择任何有意义的。 如果是网站或Web应用程序，那么Web在这里最有意义。
查找并安装代码段 (Finding and installing your snippet)
As soon as you accept the terms and hit create, you’ll be presented with a snippet in a little modal. You'll want to do exactly what it says and install the snippets per the instructions.
接受条款并点击创建后，您会看到一个带有小模式的代码段。 您需要按照说明正确执行操作，并按照说明安装代码段。
Didn’t get the screen or accidentally exited out? You can find your snippet again by navigating to Admin in the top navbar and then click Install Google Tag Manager under Container to the right.
没有收到屏幕或意外退出了吗？ 您可以导航到顶部导航栏中的“管理员”，然后单击右侧“容器”下的“安装Google跟踪代码管理器”，再次找到您的代码段。
测试它是否正常 (Testing that it’s working)
To make sure it’s working, let’s verify a few things:
为了确保它能正常工作，让我们验证一些事情：
- We created our account 我们创建了帐户
- We created our container 我们创建了容器
- We installed the Google Tag Manager snippets on our page and the change are live 我们在页面上安装了Google跟踪代码管理器代码段，更改已生效
Once all of those things are true, go ahead and click the Preview button in the top right of the page.
一旦所有这些都成立，请继续并单击页面右上方的“预览”按钮。
If successful, you’ll now see an orange banner at the top of the page that says you’re in Preview Mode:
如果成功，您现在将在页面顶部看到一个橙色横幅，表明您处于预览模式：
Now wander over to the website that you installed GTM on and you should now see a banner at the bottom of the page. This will serve as your Debugger for working with GTM’s Preview.
现在，转到安装了GTM的网站，您现在应该在页面底部看到一个横幅。 这将作为您与GTM预览版一起使用的调试器。
You should see something similar to that, which means it worked! 🎉
您应该看到类似的内容，这意味着它起作用了！ 🎉
Note: if you have an ad blocker on, similar to GA, you may need to disable it on the page you’re installing on in order to see it working.
注意：如果您启用了广告拦截器(类似于GA)，则可能需要在要安装的页面上将其禁用，以使其正常运行。
太好了，它正在工作，那么Google Analytics(分析)呢？ (Cool, it’s working, what about Google Analytics?)
Now that we have a basic installation of GTM working, let’s set up Google Analytics. First we'll want to do some prep, so let's jump back over to the Tag Manager dashboard.
现在，我们已经基本安装了GTM，可以开始设置Google Analytics(分析)了。 首先，我们需要做一些准备，因此让我们跳回到标签管理器仪表板。
创建一个设置变量 (Create a settings variable)
Navigate to Variables in the left sidebar and then click New beside User-Defined Variables.
导航到左侧栏中的“变量”，然后单击“用户定义的变量”旁边的“新建”。
For the name, enter “GA Settings” and under Variable Type, click through and select Google Analytics Settings. Enter your Google Analytics Tracking ID (or Property ID) in the appropriate field, and finally click Save, at which point you have your new settings variable.
对于名称，输入“ GA设置”，然后在“变量类型”下，单击并选择Google Analytics(分析)设置。 在适当的字段中输入您的Google Analytics(分析)跟踪ID(或媒体资源ID)，最后单击保存，这时您将拥有新的设置变量。
创建一个新的GA标签 (Create a new GA tag)
Navigate to Tags in the left sidebar and then click New beside Tags.
导航到左侧栏中的标签，然后单击标签旁边的新建。
For the name, enter “GA - All Pages”. Under Tag Type, click and select Google Analytics: Universal Analytics in the panel that pops out from the right.
对于名称，输入“ GA-所有页面”。 在“标记类型”下，单击并在从右侧弹出的面板中选择Google Analytics：Universal Analytics。
After selecting the tag type, under Google Analytics Settings, select your variable from the previous step, which if you followed along will be called “GA Settings”.
选择标签类型后，在Google Analytics(分析)设置下，从上一步中选择您的变量，如果遵循该步骤，则将其称为“ GA设置”。
Next, click in the middle of the Triggering box, which should open a new UI to select a trigger.
接下来，单击“触发”框的中间，这将打开一个新的UI以选择一个触发。
Select All Pages, which should be the only Trigger there if you’re in a new account. It will take you back to the New Tag UI with your newly selected trigger.
选择所有页面，如果您是新帐户，则应该是唯一的触发器。 它将使用新选择的触发器将您带回到新标签UI。
Once the above is done, click Save in the top right of the UI which will then save and create your new Google Analytics tag.
完成上述操作后，点击界面右上角的保存，然后将保存并创建新的Google Analytics(分析)标签。
测试GTM是否正常运行 (Test that GTM is working)
Similar to when we installed GTM to begin with, let’s go back to the Workspace home by clicking Overview in the left sidebar. Then click Preview at the top right.
与开始安装GTM时类似，让我们单击左侧边栏中的Overview返回Workspace主页。 然后点击右上角的预览。
Open up your page GTM is installed on and you should once again see your Debugger, but this time with the Google Analytics Tag loading.
打开您的页面，GTM已安装在其中，您应该会再次看到调试器，但是这次加载了Google Analytics(分析)代码。
我们完成了吗？ (Are we done yet?)
Not quite. Although we have GA working, we need to tweak the configuration to make sure GA and GTM work correctly together.
不完全的。 尽管我们有GA工作，但是我们需要调整配置以确保GA和GTM可以正常工作。
更新页面片段 (Updating the page snippet)
Let’s dig into the code one more time to update our Google Analytics and Google Tag Manager snippets.
让我们再深入研究一下代码，以更新Google Analytics(分析)和Google跟踪代码管理器代码段。
The issue with the installation that we set up here is that we installed GA through the GA instructions and GA inside GTM. This means we have GA installed twice. In practice, GA may send 1 pageview from your default installation and then another via GTM. To avoid this, we want to remove the pageview from the default GA snippet.
我们在此处设置的安装问题在于，我们是通过GA指令和GTM内部的GA安装了GA。 这意味着我们已经安装了两次GA。 实际上，GA可能会通过默认安装发送一次综合浏览量，然后通过GTM发送另一次综合浏览量。 为避免这种情况，我们希望从默认的GA代码段中删除综合浏览量。
If you just have a super basic default installation, I did the work for you and you can go ahead and copy the snippet below. Replace [YOUR GA PROPERTY ID] with your GA Property ID and [YOUR GTM CONTAINER ID] with your GTM Container ID, and swap it out for your existing GA and GTM installation on your page.
如果您只是安装了超级基本的默认安装程序，那么我已经为您完成了工作，您可以继续复制以下代码段。 将[YOUR GA PROPERTY ID]替换为您的GA属性ID，并将[YOUR GTM CONTAINER ID]替换为您的GTM容器ID，然后将其替换为页面上现有的GA和GTM安装。
<script>
// Set up an initial dataLayer configuration
window.dataLayer = window.dataLayer || [{
"gaPropertyId": "[YOUR GA PROPERTY ID]"
}];
// Configure gtag and your GA ID
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[YOUR GA PROPERTY ID]');
// Google Tag Manager snippet
(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+'>m_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', '[YOUR GTM CONTAINER ID]');
</script>This should REPLACE your current Google Analytics snippet if you have one. If you don't, this should go as far in the top of your <head> tag as you can, but under the charset meta tag.
如果有的话，这应该替换您当前的Google Analytics(分析)代码段。 如果不这样做，它应该尽可能地位于<head>标记的顶部，但应位于charset meta标记之下。
For more advanced users, just make sure you’re not sending duplicate pageviews or duplicate events between the page snippet and any GTM tag you create.
对于更高级的用户，只需确保您没有在页面摘要和您创建的任何GTM标签之间发送重复的综合浏览量或重复的事件。
测试GA是否有效 (Test that GA is working)
Follow the steps above to make sure GA is showing up with the debugger.
请按照上述步骤操作，以确保GA随调试器一起出现。
The final thing you’ll want to do is make sure your installation is working using Google’s Tag Assistant extension. Once you install the extension, go back to your page and click Enable in the Extension’s UI.
您要做的最后一件事是使用Google的Tag Assistant扩展程序确保安装正常。 安装扩展程序后，返回页面并在扩展程序的UI中单击“启用”。
Refresh the page and you should see 2 tags, GA and GTM.
刷新页面，您应该看到2个标记，即GA和GTM。
If you notice, my GA tag is blue and yours may be too. Click in to Google Analytics for more info.
如果您注意到，我的GA标签为蓝色，您的标签也可能为蓝色。 单击以获取更多信息。
As you can see, we have a healthy 1 Pageview Request and a note that says Non-standard implementation (hence the blue) This is because we installed it with GTM instead of the default on page.
如您所见，我们有一个正常的1次网页浏览请求，并有一条注释，指出“非标准实现”(因此为蓝色)，这是因为我们将其与GTM一起安装，而不是页面上的默认设置。
发布和部署！ (Publish and Deploy!)
We’re there! Last step is to Publish your Container and make the changes live.
在那里！ 最后一步是发布您的容器并使更改生效。
Click Submit in the Overview UI, enter a name and description.
在概述UI中单击提交，输入名称和描述。
Finally click Publish and your changes will be live on your site!
最后，单击发布，您的更改将在您的网站上生效！
我还需要知道什么？ (What else do I need to know?)
There’s plenty more to talk through, but that’s for a different day. There are a ton of resources online to get you started with adding your own new tags and exploring the capabilities of Google Analytics, but here are a few points to keep in mind with GTM.
还有很多要讨论的话题，但是那是另一天。 在线上有大量资源，可帮助您开始添加自己的新标签并探索Google Analytics(分析)的功能，但是GTM需要牢记以下几点。
权限 (Permissions)
You most likely don’t want every marketer on your 1,000 person team to have publish access to your GTM container. It’s best to have one or a few people responsible for managing the container, reviewing, and publishing while keeping everyone else to a lower access role. This will help prevent accidental changes or abuse within a bigger team.
您很可能不希望您的1000人团队中的每个营销人员都可以发布对GTM容器的访问权限。 最好由一个或几个人负责容器的管理，审阅和发布，同时让其他人担任较低的访问角色。 这将有助于防止较大团队中的意外更改或滥用。
安全 (Security)
Permissions are your first step towards maintaining a secure installation. But Google takes this an extra step and performs some actions for you, such as checking for code errors and scanning for malware. While this is great, it’s still important to keep an active review cycle of tags getting published, just like any other pieces of code, to make sure the site integrity and health remain in tact.
权限是您维护安全安装的第一步。 但是Google采取了额外的步骤，并为您执行了一些操作，例如检查代码错误和扫描恶意软件 。 尽管这很棒，但仍然要保持对标签发布的积极审核周期(就像其他任何代码段一样)，以确保网站完整性和运行状况保持完整。
约定 (Conventions)
I highly recommend starting early with naming conventions and best practices when configuring your tags, variables, triggers, and really anything within GTM. The different ways to name things can spiral out of control really quickly, depending on how many people are working in there. This will make your work difficult to find, so it’s best to agree with the team on a convention to use early and get off on the right foot.
我强烈建议您在配置代码，变量，触发器以及GTM中的所有内容时，从命名约定和最佳实践开始。 命名事物的不同方法可能会很快Swift失控，这取决于在那里工作的人数。 这将使您的工作很难找到，因此最好与团队就一项约定达成共识，以便尽早使用并以正确的方式下车。
单页应用 (Single Page Apps)
This doesn’t account for the impact single page apps have on a GTM and GA setup. The trigger we set up here will fire when any page loads, which is defined by a new page load by the browser. Single page apps don’t actually load a new page – rather, the JavaScript within the app makes it appear that a new page loads, so the trigger here will only fire the first pageview. Though it doesn’t include information directly usable in GTM, the GA documentation has some good information about tracking these types of apps.
这不考虑单页应用程序对GTM和GA设置的影响。 当任何页面加载时，我们在此处设置的触发器将触发，这是由浏览器加载的新页面定义的。 单页应用程序实际上并不加载新页面-应用程序中JavaScript使得看起来好像加载了新页面，因此此处的触发器将仅触发第一个综合浏览量。 尽管它不包含可直接在GTM中使用的信息，但GA文档提供了一些有关跟踪这些类型的应用程序的良好信息 。
GDPR (GDPR)
While GTM alone does not (currently) violate GDPR, you still need to be cognizant of how any of the tags you use impact your standing. This guide doesn’t touch this, so please make sure to do your homework.
尽管仅GTM并没有(当前)违反GDPR，但您仍然需要意识到您使用的任何标签如何影响您的信誉。 本指南不涉及此内容，因此请确保完成作业。
退出调试器 (Exiting out of Debugger)
Stuck? One way is to clear your cookies, but you should always be able to go to the GTM Overview page and hit "Leave Preview Mode” right under the orange Preview Mode banner at the top of the page.
卡住？ 一种方法是清除Cookie，但您始终应该能够转到GTM概述页面，然后点击页面顶部橙色预览模式横幅下的“离开预览模式”。
下一步是什么？ (What's next?)
From here, you can start managing your tags and pixels through GTM, which allows you to have a single source of consistent data flow into those tags. Experiment and use the debugger to play around, as it opens the door for a lot of new ways to work with the marketing side of things.
从这里开始，您可以开始通过GTM管理标签和像素，这使您可以将一致的数据流的单一来源输入到这些标签中。 尝试并使用调试器，因为它为使用营销方面的许多新方法打开了大门。
Originally published at https://www.colbyfayock.com/2019/11/how-to-use-google-tag-manager-to-maintain-google-analytics-and-other-marketing-tags
1033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
