1. 背景
近期 iOS14即将来临，App 的投放效果没有保证时，大家又开始重识网站投放，几年不流行的东西，不得不再捡起来！
所以网站通用的广告原理 和 投法又是怎么样的呢？
本文就来一次科普和扫盲吧。
2. Web 广告投放广告原理
WEB 广告投放原理
如上图所示，从绿色的三角形开始，Facebook 随机给两组人群（图示的男女区分只是示意）分发了 Web 广告。
然后这两组人到站的表现开始有差异，都进行了浏览，但加购的女性用户较多，到最后的下单环节时，就只有女性用户在下单了。
然后我们通过 Pixel 把当前广告网站的转化数据传递给 Facebook 的算法。
Facebook 算法分析了一把，噢，原来这个网站喜欢女性用户，好，那就继续再找一些女性用户，甚至相近的用户进行分发广告。用户点击广告后，再一次循环往复。
所以，在广告平台开户后，然后再自建站建个网站，1688上进一些货，生意就可以做起来了。
这里重点讲一下 Pixel的设置。
3. Google Tag Manager 的介绍
老规矩，英文牛 X 的直接看官网：https://marketingplatform.google.com/about/tag-manager/
官网标语
讲的是 GTM 可以不用修改代码就管理你网站所有的标签。免费提供了一套简单、可靠、易于集成的标签解决方案。
唉，我来通俗的解释一把吧。
就是只要跪开发一次，后面有啥事都自助完成（PV、Event、新network JS SDK、给用户惊喜），再也不用跪开发了！
大家就记住一句话：接了 Google Tag Manager，最多跪一次开发哥哥！
4. 我们来实施一个上传 GTM 的手把手教程
4.1 自己申请个 GTM，然后得到接入方法
告诉你先弄一些基础的代码
上面的代码，稍有开发基础的都懂。
4.2 写出如下基础代码
基础代码
自己写的代码只有下面这几句：
用户点击加购按钮时，上报加购事件和产品 ID
当用户点击加购按钮时，上报加购事件和加购的产品 ID。
这里再细说一下，如果只是希望统计到事件次数的情况，那我们直接通过（付款页面的 PV） 就可以确定用户转化了。
但如果我们想着 GMV 最大化，以及后期还要再营销召回人群的话，还需要上报浏览的产品 ID、价格以及下单的产品 ID 和价格信息，用来给 Google FB 做算法优化事件了。
所以，我们这边就直接讲解 带产品 ID 的事件的接入。
4.3 我们进入Google Tag Manager去配置。
Tag Manager 菜单.png
最核心的三个概念：
-
变量：就是刚才要传递的产品 ID 相关的动态参数的配置和获取。
-
Triggers：触发器，网站页面的所有行为，都是触发器，比如页面加载完成，用户点击行为，都可以当做触发器。触发器类型如下：
触发器类型
-
Tags：就是触发器被触发的时候，要执行的操作。这里才是 Tag Manager 的核心。
举个几个例子：
- 当网页加载完成后，我们可以执行 Facebook Pixel 的加载；
- 当网页加载完成后，我们可以执行向 GA 的 PV 上报。
- 当点击某个按钮时，向 GA 上报一个自定义事件。
所以上面页面的加购事件的上报，我们首先定义变量如下：
_event事件变量
_event datalayer事件变量。因为代码中我们通过dataLayer.push() 中包含了_event。
产品 ID 的变量
到这里，我们就可以接收网页层级带来的变量了。
下一步，我们去建 Trigger，即当用户点击加购按钮的 Trigger。
点击所有元素
如上图，我们可以配置 点击所有元素，但当点击元素的文本中包含 cart 时，触发这个触发器。
我们代码中 按钮中，Add To cart 包含了 cart 文字。
到这里触发器就建好了。
下一步，我们建 Tag，即按钮点击后，要执行的事件。
事件中可以引用事件变量和 productId 的变量
然后我们还需要设置好我们要关联的 GA 帐号。
GA 帐号设置
按照文档：https://support.google.com/tagmanager/answer/9207621#ga_id 去找到 GA 的账号。
跟踪 ID.png
然后设置 Fire Trigger 就是刚才我们设置过的 Trigger，详如下图
设置触发Trigger
到这里，从网站上点击加购，加购会向 GTM 上报事件，然后 GTM 中通过变量接收，再通过 触发器触发后，上报变量 event 和 productId 给我们设置好GA 帐号的 GA 进行事件上报。
下面就是我们见证奇迹的时候了。
配置完了 Trigger 和 Tag 以及变量，记得Submit
Submit 我们刚才的变量、Trigger、以及 TAG 标签。
现在才能见证奇迹。
切换到 Version标签.png
选择最后的版本，然后点击Preview，输入网址，点击 Start 按钮
输入我们代码可以访问的网址
在测试页面上 手动点击 Add To cart 按钮，我们就可以看到测试平台的界面如下：
测试 TAG 标签能力
我们可以看到 Tags Fired 中的事件。详如下图：
截屏2021-03-18 上午11.08.12.png
这里面就涉及到触发的Trigger，触发的点击事件，以及Tag Detail 向 GA 的事件打点。
可以清清楚楚的知道自己的 Tag 有没有生效。
既然都传递事件过去 GA 了，那我们再去 GA 平台看一眼吧。
实时事件已经生效了
此时，我们的 GA 实时数据已生效了。代表着加购事件已经生效了。
但我们投广告的时候，我们的网站不是基于事件来投的啊？详如下图：
Bidding 是按转化目标来的
所以 我们还需要把 事件 转换为目标。
进入 GA，去设置目标
点击设置、帐号，媒体资源，点击目标进入如下页面：
选择下单目标
设置目标说明
这里重点看一下，可以是目标网址，也就是说访问过下单成功页，就算是一个订单。我们更多使用的是 事件。选择事件后，继续
设置事件详情
这个时候，我们刚才上报给 GA 的事件 的类别、操作、标签、和 价值 就可以填进来，设置为目标了。
后面广告设置的时候，设置下单为目标，Google 就知道他应该去怎么优化广告了。
5. 终于，我们完成了用 GTM 投放广告了，我们说一些广告之外的应用
5.1 下单成功后，再送一个Coupon Code，让用户再来一单
我们修改Tag标签为 自定义 HTML
然后我们编辑代码：
提示用户有券
这里就实现了当用户点击按钮时，弹框送券！就问你，喜不喜欢？
当然，你这里还可以考虑通过 JS 自己画一个更漂亮的弹框！
其实还有更多的 ABTest、问卷、数据统计 等操作等待你去挖掘哈！
讲到这里，我们不由得感叹 Google 老哥的优秀！只需要一段 JS，监听整个网页动作，然后把自己做为容器，动态下发JS，页面加截后，再触发一个 JS。
不由得想起，如果我要触发的 JS，又是一个触发器，那岂不是可以玩一个死循环了？
最后，再秀一秀 Google AdSence 的另外一块肌肉。
JS 自适应布局插入广告
JS 自适应布局插入广告，看到这里，只能说 Google 的产品是真敢想！Google 的技术是真能干！
网友评论