【转】如何使用 Google tag manager 安装 Facebook Pixel?

Share

找了一篇Facebook相关的文章,写的很仔细,搬运过来了!为什么要用GTM管理Google Analytics和FB Pixel的追踪码?听完了 GTM 的介绍,如果还是不知道 GTM 哪里厉害或好用,以下举个例子:

 

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

 

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

 

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

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?
(图四) 设定多次追踪码 V.S 设定一次追踪码

 

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

 

 

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

 

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

 

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?
(图五) 设置 GTM 完整安装流程图

安装你的 GTM (Google Tag Manager)

 

 

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

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

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

 

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

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

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

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

 

 

 

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

 

 

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

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

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

 

 

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

 

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

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

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

 

 

WordPress GTM 捷径安装法

 

 

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

(2)外挂设定

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?
GTM追踪码-容器ID

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

 

 

【转】如何使用 Google tag manager 安装 Facebook Pixel?

 

 

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

 

转自:https://www.awoo.com.tw/blog/gtm-installation-tracking-code/

    版权声明:

     本网站的所有文字、图片资料,【未注明转载的】均由作者亲自整理创作,任何媒体、网站或个人未经本人同意和授权不得复制、转载、转贴或以其他方式复制发布/发表,请尊重我的劳动成果,侵权必究,谢谢。