超级牛逼的Googel tag manager入门指南

卧槽,这个谷歌标签管理器真的好厉害,斯国一。很早很早之前就知道但是一直没用,国庆后开始用。不用不知道,一用吓一跳,很好很强大。有了GTM,你再也不需要给技术提需求加代码了,再也不需要等排期了,再也没有那种“就是放一段代码而已为什么等那么久”的疑问了。网站上的任何跟踪你都可以自己完成。

今天正好有时间,想把自己学的GTM知识整理一下,也算是一个入门级指南了,相信您看完了就一定可以自己捣鼓GTM了。

在本文中,您将发现Google跟踪代码管理器的三个部分(代码,触发器和变量),并了解如何使用Google跟踪代码管理器模板轻松添加对网站和社交媒体上的活动的跟踪。 您还将发现如何为Facebook标准事件设置像素跟踪。

Google Tag Manager是什么

简称GTM,tag管理器。在我们开始学习如何使用谷歌标签管理器之前,让我们先讨论一下什么是标签管理器。tag就是标签,代码,网站上放置的各种跟踪代码。标记管理器帮助您在一个地方管理所有度量。你可以告诉你的标签管理器,当有人买东西的时候,请告诉Facebook,谷歌Analytics,谷歌广告,LinkedIn,以及其他你正在做广告的地方。通过这种方式,所有平台都得到了协调,并从标记管理器获得了一个真实来源。

当标签管理器首次为大多数营销人员所用时,它是昂贵的付费工具。 不久之后,谷歌创建了Google跟踪代码管理器,这是一款免费产品,任何人都可以用来帮助改进对营销结果的衡量。

要使用Google跟踪代码管理器,请访问tagmanager.google.com并创建您的帐户。 设置帐户后,您将看到这样的:

example google tag manager dashboard with menu options of tags, triggers, and variables highlighted

GTM是怎么工作的?关于标签,触发器与变量

登录GTM后会被它的一堆术语唬住,感觉这个东西太复杂了。所以如果您不了解各个部分如何协同工作,很容易被Google跟踪代码管理器弄糊涂。 那么这些零件是什么? 实际上只有三个:标签,触发器和变量。我们一个个来看。

GTM标签

让我们从标签开始,它告诉Google跟踪代码管理器您想要做什么。

在下面,您可以看到一些已设置的示例标签。 在这种情况下,有一个标签可以将页面视图发送到Facebook Analytics(FB-PageView),一个标签可以将事件发送到Google Analytics(GA-click report),该标签告诉Google Analytics(分析)该页面视图具有 发生(GA –pageview)等。这些就是您要让标签管理器执行的所有操作。 您正在指示Google跟踪代码管理器告诉这些平台,这些操作已在您的网站上发生。

example google tag manager dashboard workspace with tags selected and several example tags shown with type and firing trigger noted for each

GTM触发器

接下来是触发器。 设置触发器时,是指您希望Google跟踪代码管理器执行您要执行的操作。例如,在下面的“All links”触发器下,您告诉Google跟踪代码管理器,只要有人单击链接,请执行此操作。 某个点击链接还有另一个(Click-Simple Social)。 在这种情况下,您是说如果有人单击了该特定链接,则Google跟踪代码管理器应采取措施。还有一个滚动触发器。 如果您想知道人们向下滚动页面的程度(10%,25%,50%,75%或90%),Tag Manager可以为您提供帮助。 还有计时器,显示页面某些部分的可见性触发器,甚至YouTube视频的触发器。

example google tag manager dashboard workspace with triggers selected and several example triggers shown with event type and any filter noted

GTM变量

变量是Google跟踪代码管理器的第三部分。 这是Google跟踪代码管理器完成工作所需的信息。 为了对此进行可视化显示,标签管理器可能需要页面URL或一个Google Analytics(分析)设置变量,该变量可标识向其发送详细信息的帐户。

example google tag manager dashboard workspace with variables selected and several example variables shown with type noted for each

GTM如何设置一个标签?

