用法
- 指定資料來源
  - 應用程式 manifest 範例
  - manifest.json 範例
- UI 行為
屬性
- id
- layout
驗證

重要事項：此文件不適用於您目前選取的廣告格式！

amp-app-banner

說明

一個跨平台、固定位置橫幅的封裝器和最小化 UI，顯示安裝應用程式的呼籲行動訊息。

必要指令碼

<script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js"></script>

支援的版面配置

nodisplay

用法

一個跨平台、固定位置橫幅的封裝器和最小化 UI，顯示安裝應用程式的呼籲行動訊息。

`amp-app-banner` 元件包含條件邏輯，可將使用者導向正確平台上的正確應用程式。如果使用者關閉橫幅，則橫幅會永久隱藏。

<head>
  <meta
    name="apple-itunes-app"
    content="app-id=123456789, app-argument=app-name://link/to/app-content"
  />
  <link rel="manifest" href="https://link/to/manifest.json" />
</head>

. . .

<body>
  <amp-app-banner layout="nodisplay" id="demo-app-banner-2134">
    <amp-img src="https://example.com/icon.png" width="60" height="51">
    </amp-img>
    <h3>App Name</h3>
    <p>Experience a richer experience on our mobile app!</p>
    <div class="actions">
      <button open-button>Get the app</button>
    </div>
  </amp-app-banner>
</body>

如需完整頁面範例，請參閱 article.amp.html。

`amp-app-banner` 的使用必須符合下列要求

請勿將 `amp-ad/amp-embed`、`amp-sticky-ad` 或 `amp-iframe` 作為子系包含在內。
`height` 不得超過 `100px`。
必須是 `<body>` 標記的直接子系。
Android manifest `href` 屬性必須透過 `https` 提供。
請勿在單一頁面上包含多個 `amp-app-banner`。

指定資料來源

為了擴展和推廣 iOS 和 Android 上原生支援的應用程式橫幅的使用，`amp-app-banner` 使用與原生應用程式橫幅在其各自平台上使用的完全相同的資料來源。iOS 使用文件標頭中的 `<meta name="apple-itunes-app">` 標記，而 Android 使用 `<link rel="manifest">` 標記。

在 iOS 上，AMP 執行階段會剖析 `<meta>` 標記 content 屬性，以擷取 App ID 和 `app-argument`。這些通常用於深層連結 URI，例如應用程式協定，如 `whatsapp://` 或 `medium://`。
- `<meta>` 標記必須具有 `name` 和 `content` 屬性。
- `content` 屬性的值必須包含 `app-id=`。
在 Android 上，AMP 執行階段會發出 XHR 請求以擷取 manifest.json 檔案。執行階段會剖析內容，以從 `related_applications` 擷取 `app_id`，並計算應用程式商店 URL 以及應用程式內開啟 URL，其格式如下：`android-app://${appId}/${protocol}/${host}${pathname}`
- `<link>` 標記必須具有 `"rel='manifest'"` 屬性和值，以及 `href` 屬性。

協定、主機和路徑名稱是從 AMP 文件的標準網址計算而來。您的原生應用程式需要在其 manifest 中註冊連結。如需更多資訊，請閱讀行動深層連結。

應用程式 manifest 範例

<activity
    android:name="com.example.android.GizmosActivity"
    android:label="@string/title_gizmos" >
    <intent-filter android:label="@string/view_article">
        <!-- This is important in order to allow browsers to launch your app. -->
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with "https://CANONICAL_HOST/gizmos" -->
        <data android:scheme="https"
              android:host="CANONICAL_HOST"
              android:pathPrefix="/" />
    </intent-filter>
</activity>

manifest.json 範例

{
  "prefer_related_applications": true, // This is not necessary for <amp-app-banner>, but signals a preference on non-AMP pages using the same manifest.json file for the native app over a web app if available
  "related_applications": [
    {
      "platform": "play",
      "id": "com.app.path",
      "url": "android-app://com.app.path/https/host.com/path/to/app-content"
    }
  ]
}

UI 行為

`amp-app-banner` 不提供預設 UI。相反地，開發人員可以在橫幅內建置任何類型的 UI 並相應地設定其樣式。

目前，橫幅會持續顯示，直到被關閉為止。關閉後，橫幅永遠不會在該網域上顯示，除非使用者使用不同的瀏覽器造訪或清除其本機儲存空間。

UI 中必要的屬性

橫幅中必須要有 `button[open-button]` 按鈕。這是點擊目標，可用於安裝應用程式，或在應用程式已安裝的情況下，開啟深層連結。

`button[open-button]` 元素不能有 `disabled` 值。

關閉按鈕限制

用於關閉橫幅的「X」按鈕在自訂方面有限制。您可以使用 `.amp-app-banner-dismiss-button` 類別來設定此按鈕的樣式。保持關閉按鈕在行動裝置上可見且易於存取，以避免橫幅阻擋內容。

作業系統、瀏覽器和檢視器相依性

原生應用程式橫幅不會在檢視器內容中顯示。因此，當存在適當的標記時，`amp-app-banner` 會在檢視器內部顯示。

但是，當在相容的作業系統（例如 Android 和 Chrome 或 iOS 和 Safari）的瀏覽器中檢視時，會顯示系統層級的應用程式橫幅。在這些情況下，`amp-app-banner` 會隱藏以避免冗餘。下表顯示這些相依性

情境	Android + Chrome	iOS + Safari	其他作業系統 + 瀏覽器
在 AMP 檢視器中	顯示 amp-app-banner	顯示 amp-app-banner	顯示 amp-app-banner
在 AMP 檢視器外	顯示系統橫幅	顯示系統橫幅	顯示 amp-app-banner

屬性

`id`

定義 `amp-app-banner` 元件的唯一識別碼。`id` 值用於持久性邏輯。

`layout`

指定橫幅的版面配置。值必須為 `nodisplay`。

驗證

請參閱 AMP 驗證器規格中的 `amp-app-banner 規則`。

需要更多協助嗎？

您已閱讀此文件十幾次，但它仍然沒有涵蓋您所有的問題嗎？可能其他人也有同感：請在 Stack Overflow 上與他們聯絡。

前往 Stack Overflow

發現錯誤或缺少功能嗎？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別關注的問題提供一次性貢獻。

前往 GitHub

amp-app-banner 1.0 0.1

說明