# 開發 AMP 網頁

AMP 是 Google 提出的「加速行動網頁」計畫，透過規範 HTML 框架、限制 Javascript 以及 Cache AMP 頁面至 CDN Server 來提升行動裝置對網站的存取速度。

作為一個內容網站，公司當然對這個很感興趣，遂希望能夠將自己的文章內容也轉成 AMP 格式。

跟著官網範例逐步開發吧

# 更新 AMP Cache

當我們要更新已經被 Cache 住的 AMP 文章時，須發出請求告訴 CDN Server 我們要更新哪篇文章，整體流程如下：

# Step1. 設定加密與解密機制

發送請求給 CDN Server 時，必須讓對方確認我們的身份，因此必須做加密跟解密的動作。

首先產生一組 RSA keys：

$ openssl genrsa 2048 > private-key.pem
$ openssl rsa -in private-key.pem -pubout > public-key.pem

接著將 public-key 放在存放或產生 AMP 檔案的 Server 上：

https://example.com/.well-known/amphtml/api.pub

最後將 private-key 以 web-safe variant of base64 方式編碼，之後要將編碼後的字串填入請求 URL 的 amp_url_signature 這個參數。

# Step2. 建立請求 URL

請求 CDN Server 更新 Cache 的 URL 格式如下:

https://example-com.<cache.updateCacheApiDomainSuffix>/update-cache/c/s/example.com/article?amp_action=flush&amp_ts=<ts_val>&amp_url_signature=<sig_val>

• example-com 與 example.com/article

  前面的 example-com 是將 AMP Server 的網域經過 web-safe variant of base64 編碼後所得到的字串；後面的 example.com/article 則是指要更新的那篇 AMP 文章的 URL（沒錯，那個 article 不是格式，是會隨各網站 AMP URL 設置不同而有差異）

• <cache.updateCacheApiDomainSuffix>

  提供 AMP CDN Cache 服務的不只一家，因此要先確認你的服務由誰提供，並設定好請求路徑；updateCacheApiDomainSuffix 可以從 https://cdn.ampproject.org/caches.json 這個連結取得。

• <ts_val>

  將發出請求的當下時間以 timestamp 格式送出。

• <amp_url_signature>

  將 Step1. 最後編碼過的字串填入這個參數，供 CDN Server 驗證我們的身份。

# Step3. 送出請求

建立好 URL 後，以 GET 的方式送出。

# 傳送資料至 Google Analytics

AMP 的 GA 沒有 Data Layer 概念，但能透過 <amp-analytics> 模組將資料傳送到 GA，這部分官方文件寫得挺多；但透過 GTM 的方式就沒那麼清楚了。

我們先照著官方這篇 AMP & Tag Manager setup guide 設定好 GTM，並設個 PageView 的事件去觸發 GA。前面都很順利，事件有被觸發，GA 也確實能看到瀏覽資料；但當開始要傳入自訂變數時，就會卡關了。

我們在 GTM 設了兩個自訂的 AMP 變數，在 GA 設了兩個自訂維度。當 PageView 事件被觸發時，GTM 會將接收的兩個變數分別傳入 GA 的兩個自訂維度，以便分析資料。

按照官方文件的範例在 AMP 寫下代碼：

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXX;gtm.url=SOURCE_URL" data-credentials="include">
  <script type="application/json ">
      {
          "vars" : {
              "var1": "value1",
              "var2": "value2"
          }
      }
  </script>
</amp-analytics>

然而變數並沒有被帶過去。

在爬了許多文之後，GTM 跟 GA 的設定理應沒有問題，剩下就是 AMP 網頁這邊了。把這邊的設定寫得更加完整，加入 event trigger 的部分：

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXX;gtm.url=SOURCE_URL" data-credentials="include">
    <script type="application/json ">
        {
            "vars" : {
                "var1": "value1",
                "var2": "value2"
            },
            "triggers": {
                "defaultPageview": {
                    "on": "visible",
                    "request": "pageview",
                    "vars": {
                        "var1": "${var1}",
                        "var2": "${var2}"
                    }
                }
            }
        }
    </script>
</amp-analytics>

加入事件的設定之後，稍等一會，就會發現變數可以成功傳過去了。