ダウンロード促進

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

  スマートバナーとは、自社やECのスマホサイトの上部に表示するアプリダウンロードを促すバナーを指します。タップしたユーザーをアプリストアに直接遷移させることが可能です。

  ファーストビューに表示されるため、スマホからサイトに訪れたユーザーに効果的にアプローチできます。
  このページでは、iOS・Android別に、スマホサイトにダウンロード促進用のスマートバナーを入れる方法を3種類ご紹介します。

   

  ヒント

  • 以下のスクリプトは、アプリ内のウェブビュー機能でバナーが表示されないように設定されています。
  • ご覧になるブラウザの環境・設定によっては非表示となる場合がございます。こちらはブラウザに準拠するため、ご了承ください。

   

   

  iOSをスマートバナー、Androidをバナーで表示する方法

  【iOSの場合】

  iOS版はMobileSafari用のmetaタグが用意されていますので、そちらのコードを埋め込むだけで対応いただけます。

  

  <meta name="apple-itunes-app" content="app-id=表示させたいアプリのID">

  アプリIDは、リリースされたアプリのApp StoreのURLの末尾の数字となります。

  参考として、以下のアプリの場合は 「 1339065588 」 がアプリIDです。

  https://apps.apple.com/jp/app/id1339065588

  ※スマートバナーは、iOS版Safariのみで表示されます。Google Chromeなど他ブラウザでは表示されません。
  
  

  【Androidの場合】

  Androidにはスマートバナーという概念がないため、バナーを代用します。

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

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

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

  

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

   

   

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

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

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

  法人プランをご利用いただいているお客様には、ダウンロードを告知するためのURLをリリース時に無料でご提供しています。 

  ※弊社で提供しているURLは、「 https://yappli.plus/〜 」の形式となっております。

   

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

   

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

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

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

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

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

   

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

  

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

  

   

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

• QRコード・短縮URLからアプリをダウンロードさせる方法

  法人プランでご提供しているアプリには、ダウンロードを告知するためのQRコードと短縮URLをご提供しています。
  
  ■短縮URLとは

  以下のようなアプリをダウンロードさせるためのURLです。

  iOS上で開くとApp Store、Android上で開くとGoogle Playのダウンロード画面が自動的に表示されます。

  https://yappli.plus/preview/
  
  SNSやHPでの告知時にリンク先としてご利用いただけます。
  
  ■QRコードとは

  以下のようなアプリをダウンロードさせるためのQRコードです。

  iOS上で読み込むとApp Store、Android上で読み込むとGoogle Playのダウンロード画面が自動的に表示されます。
  
  

  

  
  カタログやチラシなどの紙媒体、WEB上での告知にお使いいただけます。
  ご要望の際は、担当営業またはサポートまでお問い合わせください。