首頁 繪圖設計 工作閒聊 比賽活動 美術討論 標籤 圖片
Google AMP 加速行動版網頁設計相關作法 / 程式碼 / 資源 (update 2016)
Google AMP 加速行動版網頁設計相關作法 / 程式碼 / 資源 (update 2016)




Type(Type) 2016/9/12 12:49 (Since 2016/9/12 00:30)

Google AMP 加速行動版網頁設計相關作法 / 程式碼 / 資源 (update 2016)




0. 如何開始寫 AMP Page



AMP html 最前面的 document type 寫成這樣
代碼:

<!doctype html>
<html amp>


AMP html-head tag 部分加入此 script
代碼:

<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href="/" />



(0.1) 目前可用 Google Chrome v52 以後,和下 Ctrl + Shift + I,就可看到「是否有錯誤!」
(0.2) 或者用此 AMP 驗證工具 https://validator.ampproject.org/


1. AMP 頁面如何加入 Google AdSense



AMP html-head tag 部分加入此 script
代碼:

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>



AMP html-body 部分加入此 AMP-AD,
(1.1) ad-client "CA-PUB" 部分請換成自的 Publisher ID#
(1.2) ad-slot 就是一般廣告的 Adsense ID#
代碼:

<amp-ad width="300" height="250"
   type="adsense"
   data-ad-client="ca-pub-XXXXXXXXX"
   data-ad-slot="YYYYYYYY">
   <div placeholder></div>
   <div fallback></div>
</amp-ad>


參考: https://github.com/ampproject/amphtml/blob/master/examples/adsense.amp.html





2. AMP 頁面如何加入 Google Analytics



AMP html-head tag 部分加入此 script
代碼:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>



AMP html-body tag 部分加入此段,UA-XXXXX-Y 就是你的 Analytics Tracking ID#
代碼:

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>


參考: https://developers.google.com/analytics/devguides/collection/amp-analytics/




#amp
#google





個人感想:
大手公司山頭亂立、競而不合,使用者各種被操。


Type(Type) 2016/9/12 01:25

AMP 網頁範例



AMP page For example:

//vovo2000.com/amp/

http://vovo2000.com/amp/?t=375775

http://vovo2000.com/amp/?t=375781

http://vovo2000.com/amp/?t=375784


(1,760 views)
[更多討論] 討論區 Windows, Linux, Perl, PHP, C/C++, Driver, Web 理論、應用、硬體、軟體




"Google AMP 加速行動版網頁設計相關作法 / 程式碼 / 資源 (update 2016)" 傳統頁面(電腦版)

首頁 繪圖設計 工作閒聊 比賽活動 美術討論 標籤 圖片
傳統桌面版 [ 登入/註冊 ]
© Vovo2000.com Mobile Version 小哈手機版 2019