• 網站

amp-app-banner

簡介

amp-app-banner 提供極簡的使用者介面，用於跨平台、固定位置的橫幅廣告，顯示安裝應用程式的行動號召。特別是，amp-app-banner 在 AMP 檢視器（例如 Google 搜尋中的「熱門報導」輪播）內運作。在 AMP 檢視器之外，在 iOS 上的 Safari 和 Android 上的 Chrome 中，將會顯示原生應用程式橫幅，而不是 amp-app-banner。

設定

匯入 amp-app-banner 元件。

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

在 meta 資料中宣告 iOS 應用程式。這也會啟用 Safari 的內建應用程式安裝橫幅。

<meta name="apple-itunes-app" content="app-id=828256236, app-argument=medium://p/9ea61abf530f">

Android 應用程式需要在 web app manifest 中宣告。這也會啟用 Android 版 Chrome 中的原生應用程式安裝橫幅。

<link rel="manifest" href="/amp-app-banner-manifest.json">

應用程式的深層連結會根據您 AMP 的標準連結計算而得。在這裡，我們連結到 Medium 上的一篇文章，因為我們沒有原生的 AMP by Example 應用程式。

<link rel="canonical" href="https://amp.dev.org.tw/documentation/examples/components/amp-app-banner/index.html">

基本用法

開發人員可以完全自訂 amp-app-banner，只要高度不超過 100 像素即可。一個必要的 UI 元素是具有屬性 [open-button] 的按鈕，它會觸發應用程式安裝，或在應用程式已安裝的情況下開啟深層連結。

<amp-app-banner layout="nodisplay" id="my-app-banner">
  <amp-img src="https://cdn-images-1.medium.com/max/50/1*JLegdtjFMNgqHgnxdd04fg.png" width="50" height="43" layout="fixed"></amp-img>
  <div class="banner-text">Learn more in the app.</div>
  <button open-button>View in app</button>
</amp-app-banner>

示範

自訂應用程式橫幅會顯示在 AMP 檢視器中。橫幅動作會將文件的標準網址作為深層連結在應用程式內開啟

<amp-video width="1920" height="1080"
  src="/video/amp-app-banner-android-app-installed.mp4"
           layout="responsive"
           controls>
</amp-video>

...如果未安裝應用程式，橫幅動作會在 Play 商店 / App Store 中顯示應用程式

<amp-video width="1920" height="1080"
  src="/video/amp-app-banner-android-app-not-installed.mp4"
           layout="responsive"
           controls>
</amp-video>

測試

amp-app-banner 只會在不提供自己應用程式安裝橫幅的瀏覽器中顯示。這表示 Android 上的 Chrome 或 iOS 上的 Safari 不會顯示 amp-app-banner，而是原生安裝橫幅。若要測試 amp-app-banner，您可以開啟此頁面

• 在行動裝置上：在沒有原生安裝橫幅的瀏覽器中，例如 Android 上的 Firefox 或 iOS 上的 Chrome。
• 在桌面上：在行動裝置模擬模式中，將 #webview=1 附加到頁面網址。另一個選項是在行動裝置模擬模式中使用自訂使用者代理程式，例如：Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) CriOS/51.000.21 Mobile/13B143 Safari/601.1

• 作者： @juliantoledo