tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

スマートアプリバナーを表示する (前編)

こんばんは! 今日は最近仕事でよく耳にする
スマートアプリバナー

こちらをまとめていきたいと思います!

今回はプラグインなどを使って表示する方法
次回はプラグインなしで、擬似的に作成してみたことについて
まとめていきたいと思います!!

スマートアプリバナーとは

アプリのダウンロードを訴求するためにヘッダーの上に出てくる

f:id:okinawanpizza:20200708023749p:plain

こう言ったバナーのことです。
クリックするとネイティブアプリをインストールするよう働きかけてくれます。

このバナー一見シンプルに見えますが、
バイスによってスマートバナーの内容が変わる優れものです。

・ios → クリックするとapp store に飛ぶ  
・android →クリックするとgoogle play に飛ぶ  
・PC →表示しない  
・ネイティブアプリがすでにインストールされている場合 → アプリを自動で開いてくれる  

もちろん、会社の方針によっていろいろあると思いますが、
基本的にはこういう仕様になっていると思います。

ちなみにwebページをクリックするとアプリが自動で開かれることがあるじゃないですか、
これは「アプリの内部へリンクを貼る」ことと同義であり、これを「ディープリンク」と呼ぶそうです。

https://tech.kitchhike.com/entry/2018/04/29/222634

導入方法

一般的な導入方法を説明します。

まず、iosandroidは全く別物なので
app storeに促すバナー ②google playに促すバナー
と、両方の設定が必要になります。

app storeに促すバナー

こちらは本当に簡単です。
iOS版はMobileSafari用のmetaタグが用意されていますので、そのコードを埋め込むだけです。

<meta name="apple-itunes-app" content="app-id=[myAppStoreID]">   //IDはアプリの固有番号

apple側が公式でスマートバナーを用意してくれているのですね。
ありがとう。

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

アプリの番号は、任意のアプリをググった時のurlに書かれています。
f:id:okinawanpizza:20200708032507p:plain

②play store に促すバナー

こちらはandroid側で用意されていない代わりに、
iosのバナーに似たスマートバナーを生成してくれる
代表的なプラグインがあるのでそちらを使います。

Jquery Smart Banner:https://www.jasny.net/jquery.smartbanner/ リンクからjsをダウンロードします。

<meta name="google-play-app" content="app-id=アプリのID">
<link rel="apple-touch-icon" href="play storeのパス">
<link rel="stylesheet" type="text/css" href="jquery.smartbanner.css"> 
<script type="text/javascript" src="jquery.smartbanner.js"></script>

メタタグを上記のように書きます。

    <script type="text/javascript">
      $().smartbanner();
    </script>

こちらで実行!!

このような形で、 <meta>タグを利用すればcssのコーディングなどが必要ないので
非常に便利で優秀です。

ただ、欠点もあります。

・クリックやダウンロードの追跡機能がない  
・デザイン、レイアウトが変更できない  

もっとお洒落なデザインにしたら、ダウンロード率も上がるのではないか ということで自作スマートバナーを作成することにしました。

と言っても、ディープリンクなしの
簡単なHTMLなんですけどね!笑

続きは後編で!

参考
ディープリンク

https://tech.kitchhike.com/entry/2018/04/29/222634

smartbanner.js

https://github.com/ain/smartbanner.js/