现在,您已经熟悉了代码,触发器和变量,下面让我们看一些示例,并探讨如何在Google跟踪代码管理器中设置代码。我们将从Google Analytics(分析)“页面视图”标签(GA –页面视图)开始。 当您单击它时,它的外观如下:

example google tag manager tag configuration called ga - page view with tag type set to google analytics: universal analytics, track type as page view, google analytics settings as {{gas - mm.io demo}}, with firing triggers set to all pages

这个标签非常简单。 它告诉跟踪代码管理器,当有人登陆您网站上的页面时(所有页面触发器),告诉Google Analytics(分析代码)(代码类型)发生了页面浏览(跟踪类型)。 标识Google Analytics(分析)帐号的变量为{{GAS – MM.io Demo}}。

您可以使用Facebook PageView像素执行相同的操作。 只需从Facebook获取您的像素代码,然后将其复制到标签中即可。 请注意,触发器是相同的-All Pages。 因此,只要有人登陆您网站上的页面,Facebook和Google Analytics(分析)都会知道,因为Google跟踪代码管理器告诉了他们。 两种平台都同时获得相同的信息,因此彼此更有可能达成共识。

example google tag manager tag configuration called fb pageview with tag type set to custom html with some html code, with firing triggers set to all pages

接下来,我们来看一个称为滚动报告的Google Analytics(分析)事件。 下面的标签设置为告诉Google跟踪代码管理器在有人向下滚动您网站上的任何页面时进行报告。 您可以将触发器设置为说:“当有人在我的页面之一上向下滚动10%,25%,50%,75%或90%时,请告诉Google Analytics(分析)一些有关该滚动的内容。” 此触发器可告诉他们正在访问哪个页面以及向下滚动了多远。

example google tag manager tag configuration called ga - event - scroll report with tag type set to google analytics: universal analytics, track type as event, category as scroll report, action as page - {{page url}}, label as {{scroll depth threshold}} {{scroll depth units}}, non-interaction hit as true, and google analytics settings as {{gas - mm.io demo}}, with firing triggers set to scroll depth

现在,您已经了解了可以使用Google跟踪代码管理器完成的一些出色工作,下面让我们看一下可以使用的不同类型的代码。 首先单击“标签”列表右上方的“新建”。example google tag manager dashboard workspace with tags selected and several example tags shown with new button highlighted on the top right

在下一个屏幕,单击顶部的“标记配置”框,如图红色箭头。

new google tag manager tag with tag configuration box highlighted

在屏幕的右侧,您可以看到不同类型的标签可供选择。 例如,如果您使用的是Google Optimize或Google Ads,则将看到这些平台的标签。new google tag manager tag with choose tag type menu options with several featured, including google analytics: universal analytics, google analytics: app + web configuration, google ads remarketing, among others

接下来,向下滚动列表以浏览可用的第三方标签。 如果您希望标签管理器为您管理这些测量,请选择一个。我们来看一个特别的Hotjar,以了解它的设置有多么容易。new google tag manager tag with choose tag type menu options with hotjar tracking code highlighted

如果选择Hotjar,则标签管理器会询问您从Hotjar获取的网站ID。new google tag manager tag with new hotjar site id field highlighted, due to tag type selected of hotjar tracking code selected

添加帐号后,您需要告知跟踪代码管理器何时打开Hotjar。 在这种情况下,您想在所有页面上执行此操作。 因此,在“触发”框中单击并选择“All Pages”。new google tag manager tag with choose a trigger menu options with several noted, including click - simple social, scroll - 10,25,50,75,90, time - 3 seconds - 3x, among others with all pages selected

您刚刚设置的标签会告诉Hotjar,有人在您的网站上,并且只要您浏览了其中一页即可。 就这么简单。

现在我们讨论一些可用的触发器。在左侧导航栏中选择Triggers,然后单击右侧的New。

example google tag manager dashboard workspace with triggers selected and several example triggers shown with new button highlighted on the top right

在下一页上,单击“触发确认”框,以查看可以使用的不同类型的触发。new google tag manager tag with choose a trigger type menu options, including page view, dom ready, all elements, form submission, and scroll depth, among others

