スマートアプリバナーを表示する (前編)
こんばんは！
今日は最近仕事でよく耳にする
スマートアプリバナー
こちらをまとめていきたいと思います！
今回はプラグインなどを使って表示する方法
次回はプラグインなしで、擬似的に作成してみたことについて
まとめていきたいと思います！！
スマートアプリバナーとは
アプリのダウンロードを訴求するためにヘッダーの上に出てくる
こう言ったバナーのことです。
クリックするとネイティブアプリをインストールするよう働きかけてくれます。
このバナー一見シンプルに見えますが、
デバイスによってスマートバナーの内容が変わる優れものです。
・ios → クリックするとapp store に飛ぶ ・android →クリックするとgoogle play に飛ぶ ・PC →表示しない ・ネイティブアプリがすでにインストールされている場合 → アプリを自動で開いてくれる
もちろん、会社の方針によっていろいろあると思いますが、
基本的にはこういう仕様になっていると思います。
ちなみにwebページをクリックするとアプリが自動で開かれることがあるじゃないですか、
これは「アプリの内部へリンクを貼る」ことと同義であり、これを「ディープリンク」と呼ぶそうです。
https://tech.kitchhike.com/entry/2018/04/29/222634
導入方法
一般的な導入方法を説明します。
まず、iosとandroidは全く別物なので
①app storeに促すバナー
②google playに促すバナー
と、両方の設定が必要になります。
①app storeに促すバナー
こちらは本当に簡単です。
iOS版はMobileSafari用のmetaタグが用意されていますので、そのコードを埋め込むだけです。
<meta name="apple-itunes-app" content="app-id=[myAppStoreID]"> //IDはアプリの固有番号
apple側が公式でスマートバナーを用意してくれているのですね。
ありがとう。
アプリの番号は、任意のアプリをググった時のurlに書かれています。
笑
②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
