このセクションの記事一覧はこちら

ウェブサイトに、スマートバナーを設置する方法

スマートバナーとは、スマートフォンサイトから見えるウェブサイトの上部に、アプリダウンロードバナーを表示させる仕組みのことです。正式名称をSmart App Banner(スマート アップ バナー)と言います。

もし端末にアプリがダウンロードされていなければ、「表示」と表示されApp Storeへリンクしますが、もしアプリがすでにダウンロードされていれば「開く」の表示に自動的に変わります。

スマートバナーを設置することで、既存メディアを使ってアプリを最大限に告知し、ダウンロード数を増加させる効果が見込めます。また、バナーをウェブサイトに設置することでも同等の効果が得られます。
今回は、iOS・Android別に、ウェブサイトにダウンロード促進用のスマートバナーを入れる方法を3種類ご紹介します。

  1. iOSをスマートバナー、Androidをバナーで表示する方法
  2. Yappliで発行しているURLを使って、iOS・Androidを一括で設定する方法
  3. iOS・Androidにそれぞれバナーを設置する方法

これらのスクリプトは、アプリ内のウェブビュー機能でバナーが表示されないように設定されています。
ご利用の際は、点線内のコードをコピーしてご利用ください。

 

※御覧頂いているブラウザの環境・設定によっては非表示となる場合がございます。
こちらはブラウザに準拠するため、ご了承ください

 


 
1. iOSをスマートバナー、Androidをバナーで表示する方法
 
【iOSの場合】
 
iOS版はMobileSafari用のmetaタグが用意されていますので、そのコードを埋め込むだけです。
 
11.png
<meta name="apple-itunes-app" content="app-id=表示させたいアプリのID">

アプリIDは、リリースされたアプリをブラウザで開くと確認出来ます。

App StoreのURLの末尾の数字がアプリIDとなります。

下記の場合は「1339065588」がアプリIDです。
https://apps.apple.com/jp/app/id1339065588

【Androidの場合】

Androidにはスマートバナーという概念がないため、バナーを代用します。
バナーをスマートバナーのように表示することで、iOSと同様のダウンロード促進効果が見込めます。 スマートフォンサイトの該当箇所に、以下のコードでバナーを表示してください。

(アプリ上でウェブサイトを表示した際に、バナーが非表示になります)

※御覧頂いているブラウザの環境・設定によっては非表示となる場合がございます。こちらはブラウザに準拠するため、ご了承ください

22.png

<a href="Google PlayのダウンロードURL" id="SmBnLink" style="display:none;"><img src="サーバー上にあげたインストールへ誘導するバナーのURL" style="width:100%; height:auto;"></a> <script> var link = document.getElementById("SmBnLink"); if ((navigator.userAgent.indexOf('Android') != -1) && navigator.userAgent.indexOf('Yappli') == -1) { document.getElementById("SmBnLink").style.display="block"; } </script>


 
2. Yappliで発行しているURLを使って、iOS・Androidを一括で設定する方法

Yappliでは、iOS・Android共通でご利用いただける特別なURLを発行しております。

Yappliで発行したURLをご利用いただいた場合、iOS上で開くとApp Store、Android上で開くとGoogle Playのダウンロード画面が自動的に表示されます。

法人プランをご利用いただいているお客様には、ダウンロードを告知するためのURLを無料でご提供しています。 ご要望の際は、担当営業またはサポートまでお問い合わせください。

  

<a href="YappliのダウンロードURL" id="SmBnLink" style="display:none;"><img src="サーバー上にあげたインストールへ誘導するバナーのURL" style="width:100%; height:auto;"></a> <script> if ((navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1 || navigator.userAgent.indexOf('iPod') != -1 || navigator.userAgent.indexOf('Android') != -1) && navigator.userAgent.indexOf('Yappli') == -1) { document.getElementById("SmBnLink").style.display="block"; } </script>
 
 

 
 
3. iOS・Androidにそれぞれバナーを設置する方法

iOS・Androidに、それぞれバナーを設置する方法です。

iOSをスマートバナーではなく、オリジナルデザインのバナーにしたい場合などに使用します。

スマートバナーでは体裁が決まっている文言も、バナーであれば自由に変更可能です。 アプリの魅力が伝わりやすいバナーを作成し、設置することでダウンロード数を伸ばすことができます。

※こちらのオリジナルバナーを設置された場合、1のiOS向けSmart App Bannerのような、端末のアプリインストールの判定はされず、常時表示がされます

 

例:スマートバナーとして表示されるデザイン⬇︎

_______.jpeg

例:オリジナルバナーとして表示されるデザイン⬇︎

yappli.png

 

<a href="App Store のダウンロードURL" id="SmBnLink" style="display:none;"><img src="サーバー上にあげたインストールへ誘導するバナーのURL" style="width:100%; height:auto;"></a> <script> var link = document.getElementById("SmBnLink"); if ((navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1 || navigator.userAgent.indexOf('iPod') != -1) && navigator.userAgent.indexOf('Yappli') == -1) { document.getElementById("SmBnLink").style.display="block"; } else if ((navigator.userAgent.indexOf('Android') != -1) && navigator.userAgent.indexOf('Yappli') == -1) { document.getElementById("SmBnLink").style.display="block"; link.href = "Google PlayのダウンロードURL"; } </script>

 

 
 
 

不明点はございますか? お気軽にお問い合わせください >

不明点はございますか? お気軽にお問い合わせください >