開發 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

提醒

這邊要同時調整 robots.txt,避免 public-key 被爬蟲爬到。

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

說明

CDN Server 收到請求後會解析這個參數,接著找到被請求更新的 AMP Cache,再到此 AMP 的來源網站尋找 api.pub 來解開私鑰,確保請求者跟被請求的文章來源身份一致。

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-comexample.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 的方式送出。

提示

刪除 Cache 也是發這個請求(先從 AMP Server 上把想移除的頁面刪除,再請求更新即可)

傳送資料至 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>

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

Last Updated: 7/28/2019, 5:53:38 AM