重要事項:本文件不適用於您目前選擇的格式 stories!
amp-subscriptions-google
描述
為「使用 Google 訂閱」實作訂閱樣式的存取協定。
必要指令碼
<script async custom-element="amp-subscriptions-google" src="https://cdn.ampproject.org/v0/amp-subscriptions-google-0.1.js"></script>
<script async custom-element="amp-subscriptions-google" src="https://cdn.ampproject.org/v0/amp-subscriptions-google-0.1.js"></script>
簡介
amp-subscriptions-google
是在 AMP 頁面中啟用「使用 Google 訂閱」的擴充功能。
請參閱 amp-subscriptions 以取得更多關於 AMP 訂閱的詳細資訊。
請參閱 「使用 Google 訂閱」GitHub 儲存庫 以取得關於專案本身的詳細資訊。
設定
amp-subscriptions-google
是作為 amp-subscriptions
設定的一部分進行設定的。
<head> ... <script async custom-element="amp-subscriptions" src="https://cdn.ampproject.org/v0/amp-subscriptions-0.1.js" ></script> <script async custom-element="amp-subscriptions-google" src="https://cdn.ampproject.org/v0/amp-subscriptions-google-0.1.js" ></script> <script type="application/json" id="amp-subscriptions"> { "services": [ { // Local service configuration }, { "serviceId": "subscribe.google.com" } ] } </script> </head>
即時設定 (rtc)
即時設定允許發布商在頁面載入時,為訂閱按鈕指定 SKU 或 SKU。這允許使用者特定的優惠、限時優惠等。
若要啟用 rtc,請將 skuMapUrl
新增至 subscribe.google.com
服務。
<script type="application/json" id="amp-subscriptions"> { "services": [ { // Local service configuration }, { "serviceId": "subscribe.google.com" "skuMapUrl": "https://example.com/sky/map/endpoint" } ] } </script>
skuMapUrl
會在頁面載入時呼叫。它應該是元素 ID 和設定的對應。
{ "subscribe.google.com": { // button that goes straight to purchase flow "elementId": { "sku": "sku" }, // button that launches an offer carousel "anotherElementId": { "carouselOptions": { "skus": ["basic", "premium_monthly"], } } } }
每個設定都對應於與按鈕相關聯的 SKU 或 SKU。
若要為 rtc 啟用按鈕,請新增 subscriptions-google-rtc
屬性。如果存在此屬性,按鈕將會停用,直到 skuMapUrl
請求完成為止。一旦 skuMap
解析完成,subscriptions-google-rtc
屬性將會移除,並新增 subscriptions-google-rtc-set
屬性。這些屬性可以用於 CSS 樣式設定,但不建議隱藏按鈕,如果顯示時會導致頁面重新排版。
skuMapUrl
可以與本機服務驗證網址相同,因為 JSON 物件不會衝突。如果驗證網址可快取 (max-age=1
就足夠),這將允許在單一請求中向伺服器解析驗證和對應。權利回傳
如 amp-subscriptions 中所述,如果本機服務指定了 pingbackUrl
,則「勝出」服務傳回的權利回應將透過 POST 請求傳送至 pingbackUrl
。
如果 subscribe.google.com
是「勝出」服務,則對 pingbackUrl
的請求將採用以下格式
{ "raw":"...", "source":"google", "service":"subscribe.google.com", "granted":true, "grantReason":"SUBSCRIBER", "data":{ "source":"google", "products":[ ... ], "subscriptionToken":"..." } }
其中 data
符合 權利回應 格式。
帶有標記的範例
<head>
...
<script
async
custom-element="amp-subscriptions"
src="https://cdn.ampproject.org/v0/amp-subscriptions-0.1.js"
></script>
<script
async
custom-element="amp-subscriptions-google"
src="https://cdn.ampproject.org/v0/amp-subscriptions-google-0.1.js"
></script>
<script type="application/json" id="amp-subscriptions">
{
"services": [
{
// Local service configuration
"authorizationUrl": "https://...",
"pingbackUrl": "https://...",
"actions": {
"login": "https://...",
"subscribe": "https://..."
}
},
{
"serviceId": "subscribe.google.com"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
{...},
"isAccessibleForFree": "False",
"publisher": {
"@type": "Organization",
"name": "The Norcal Tribune",
"logo": {...}
},
"hasPart": {
"@type": "WebPageElement",
"isAccessibleForFree": "False",
"cssSelector" : ".paywall"
},
"isPartOf": {
"@type": ["CreativeWork", "Product"],
"name" : "The Norcal Tribune",
"productID": "norcal_tribune.com:basic"
}
}
</script>
</head>
您已經閱讀這份文件十幾次,但它仍然無法涵蓋您的所有問題嗎?也許其他人也有同樣的感覺:請在 Stack Overflow 上與他們交流。
前往 Stack Overflow 發現錯誤或缺少功能嗎?AMP 專案強烈鼓勵您的參與和貢獻!我們希望您能成為我們開源社群的長期參與者,但我們也歡迎您針對您特別熱衷的問題做出一次性的貢獻。
前往 GitHub