JourneysWebアプリスマートバナー

iOSやAndroidでスマートアプリバナーを設定する方法

By 10月 30, 2017 No Comments

「ユーザーはモバイルウェブサイトよりネイテイブのモバイルアプリを好む」ということがよく知られるようになって久しいですが、ウェブの場合と比較するとアプリに関するディープリンキングの強力さは理想的とは言えません。携帯電話を使う(特に新しいアプリを見つける)うえでモバイルウェブサイトがいまだに有力な理由はここにあります。

一例として、あるユーザーがあなたのアプリの記事をフェイスブックで共有し、大勢の新規ビジターがその記事をクリックするとしましょう。もしビジターにその記事が表示されず、代わりに何らかのアプリストアのページへ移動させることになれば、怒ってそのストアを去ってフェイスブックのページに戻る人が多いはずです。スマートアプリバナーがあるモバイルサイトが本領を発揮するのがこのような場合です。

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

モバイルスマートバナーは、モバイルウェブサイトの画面のごく一部を使い、ネイテイブアプリを開いたりインストールするようユーザーに働きかけます。アプリがインストールされていれば自動的に開き、インストールされていなければアプリストアへフォールバックさせる、といったルーティング論理がすべて含まれているのがスマートリンクです。ご覧のように、上のモバイルサイトのページではアプリなしでコンテンツを利用できますが、ユーザーが選択すればアプリをダウンロードして開くオプションも画面上部に表示されています。

Smart App Banner Example

新規ユーザーには、バナー があるモバイルサイトを見せることで明瞭ながら目立ちすぎない導入モデルが伝わります。ここではそのような新規ユーザーがあなたのモバイルウェブサイトとやり取りをし、準備次第でフルのアプリユーザーに変換できる可能性もあります。

AppleのiOSスマートアプリバナーで何ができますか?

Appleは、IOS 6でSafari完全統合型のスマートアプリバナーをリリースしました。それ以降、ルック&フィールは進化を遂げて以下のようになりましたが、動作方法は変わりません。

Smart app banner on iOS

このバナーをクリックすると2つの結果が現れます。アプリがインストールされていれば、バナーは付随するディープリンクのパラメータを使ってURIスキームを呼び出し、このアプリを開きます。アプリがインストールされていなければ、バナーはユーザーをアプリストアのページに移動させます。

Appleのバナーには、他のサードパーティによるスマートバナーが簡単には複製できない次のような特長があります:

  1. アプリがインストールされていることをiOSが検出すると、呼び出されるアクションが常に表示から開くに変更される。
  2. アプリのダウンロード中はスマートバナーに進捗バーが表示される。

ただし、次のように重大な制限事項も存在します:

  1. iOS Safariでしか動作しない
  2. レイアウト、色、コンテンツは変更できない
  3. クリックやダウンロードの追跡機能がない
  4. ディープリンキング(ユーザーを特定のコンテンツに移動させること)が動作するのはアプリが既にインストールされている場合のみである

Androidのスマートアプリバナーはありますか?

Androidはエコシステムとブラウザの選択で断片化が激しいため、Googleは一度もAndroidのスマートバナーをリリースしていません。Android開発者はこれまで、独自のスマートバナーを展開させるか既存のソリューションを適応させるしかありませんでした。AndroidとiOSの両方で開発を進めてきたモバイル開発者にとっては非常に厄介な問題であり、一貫性ある動作と属性の測定が求められています。
AppleのiOSスマートバナーが登場した時でさえ、Androidと互換性があるサードパーティオプションの開発がわずかに生み出されただけでした。残念ながらそういった代替製品もこの数年で進展が見られなくなり、開発者は新たな不運に見舞われている状態です。さらに顕著な例を挙げてみましょう。

  1. jQuery用のスマートアプリバナープラグインhttps://github.com/jasny/jquery.smartbanner (現在は保守されていません)
  2. jQueryの要件がないスマートアプリバナーhttps://github.com/kudago/smart-app-banner

Branchのクロスプラットフォーム型スマートアプリバナー

SDKから動的に生成されたリンクを使い、Branchダッシュボードで手動で作成されたリンクを販売しています。こういったリンクはどのオペレーティングシステムやブラウザでも動作し、状況に応じてあなたのアプリやアプリストアへユーザーを移動させます。

この専用技術を活かし、私たちは全面的にカスタマイズでき、クロスプラットフォーム型で追跡可能なディープリンキングのスマートアプリバナーを構築しました。Safari、Chrome、Firefox、Androidのストックブラウザなど、あらゆるブラウザで動作します。

iOSでのBranchバナーの例:

smartbanner-blog3-cut_1.png

デスクトップでのBranchバナーの例:

desktop_banner1.png

