新年伊始，Google資源平台（原Google站長平台）就對AMP頁面加強了支持。 AMP（Accelerated Mobile Pages）是谷歌在2015年10月啟動的致力於極速加載移動端網頁的開源框架。凡是谷歌推的東西，十有八九是為了賣廣告或者更好地賣廣告。頁面加載快了，廣告自然也下載快了（手動滑稽）。在Google支持AMP頁面後，再次大力開發MIP的效益就顯得不怎麼明顯了，特別是如果你準備對WordPress進行了MIP改造的話現在只需要通過一個插件完成了。
原本就進行AMP部署的HubSpot One網站也在第一時間進行了URL提交。
本篇我們並不寫討論如何改造WordPress的AMP網站，而是如何對WordPress部署AMP網站的跟踪。
AMPforWP插件和GA部署
AMPforWP插件是一個不錯的自動部署且可客戶化的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中填寫這些參數。
AMPforWP其實只是為了懶惰的你添加了一些代碼而已。這裡有兩段代碼，第一段是調用了amp-analytics插件。即下面這行代碼，它被添加至<head></head>之間。
<script custom-element =” amp-analytics ” src =”https://cdn.ampproject.org/v0/amp-analytics-0.1.js” async > </script>
第二段包含了參數和調用規則。它被添加至<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中的Google統計
Google統計的官方文檔中對如何在AMP 頁面中添加Google統計有詳細的介紹。用法很簡單，只要將上面我們介紹的代碼中的type=”googleanalytics”改為type=”baiduanalytics”即可。另外注意id不要和其他重複。這裡的“你的Token”指的是你的網站在Google統計的ID，一般長32個字符。你可以在你的Google統計安裝代碼中找到，在hm.js?的後面。
如果你使用AMPforWP，你可以在Settings-Advance Settings中添加代碼。第一段可以加在Enter HTML in Head中，第二段加在Enter HTML in Body中。如果你同時使用了GA，那麼第一段代碼可以不必添加，因為GA也會調用amp-analytics插件。由於GTM暫時不支持除GA之外的其他統計軟件，所以Google統計暫時只能通過貼代碼來實現。
通過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留空。
如果不留空並且GTM中有標籤的話將會推送兩次GA的PageView 。
通過AMPforWP和GTM同時用GA和Google統計的小技巧
如果你同時使用GA和Google統計的話，我們可以避免貼代碼。這裡有兩個條件，首先是AMPforWP插件在Settings-Analytics中啟用GTM後還是會讓你自由添加一個第三方統計type，也就是上一節讓各位留空的，其次是必須啟用了amp-analytics插件。這樣我們可以一方面通過GTM部署GA，另一方面通過AMPforWP部署Google統計。
部署完後你可以在<head></head>中看到amp-analytics的調用：
<script custom-element =” amp-analytics ” src =”https://cdn.ampproject.org/v0/amp-analytics-0.1.js” async > </script>
同時可以看到<body></body>中有調用GTM並且調用Google統計的代碼：
<amp-analytics id =” amp-gtm-googleanalytics ” type =” baiduanalytics ” data-credentials =” include ” config =” https://www.googletagmanager.com/amp.json?id=GTM-PF7L8G6>m.url=SOURCE_URL “>
<script type =” application/json “>
{“vars”:{“account”:”6a2a162xxxxxxxxxxxxc86985b46″},”triggers”:{“trackPageview”:{“on”:”visible”,”request”:”pageview”}}}
</script>
</amp-analytics>
我們可以通過萬能的F12來驗證。如上圖所示AMP頁面讀取時分別ping了Google和GA。至此，本篇的AMP跟踪統計就介紹完了。
如果你對更高級的AMP跟踪感興趣，請參考下面兩篇文章。
如何在AMP中部署GA – LunaMetrics（英）
如何在AMP中部署GTM – Simo Ahava（英）