为了说明这一点,您可以在页面加载时使用触发器。 页面视图,DOM准备就绪和窗口加载只是页面加载的不同阶段。 页面上还有发生不同点击的触发器(“所有元素”和“仅链接”)。

跟踪代码管理器还可以触发各种参与形式(元素可见性,表单提交,滚动深度和YouTube视频操作等)。 因此,当页面上的某个元素变得可见时(例如,如果访问者在几分钟内看到推荐部分),这可能就是您要测量的内容。 或者,当人们单击表单以成为潜在客户时,您可能需要测量他们向下滚动的距离。

您可以使用Google跟踪代码管理器衡量这种活动,并且所有这些触发器都内置在平台中

使用Google跟踪代码管理器模板:设置Facebook像素跟踪

您应该利用Google跟踪代码管理器中的一项崭新功能,如果您使用Facebook,这将使您的工作变得更加轻松。 它是一种模板,用于为Facebook标准事件设置像素跟踪。

在标记管理器中考虑模板的思维方式类似这样:它们就像WordPress的插件一样。 如果您曾经使用过WordPress,那么您就会知道还有其他人创建的主题和插件。 WordPress允许开发人员通过创建新主题和插件来使平台更强大更完善。 这类似于跟踪代码管理器所做的事情。 第三方开发人员可以创建任何人都可以在Google跟踪代码管理器中使用的代码。

您需要进入Google跟踪代码管理器的一个称为模板的区域。 单击左侧导航中的模板,然后单击右侧的标记模板框中的搜索库。

example google tag manager dashboard workspace with templates selected with the search gallery button highlighted on the top right

然后,您将看到所有可用的标记模板。 到目前为止,这些标记与您之前在Google跟踪代码管理器中看到的标记有所不同。 我们将重点关注的是Facebook像素,它取代了使用完整Facebook像素脚本的需要。google tag manager community template gallery import tag template menu with example templates of ematic pixel, exponea tag, facebook customer chat, among others with facebook pixel highlighted

选择Facebook像素标签模板,然后单击Add to Workspace.

facebook pixel template details page with description, what's new, and permissions with add to workspace button highlighted

将Facebook Pixel标签添加到Work space后,请返回标签。 单击“标记配置”框,然后在屏幕的右侧向下滚动到显示“自定义”的位置。 您会在此处找到Facebook Pixel标签。example google tag manager new tag with the choose tag type menu and the facebook pixel option highlighted under the custom section

一旦单击它,您将看到它不需要您粘贴脚本。你所需要做的就是放入你的像素ID并选择一个标准事件。现在让我们使用标准的页面视图像素。

example google tag manager new tag configuration with tag type set to facebook pixel, and the facebook pixel id field highlighted, along with event name selected as standard and set to pageview

您还需要决定何时执行此操作。 在这种情况下,您希望每次有人登陆您的页面时都执行此操作,因此在“触发”框中单击并选择“所有页面”作为触发。google tag manager new tag with choose a trigger menu options with all pages selected and highlighted

现在为了方便查阅以及其他人了解,给它取个名字吧,然后点击Save.new google tag manager new tag with rename tag menu options with the new tag name entered as 'fb - page view using template'

现在您已经设置了这个新的Facebook像素,您还需要测试它。你可以通过Preview它来确保它会按照你期望的方式工作。当您确认它可以工作时,单击Submit以发布更改。到那时,它将是实时的已上线的。(Preview这块略微有点小复杂,打开新窗口检测标签是否被fire,如果不会,我抽时间再单独讲

example google tag manager dashboard workspace with tags selected and several example tags shown with preview and submit buttons highlighted on the top right

GTM入门结论

使用Google跟踪代码管理器,不要使事情复杂化; 就三个部分。 首先是标签,您要告诉标签管理器,“这就是我想要你做的。” 其次是触发条件-“这是我要你这么做的时间。” 第三部分是变量-“此处是完成工作所需的一些信息。” 这就是构建Google跟踪代码管理器的过程。

您怎么看?在下面的评论中分享您的想法。以后网站要价跟踪代码只需要加一次就可以了,再也不需要让技术研发排期给你加代码了。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注