Mac

アプリのダウンロードを促進するためにウェブサイトにスマートアプリバナーを実装する方法

アプリのダウンロードを促進するためにウェブサイトにスマートアプリバナーを実装する方法

iPhone、iPad、iPod touchでSafariを使ってウェブサイトを閲覧中に、一部のサイトが自社アプリのダウンロードを促していることに気づいたことはありませんか?これは、iOS 6以降で一部のサイトを閲覧している際にSafariの上部に表示される小さなポップアップメニューで、「スマートアプリバナー」と呼ばれる機能を通じて行われます。ウェブ上でまだ見たことがない方のために、サイト上部に表示されるスマートアプリバナーの例をご紹介します。

スマートアプリバナー

これらは驚くほど簡単に実装できます。必要なのは、次のように、Web ページの <head> セクションにアプリ ID を参照する新しい <meta> タグを追加することだけです。

<meta name="apple-itunes-app" content="app-id=#########"/>

「#########」を適切なアプリIDに置き換えてください。開発者であれば、おそらく既にご存知でしょう。Web開発者の方は、iTunes/App Storeのリンク(URL文字列内にアプリIDが含まれています)からアプリIDを取得できます。クライアントのアプリを「アプリ名 App Store」のようにGoogle検索すれば、通常はすぐに見つかります。

たとえば、これは Kayak アプリ (モバイル Web サイトがスマート アプリ バナーを使用しているため選択されたアプリ) へのリンクです。

https://itunes.apple.com/us/app/kayak/id305204535?mt=8

この場合、「305204535」は、前述のメタタグに挿入する必要があるアプリ ID コードです。

Apple はこれについて詳細なドキュメントを公開しています。詳細については開発者ライブラリをご覧ください。

このヒントは、Web開発者やアプリケーション開発者、そして独自のアプリとウェブサイトを所有し、ユーザーにアプリのダウンロードを促したいと考えているすべての人にとって非常に役立つでしょう。ウェブサイトは持っているもののアプリは持っていない人にとって、Appleタッチアイコンの設定も同様に重要です。これは、ユーザーがウェブサイトをiOSのホーム画面にブックマークした際に表示される内容を決定するからです。「apple-touch-icon.png」というファイルをウェブサイトのメインディレクトリに追加するだけですが、Retinaディスプレイ対応のタッチアイコンを作成する時間を取ることをお勧めします。

ヒントのアイデアについては MarketingLand をご覧ください。