BLOG

Webサイトのホーム画面登録を促す「Mobile Bookmark Bubble」

2016/1/21

スマートフォンにおいてショートカットアイコンはとても便利なものです。
スマホの訪問経路としてとても重要なものかなと思います。

アプリはダウンロード時にホーム画面アイコンが追加されますが、スマホサイトはユーザのアクションが必要となります。

ブラウザのブックマークではなく、ホーム画面がよりよいです。

JavaScriptでホーム画面登録できるようできないか？

ブックマークさせる手段は下記があります。

・Internet Explorer
window.external.AddFavorite(URL,タイトル);
・Firefox(Mozilla系)
window.sidebar.addPanel(タイトル,URL,"");
・Opera
<a href="URL" rel="sidebar" title="タイトル">ブックマーク</a>

・Internet Explorer

window.external.AddFavorite(URL,タイトル);

・Firefox(Mozilla系)

window.sidebar.addPanel(タイトル,URL,"");

・Opera

<a href="URL" rel="sidebar" title="タイトル">ブックマーク</a>

Google Chrome、Safariではホーム画面登録、ブックマークをさせることができない。

簡単にホーム画面登録を促す案として「Mobile Bookmark Bubble」を導入する方法はあります。
Mobile Bookmark BubbleはWebアプリを表示すると画面下にバルーンが表示されてホーム画面登録を促すメッセージを表示する機能を提供してくれるJavaScriptライブラリです。

概要

・Google製のJavaScriptライブラリ。
・サポート対象はiPhone / iPod / iPad Mobile Safari 3.0+
・ブックマーク追加は端末の機能で行う。
・「×」を合計で2回タップしてこの画面を消した場合はローカルストレージにこのことを保存し、この画面を出しません。
・ホームに追加時URL後ろに「#」付加。結果アイコンからアクセスした場合、バルーン非表示。

設定方法

・ダウンロード

ブラウザからダウンロードしたい場合はこちら。

・導入方法

下記2ファイルを読み込む

<script src="bookmark_bubble.js"></script>
<script src="example.js"></script>

1 2	<script src="bookmark_bubble.js"></script> <script src="example.js"></script>

・アイコンの設定

Mobile Bookmark Bubbleはapple-touch-icon-precomposedを取得するようになっています。

<link rel="apple-touch-icon-precomposed" href="アイコン画像パス">

1	<link rel="apple-touch-icon-precomposed" href="アイコン画像パス">

apple-touch-iconからアイコンを取得するように変更したい場合bookmark_bubble.js228行目以下を下記に変更します。

google.bookmarkbubble.Bubble.prototype.REL_ICON_ =
    'apple-touch-icon';

1 2	google.bookmarkbubble.Bubble.prototype.REL_ICON_ = 'apple-touch-icon';

またはexample.jsに下記を追加して上書きします。

bubble.REL_ICON_ = 'apple-touch-icon';

1	bubble.REL_ICON_ = 'apple-touch-icon';

・メッセージの設定

bookmark_bubble.js562行目以下を変更します。
デフォルトではiOSのバージョンによってかき分けています。

  if (this.getIosVersion_() >= this.getVersion_(4, 2)) {
    bubbleInner.innerHTML = 'Install this web app on your phone: ' +
        'tap on the arrow and then <b>\'Add to Home Screen\'</b>';
  } else {
    bubbleInner.innerHTML = 'Install this web app on your phone: ' +
        'tap <b style="font-size:15px">+</b> and then ' +
        '<b>\'Add to Home Screen\'</b>';
  }

if (this.getIosVersion_() >= this.getVersion_(4, 2)) {

bubbleInner.innerHTML = 'Install this web app on your phone: ' +

'tap on the arrow and then \'Add to Home Screen\'';

} else {

bubbleInner.innerHTML = 'Install this web app on your phone: ' +

'tap + and then ' +

'\'Add to Home Screen\'';

}

・矢印画像、クローズ画像の設定

bookmark_bubble.js209行目、217行目にdata URI schemeで記述します。

・css等の設定

bookmark_bubble.js533行目以下を調整して下さい。

・Safari以外のブラウザには表示したくない。

bookmark_bubble.js380行目を下記に変更して下さい。

google.bookmarkbubble.Bubble.prototype.isMobileSafari_ = function() {
  return
this.MOBILE_SAFARI_USERAGENT_REGEX_.test(window.navigator.userAgent) &&
/Safari/.test(window.navigator.userAgent) && !/CriOS/.test(window.navigator.userAgent);
};

google.bookmarkbubble.Bubble.prototype.isMobileSafari_ = function() {

return

this.MOBILE_SAFARI_USERAGENT_REGEX_.test(window.navigator.userAgent) &&

/Safari/.test(window.navigator.userAgent) && !/CriOS/.test(window.navigator.userAgent);

};

iOS ChromeにもSafariがはいっているのでCriOSを除くようにします。

他にもいろいろ調整できるようです。

効果測定方法

URLに#を付与させてブックマークさせるのでその訪問回数等をみると効果が見れると思います。

Mobile Bookmark Bubbleを導入してホーム画面登録を促し、訪問回数がアップにつながるかもしません。
試したい方はぜひ使ってみて下さい！

Tag:Google JavaScript ライブラリ