#BlackLivesMatter
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
자세한 설명이 필요하신가요?

이 페이지의 설명만으로 궁금한 점이 모두 해결되지 않는다면 다른 AMP 사용자에게 문의하여 구체적인 활용 사례를 논의해 보세요.

Stack Overflow로 이동
설명이 부족한 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub에서 샘플 수정하기