Branchスマートアプリバナーを使用すれば、AppleのiOSスマートアプリバナーの全機能に加え、次のような優れた機能も活用できます:

  1. アプリやアプリストアへのスマートルーティング

バナーがタップされ、アプリがインストールされている場合はそのアプリを開きます。アプリがインストールされていなければ、ユーザーをアプリストアのページに移動させます。

  1. クロスプラットフォームサポート

どのモバイルブラウザやモバイルオペレーティングシステムでも動作します。iOSスマートバナーやAndroidスマートバナーを簡単に作成でき、いちど作成すればどこでも使用できます。

  1. インストールされているアプリの検出

アプリにBranch SDKが含まれ、ユーザーが一度でもそのアプリを開くと、私たちはAppleのようにアクションの呼び出しをインストールから開くへ自動的にアップデートしたり、アクション呼び出しの各メッセージをカスタマイズできるようになります。

  1. カスタムオーディエンスターゲティング

モバイルウェブと自分のアプリの両方で、ユーザーによる特定の動作に基づいてスマートバナーのルック&フィールやアクションの呼び出しを調整しましょう。たとえば、最もアクティブなユーザーには特別なバナーを使用します。

  1. A/Bテスティング

ページでコードを変更することなく、スマートバナーの最適化済みオーディエンスターゲティングとクリエイティブを識別する実験を行い、アプリを新規インストールしたり再び開くよう、変換を最大化させます。

  1. ダウンロード追跡

Branchダッシュボードなら、バナーを見てクリックしたユーザー数、そしてアプリをインストールしたり開いたりしたユーザー数を追跡できます。これによってモバイルウェブページの変換状況がわかるので、自分の成長努力を最適化できるようになります。

  1. ディープリンキング

ユーザーを特定の製品へ、またはアプリ内の「ディープリンキング」とも呼ばれるコンテンツ部分へ移動 させられるよう、アプリに渡すデータ辞書を指定できます。

  1. レイアウト、色、コンテンツ、アイコン

モバイルサイトのネイテイブのルック&フィールをサポートしたり、その体験をカスタマイズする場合、Branch Journeysはグラフィカルエディターを使うかCSSを直接編集することで、バナーの全ビジュアル面をフルにカスタマイズできます。これにはアプリのタイトル、説明、アクションの呼び出しボタン、評価用の星、レビュー数も含まれます。すべて自分のサイト設計に合わせて調整できます。

Journeysによるユニバーサルスマートアプリバナーの設定ガイド

また、Branchがお届けしているJourneysは、スマートバナーのようなアプリアセットに対し、コードなしでウェブを作成して展開できる最高のソリューションです。ブランド各社は、Journeysによって次のような操作が可能となります:

  1. ウェブやアプリのアクティビティ、参照サイト、オペレーティングシステムなどに基づいて無数の潜在的オーディエンスを作成する
  2. 数多くある既定テンプレートからいずれかを選択し、自分のアセットのレイアウトやデザインを全面的に管理する
  3. によってセグメント化されたパフォーマンスをリアルタイムで確認する。 漏斗状のアクションをJourneysに帰属させる。コードを変更せずに改善点を実装する。
    ユニバーサルスマートアプリバナーの設定ガイド

Branch Journeysによるスマートアプリバナーは、とても簡単に始められます。その手順を以下に説明します。

Приступить к работе со смарт-баннером Branch с помощью решений Journey очень просто. Вот пошаговое руководство.

 

ステップ1:自分のリンクルーティングを設定する

最初にhttps://start.branch.ioにアクセスし、指示に従います。ユーザーをどこにリダイレクトするか、シナリオごとにBranchが把握できるよう、エンドポイントをすべて定義します。

ステップ2:Web SDKを自分のサイトに追加する

次に、https://dashboard.branch.io/#/settingsのダッシュボードから自分のBranchキーを取得します。以下のコードスニペットを自分のサイトのJavascriptタグに貼り付けます。設定ページから取得したキーをYOUR-BRANCH-KEYセクションに追加します。ステップ

<script type="text/javascript">
  (function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode".split(" "), 0);
 	branch.init('YOUR-BRANCH-KEY');
</script>

 

ステップ3:Journeysスマートアプリバナーを設定する

BranchダッシュボードのJourneys セクションに進み、ウィザードに従って自分のスマートアプリバナーを設定します。Journeysの完全ドキュメンテーションは私たちの開発者ポータルでもご利用いただけます。

ステップ4:ディープリンキング用に自分のiOSまたはAndroidのアプリを設定する

最後に、このサイトにあるiOSまたはAndroid向けの統合手順に従うことで、とても簡単に据え置きディープリンキング用に自分のネイテイブアプリを設定したり、追跡機能をインストールしたりできます。
これで完了です!

Request Demo Create Links
shares