首頁 美術繪圖 | 美術設計 | 熱門標籤 | 首選 | 首頁宣傳 | 近期作品 論壇: 發表 | 美術工作 | 美術比賽 | 展覽活動 | 美術相關 | 一般討論 | 美術同好 CG 討論 :: Photoshop | Painter | 3D 行動 | AMP

【 立即註冊 】 : 更改個人資料 : : 登入

會員名稱: 登入密碼: 保持登入

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

發表新主題 回覆主題 討論區 Windows, Linux, Perl, PHP, C/C++, Driver, Web 理論、應用、硬體、軟體

| 1頁, 共1
人氣點閱:7733 發表人
Google AMP 加速行動版網頁設計相關作法 / 程式碼 / 資源 (update 2016) 2016-09-12 00:30
分類: ✔️amp ✔️google
個人: ✔️amp ✔️google
/ / /

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





個人感想:
大手公司山頭亂立、競而不合,使用者各種被操。
AMP-page-驗證器.jpg
AMP-page-驗證器.jpg



________________

美術插畫設計案子報價系統 v0.1 Beta
爪哇禾雀
Type



繪圖畫廊設計藝廊
攝影相簿留言板
最愛收藏分類標籤
暱稱: Type
註冊: 2002-11-30
發表: 11177
來自: vovo2000.com
V幣: 901776
Re: Google AMP 加速行動版網頁設計相關作法 / 程式碼 / 資源 (update 2016) 2016-09-12 01:25
/ / /

AMP 網頁範例



AMP page For example:

//vovo2000.com/amp/

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

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

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


AMP-page-example-screenshot.jpg
AMP-page-example-screenshot.jpg



________________

美術插畫設計案子報價系統 v0.1 Beta
爪哇禾雀
Type



繪圖畫廊設計藝廊
攝影相簿留言板
最愛收藏分類標籤
暱稱: Type
註冊: 2002-11-30
發表: 11177
來自: vovo2000.com
V幣: 901776
/ / /














資訊相關理論、技術、管理、應用、產品等
發表新主題 回覆主題