AMP
  • websites

amp-app-banner

Introduction

amp-app-banner provides a minimal UI for a cross-platform, fixed-position banner showing a call-to-action to install an app. In particular, amp-app-banner works inside an AMP viewer such as the Top Stories carousel in Google Search. Outside of the AMP viewer, the native app banners will be displayed instead of amp-app-banner in Safari on iOS and in Chrome on Android.

Setup

Import the amp-app-banner component.

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

Declare the iOS app in the meta data. This enables Safari's build-in app install banner as well.

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

Android apps need to be declared in the web app manifest. This will also enable the native app install banner in Chrome on Android.

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

Deep links into your apps are calculated based on your AMP's canonical link. Here we link to an article on Medium as we don't have a native AMP by Example app.

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

Basic usage

The amp-app-banner can be fully customized by the developer as long as the height doesn't exceed 100px. One required UI element is a button with the attribute [open-button], which triggers the app install, or opens the deep-link if the app is already installed.

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

Demo

The custom app banner shows up in AMP Viewers. The banner action opens the document's canonical URL as deep-link inside the app:

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

...and if the app is not installed, the banner action shows the app in the Play Store / App Store:

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

Testing

The amp-app-banner will only show in browsers that don't provide their own app install banner. This means Chrome on Android or Safari on iOS will not show the amp-app-banner, but the native install banner. For testing amp-app-banner you can open this page:

  • On a mobile device: in browser without native install banner, e.g. Firefox on Android or Chrome on iOS.
  • On Desktop: in mobile device emulation mode append #webview=1 to the page URL. The other option is to use a custom user agent in mobile emulation mode, for example: 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
Potrzebujesz dodatkowych wyjaśnień?

Jeśli przedstawione tutaj wyjaśnienia nie odpowiadają na wszystkie pytania, skontaktuj się z innymi użytkownikami AMP, aby omówić daną przykładową realizację.

Przejdź do Stack Overflow
Niewyjaśniona funkcja?

Zdecydowanie zachęcamy do wzięcia udziału! Choć mamy nadzieję, że staniesz się stałym uczestnikiem naszej społeczności open source, to z wdzięcznością przyjmiemy również każdy jednorazowy wkład w kwestie, które są Twoją pasją.

Edytuj przykład na GitHub