在 AMP 頁面裡獲取數據 〈Access Trigger 篇〉

設定範例

上一篇的文章裡，我們有提到 amp-analytics 中的 Access Trigger 用在訪問流程中的不同狀態發出大量事件。與這些相關的事件，依時間順序、成功與否，可細分為：

授權成功時的接收事件 - access-authorization-received

"triggers": {
  "accessAuthorizationReceived": {
    "on": "access-authorization-received",
    "request": "event"
  }
}

授權失敗時的事件 - access-authorization-failed

"triggers": {
  "accessAuthorizationFailed": {
    "on": "access-authorization-failed",
    "request": "event"
  }
}

訪問查看事件 - access-viewed

"triggers": {
  "accessViewed": {
    "on": "access-viewed",
    "request": "event"
  }
}

Pingback 端點成功時 - access-pingback-sent

"triggers": {
  "accessPingbackSent": {
    "on": "access-pingback-sent",
    "request": "event"
  }
}

Pingback 端點失敗時 - access-pingback-failed

"triggers": {
  "accessPingbackFailed": {
    "on": "access-pingback-failed",
    "request": "event"
  }
}

登錄對話框打開之前的事件 - access-login[-type]-started

"triggers": {
  "accessLoginStarted": {
    "on": "access-login-started",
    "request": "event"
  }
}

登錄對話框成功之後的事件 - access-login[-type]-success

"triggers": {
  "accessLoginSuccess": {
    "on": "access-login-success",
    "request": "event"
  }
}

當登錄對話框被用戶拒絕時 - access-login[-type]-rejected

"triggers": {
  "accessLoginRejected": {
    "on": "access-login-rejected",
    "request": "event"
  }
}

當登錄對話框由於未知原因而失敗時 - access-login [-type] -failed

"triggers": {
  "accessLoginFailed": {
    "on": "access-login-failed",
    "request": "event"
  }
}

談談 amp-access

~~上面寫了這麼多，你很有可能不知道在幹嘛吧!~~這裡我們來簡略看看 amp-access 這個 component 。

使用了 amp-access ，我們可以判斷 user 是否有 login 成功、失敗，而有不同的 view 等處理。舉例來說…

<script id="amp-access" type="application/json">
    {
        "authorization": "https://ampbyexample.com/components/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM", // 發布者提供的端點，由AMP Runtime或Google AMP Cache調用。為經過認證的 CORS GET endpoint
        "pingback": "https://ampbyexample.com/components/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM", // 主要作用之一在於讓發佈者可以更新 metering information
        "login": { // 登入登出的 API
          "sign-in": "https://ampbyexample.com/components/amp-access/login?rid=READER_ID&url=CANONICAL_URL",
          "sign-out": "https://ampbyexample.com/components/amp-access/logout"
        },
        "authorizationFallbackResponse": { // 如果授權失敗，將使用這裡的設定代替 authorization response
            "error": true,
            "loggedIn": false,
            "powerUser": false
        }
    }
  </script>

上面提到的 error 、 loggedIn 、 powerUser ，可以如下運用 amp-access

<section amp-access="error">
    <p>錯誤發生了…</p>
</section>
<section amp-access="loggedIn">
    <p>如果成功登入了，你就看得到了唷</p>
</section>
<section amp-access="loggedIn AND powerUser">
    <p>如果成功登入了，而且 powerUser 還要被設定才看得到唷</p>
</section>

所以 Access Trigger 這些事件，就在於我們這一列和 Authorization 相關的過程中發生的。

參考來源：

• AMP Access and Analytics
• AMP 官網 - amp-analytics
• Google Analytics - Tracking - analytics.js
• AMP Access