AMP WordPress插件、GTM、GA和百度统计-变化吧

2020年2月24日22:26:25问题及解决评论阅读模式

AMP WordPress插件、GTM、GA和百度统计
百度已可支持AMP提交

新年伊始，百度资源平台（原百度站长平台）就对AMP页面加强了支持。AMP（Accelerated Mobile Pages）是谷歌在2015年10月启动的致力于极速加载移动端网页的开源框架。凡是谷歌推的东西，十有八九是为了卖广告或者更好地卖广告。页面加载快了，广告自然也下载快了（手动滑稽）。在百度支持AMP页面后，再次大力开发MIP的效益就显得不怎么明显了，特别是如果你准备对WordPress进行了MIP改造的话现在只需要通过一个插件完成了。

原本就进行AMP部署的极诣网站也在第一时间进行了URL提交。

AMP WordPress插件、GTM、GA和百度统计
AMP页面在百度移动结果页面的展现和MIP页面一样

本篇我们并不写讨论如何改造WordPress的AMP网站，而是如何对WordPress部署AMP网站的跟踪。

AMPforWP插件和GA部署

AMPforWP插件（ampforwp.com）是一个不错的自动部署且可客户化的WordPress插件，它集成了Automattic（WordPress就是它家产品）官方的AMP插件。免费版提供了三个主题，可以对各文字标签进行翻译，总之是相当好用。该插件集成了一些常用的小Widgets，即使不太懂HTML代码依然可以轻松使用。不久前我们介绍过通过AMPforWP解决GA普通页面和AMP页面之间不同ClientID问题的方法时也提到过这个插件。

然而我们今天要讲的并不是SEO，而是网站分析。在Settings-Analytics下你可以选择Analytics Type。假设你选择Google Analytics，那么你只需要填上UA-XXXXX-1这样的Property ID即可启用。如果你需要添加高级的GA选项，如sample rate、cross-domain tracker，那么你需要手动在Advanced Google Analytics中填写这些参数。

AMP WordPress插件、GTM、GA和百度统计
轻松部署AMP中的GA跟踪代码

AMPforWP其实只是为了懒惰的你添加了一些代码而已。这里有两段代码，第一段是调用了amp-analytics插件。即下面这行代码，它被添加至<head></head>之间。

第二段包含了参数和调用规则。它被添加至<body></body>之间。下面是一个简单的PageView记录。

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"token": "YOUR PROPERTY ID"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>

如果你想跟踪Event，只需要添加triggers对象中的内容即可。

配置完后，你可以在Chrome中按F12，查看Network。查看有没有一个https://www.google-analytics.com/r/collect?v=1...的请求，你会看到这个请求附带一个参数t。它的值是pageview。这样你便完成了AMP页面的GA部署。

部署AMP中的百度统计

百度统计的官方文档（http://hermesma.com/bdamp）中对如何在 AMP 页面中添加百度统计有详细的介绍。用法很简单，只要将上面我们介绍的代码中的type="googleanalytics"改为type="baiduanalytics"即可。另外注意id不要和其他重复。这里的“你的Token”指的是你的网站在百度统计的ID，一般长32个字符。你可以在你的百度统计安装代码中找到，在hm.js?的后面。

如果你使用AMPforWP，你可以在Settings-Advance Settings中添加代码。第一段可以加在Enter HTML in Head中，第二段加在Enter HTML in Body中。如果你同时使用了GA，那么第一段代码可以不必添加，因为GA也会调用amp-analytics插件。由于GTM暂时不支持除GA之外的其他统计软件，所以百度统计暂时只能通过贴代码来实现。

AMP WordPress插件、GTM、GA和百度统计
如果AMP页面源代码里插件重复调用，请清空第一项

通过GTM部署AMP中的GA

GTM、GA、AMP系出同门，相互自然会有照应。GTM要部署在AMP上必须重新建一个Container。在选择Container类型时不能再选择Web而需要选择AMP，否则会变成403。之后我们可以建一个Universal Analytics的Tag。这里不细讲具体步骤，总之发布后回到插件AMPforWP的Settings-Analytics。此时我们开启Google Tag Manager的选项，然后填入GTM的Container ID。Container ID就是以GTM-开头的字符串在安装代码里有。接下来请对Analytics Type和Analytics ID留空。

AMP WordPress插件、GTM、GA和百度统计
请在建立针对AMP的新GTM容器后开启GTM

如果不留空并且GTM中有标签的话将会推送两次GA的PageView。

通过AMPforWP和GTM同时用GA和百度统计的小技巧

如果你同时使用GA和百度统计的话，我们可以避免贴代码。这里有两个条件，首先是AMPforWP插件在Settings-Analytics中启用GTM后还是会让你自由添加一个第三方统计type，也就是上一节让各位留空的，其次是必须启用了amp-analytics插件。这样我们可以一方面通过GTM部署GA，另一方面通过AMPforWP部署百度统计。

AMP WordPress插件、GTM、GA和百度统计
同时启用GTM和百度统计

部署完后你可以在<head></head>中看到amp-analytics的调用：

同时可以看到<body></body>中有调用GTM并且调用百度统计的代码：

<amp-analytics id="amp-gtm-googleanalytics" type="baiduanalytics" data-credentials="include" config="https://www.googletagmanager.com/amp.json?id=GTM-PF7L8G6&gtm.url=SOURCE_URL">
<script type="application/json">
{"vars":{"account":"6a2a162xxxxxxxxxxxxc86985b46"},"triggers":{"trackPageview":{"on":"visible","request":"pageview"}}}
</script>
</amp-analytics>

AMP WordPress插件、GTM、GA和百度统计
发现GA和百度统计的pixel，正确