详细教程:如何使用 Google tag manager 安装 Facebook Pixel?

23次阅读
没有评论

为什么要用GTM管理Google Analytics和FB Pixel的追踪码?听完了 GTM 的介绍,如果还是不知道 GTM 哪里厉害或好用,以下举个例子:

假设你的公司要换新的网站,为了追踪新网站来源,所以需要马上使用 Google Analytics 或是 FB Pixel 来监测,看看每个产品或服务的绩效。

问题一:如果你会设置追踪码,许多工具的追踪码都需要重新申请和设置,是不是有点麻烦?

问题二:如果你不会设置追踪码,肯定需要请工程师来帮忙搞定。假设一次需要 500 元,如果你有十个追踪码,每次都要请工程师来,那就要 5000 元了!

详细教程:如何使用
(图1) 设定多次追踪码 V.S 设定一次追踪码

结论:如果这些时间耽误了监测重要营销数据,漏掉了重要的关键分析,那势必是一大的损失。(而且你会的技能、别人不会,请你会对公司更加分,还不用找工程师),所以如果能只设定一次,并自己可以管理追踪码,这样的好处还能不学起来吗?所以,现在来教你如何完整设置 GTM!

如何埋GTM在Facebook Pixel里?图解安装三步骤

了解完 GTM 的重要性后,你还要知道怎么安装 GTM 、怎么将工具追踪码设置在 GTM 中。这些流程听起来后复杂,但实际上跟着我们一起手把手的安装就可以啰!

详细教程:如何使用
(图2) 设置 GTM 完整安装流程图

安装你的 GTM (Google Tag Manager)

(1)   首先打开 Google Tag Manager 代码管理工具 的网址。

(2)进去后,登入 Google/Gmail 的帐号。如果没有,先留着这个网页 (千万别离开),申办一组后再回来。

(3)当你登入好后,你会看这下图这个画面,按下 [建立帐户]。

详细教程:如何使用

(4)准备要建立你要管理的帐户。

  • 帐户名称:一个你喜欢的可爱名称
  • 国家/地区:选择你的国家
  • 容器名称:就是输入你的网站
  • 目标广告平台:看你的平台是哪种,网站通常是网路最后,按下 [建立]。
详细教程:如何使用

(5)建立完,你会拿到像下图的原始码,再把 GTM 的追踪码放入到你的网站原始码中。总共两段,分别放在原始码的 <head>,<body>

详细教程:如何使用

(6)打开你的网站后台的原始码,按下 Crt+F(command + F ) 搜寻 head、body 两个字,会看到 <head>、<body> ,就是下图橘色框框的地方。把两段分别放置到各自的正后方,让你以后比较好找,放好后按下 [储存]。如果是 WordPress ,则是找到主题编辑器,找出一样的两个位置并放入。

详细教程:如何使用

恭喜你完成了 GTM 安装,接下来就可以把其他追踪码都放到 GTM 里,进行管理了。

快速建立你需要的工具追踪码,以 Facebook 像素为例

装好 GTM 后,当然也要申请 Google Analytics 和 FB Pixel 的追踪码。先前有写过一篇Google Search Console 的文章教学, 说明如何申请 GA 追踪码,今天来示范 FB Pixel 的追踪码申请给大家看。

(1)首先你如果没有 Facebook Pixel,要先来像素建立:点选 [像素] 页签,登入你的 FB。

详细教程:如何使用

(2)登入后,在 [事件管理工具] 找到 [像素] 后,点选:

详细教程:如何使用

(3)到这个画面,按下 [建立像素]

详细教程:如何使用

(4)给你的像素取个名字,还有放入你的网站,再来按下 [建立]

详细教程:如何使用

(5)你会看到三个选项,若要放入到 GTM,选取第二个 [自行手动安装]。

详细教程:如何使用

(6)第一部分是 FB Pixel 给的范例,请直接无视他 。因为我们要放到 GTM ,感受 GTM 统一管理的好处。第二部分红色框框才是我们要的像素追踪码,把他复制下来,等等贴到我们的好用 GTM 里。不过贴心提醒:记得要复制、复制、复制!

详细教程:如何使用

新增你的工具追踪码在 GTM 中

接下来是重头戏:将 FB Pixel 设置在 Google Tag Manager!

(1) 回到刚刚你建立好的 GTM 工具 (网址在这:Google Tag Manager 代码管理工具),看到 [新增代码],给他按下去。

详细教程:如何使用

(2) 先选择 [代码设定] ,再点击 [选择代码类型] >  [自订 HTML] (有许多代码类型,但没有 FB Piexl 的格式,所以我们要自订)。把刚刚特别强调过、在 FB Pixel 里复制的追踪码,贴到 HTML 里。

详细教程:如何使用
详细教程:如何使用

(3)贴完后,点选 [触发条件] (红框) 进行设定 > 选择 [All Page],就能每一页都触发追踪码了!但如果你想针对某些转换,记得自己设定另外的程式码。

详细教程:如何使用

(4)设定完后,按下右上 [储存],并给他一个可爱的名称,顺利储存。

详细教程:如何使用

(5)如果不知道有没有设定成功,也可以先点选 [预览],进入 [正在预览工作区] 模式。

详细教程:如何使用
详细教程:如何使用

(6) 此时,在同一个浏览器直接开新分页 (记得不要开无痕),并输入你设定的网站,就能看到下方出现 GTM 的区块,并检查是否安装成功啰。

详细教程:如何使用

(7)确认没问题的话,你可以离开预览模式,回到新增代码的页面。你会看到右上方的 [提交] ,按下去:

详细教程:如何使用

(8)输入你想要的名称和说明,以便以后检视。按下 [发布] 即可完成。

详细教程:如何使用

如果你跟着我们的脚步顺利走到这边,恭喜你完成已经整个 GTM 的设置了!恭喜又学会了一项新技能!最后来个 bonus,分享一个安装 WordPress GTM 的捷径:

WordPress GTM 捷径安装法

(1)先开启 WordPress,在安装外挂里搜寻“GTM”,会看到很多外挂。今天就介绍下图第一个外挂: Google Tag Manager for WordPress。安装好后,按下启用然后会看到 [设定],按下 [设定]。

详细教程:如何使用

(2)外挂设定

  • 来到设定画面,你会看到两个你要设定栏位,和最下面设定完会出现的php原始码
  • 第一个容器 ID:你一定会问哪里来的 ID?回到您去申请 Google Tag Manager 代码管理工具,如下图 GTM 追踪码-容器 ID,这时候你只要找到文字中 GTM-xxxxxxxx,像红色框框的地方,填入那个 ID,定且按下自订,你会看到上图,会给你一个追踪代码。
  • 第二个容器代码位置:选择自订。
  • 最后复制第三个色框框的 php 原始码
详细教程:如何使用
详细教程:如何使用
GTM追踪码-容器ID

(4)这时候打开你的布景主题编辑器,找出 <body> 的位置,放入你刚刚复制的代码,储存完就完成了。

详细教程:如何使用

恭喜你完成 WordPress GTM 外挂的安装了!其实和 GTM 原本的安装程序类似,但如果习惯用外挂的人,可以尝试看看。

admin
版权声明:本站原创文章,由 admin2022-05-12发表,共计2441字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码