スマートバナー—モバイルWebからアプリへの誘導(マーケター向け)

概要:スマートバナーを使用して、Webサイト訪問者をモバイルアプリユーザーにコンバートしましょう。

wc2a.jpg

 関連記事

スマートバナーを活用するための全体像については、以下の記事をご覧ください。

スマートバナー

スマートバナー

  • ブランドのモバイルサイトに表示して、意欲の高いユーザーのコンバージョン率を高めます。
  • モバイルサイトへの訪問者から来るアプリインストールの質を計測しましょう。
  • SRN (セルフレポーティングネットワーク) を含むすべてのメディアソースにて、Webからアプリへ誘導するキャンペーンの正確な計測を可能にします。
  • スマートバナーは、クリックスルーアトリビューションを利用してアトリビューション測定し、さらにインプレッションもカウントすることができます。

    • クリック:ユーザーがスマートバナーをクリックしてインストールに進みます。
    • インプレッション:バナーが読み込まれると(ユーザーにバナーが表示されると)インプレッションイベントがAppsFlyerに送信されます。

計測フローは次のとおりです。

  1. ユーザーが広告をクリックし、広告主のモバイルWebサイトに誘導されます。
  2. 広告主のモバイルWebサイトにスマートバナーが表示されます。
  3. ユーザーがスマートバナーをクリックします。
    • アプリがインストールされていない場合、ユーザーがアプリストアへ誘導されアプリをインストールします。
    • アプリがインストールされており、ユニバーサルリンク、アプリリンク、URIリンクが設定されている場合、アプリは直接起動します。
  4. ユーザーはプロモーションのコンテキストに応じてアプリ内のコンテンツに到達します。
  5. このユーザーは元の広告を表示したメディアソースの成果として計測されます。

作業範囲

作業担当者

マーケティング担当者と開発者。

前提条件

  • 少なくとも 1 つのアプリを持つ AppsFlyer アカウント。
  • スマートバナーを使用してプロモーションされるアプリを含むOneLinkテンプレート
    これはモバイルWeb訪問者を、彼らの使用する端末に応じて正しいアプリストアへ誘導するために必要です。

所要時間

約 20 分。

結果

  • Webサイト訪問者がCTAボタンをクリックすると、ユーザーのデバイスに基づいて適切なアプリストアまたはWebページへ遷移します。
  • モバイルアプリユーザーがCTAボタンをクリックすると、アプリにディープリンクすることができます。
  • クリック/インストールから 所有しているメディアソースにユーザーが紐づきます。

 

マークは、「Feed Me」という成功した食料品配達サービスのマーケティング担当者です。
マークはWebサイト訪問者をモバイルユーザーに変換したいと考えています。

そのために、マークは自分の広告デザインやテキストを使ったスマートバナーを使用します。

スマートバナーはOneLinkによって作成されます。モバイルWebサイト訪問者がCTAボタンをクリックすると、自動的に適切なアプリストアまたはランディングページに誘導され、簡単にアプリのインストールをすることができます。既存のモバイルユーザーがCTAボタンをクリックすると、アプリが起動します。

AppsFlyerはクリックやインストールの成果をマークが設定したメディアソースとキャンペーンに紐づけます

 重要:

AppsFlyerのスマートバナー、または iOS Safariのスマートアプリバナーのうち、両方同時には使用せず、いずれかのみを使用してください。両方同時に使用すると、モバイルWebサイト上で表示エラーが発生し、計測値の乖離が起こる可能性があります。

手順

次の手順に従って、以下の動作をするスマートバナーを設定します:

  • スマートバナー経由で、ユーザーのデバイスに基づいて、モバイルサイトから適切なアプリストアまたはアプリページに誘導します。
  • クリック/インストールをOneLinkを使用したオウンドメディアの成果に紐づけます。

1. Webサイトワークプレイスの設定

スマートバナーを表示できるようにモバイルサイトを準備します。 

  1. AppsFlyer 管理画面から、エクスペリエンス&ディープリンク > Web-to-App > スマートバナーへ移動します。
  2. + Website Workplaceを作成をクリックします。
  3. Website Workplaceの名前を入力します。
  4. 作成をクリックします。
    そうすると、Website Workplaceが作成されます。
  5. バナーのコードスニペットをコピーします。
  6. コードスニペットをWebサイトに実装してください。この作業は、1つのWebサイトに対して一度だけ行ってください。
  7. [オプション] Web keyをコピーします(このキーは既にコードスニペットの一部としてコード内に存在します)。
  8. [次へ] をクリックします

2. バナーグループの設定

バナーグループには、1つ以上のバナークリエイティブが含まれます。ここでは次の設定が可能です:

  • バナーグループで使用するOneLinkテンプレートを選択します。これにはWebサイトにアクセスしたユーザーを誘導するモバイルアプリが含まれます。
  • 特定のディープリンクスキームを設定します。
  • バナーグループ内の全てのバナーに適用されるターゲットのルール、スケジュール、動作(挙動)、アトリビューションの詳細を定義します。
  • ウェブアクセス時にバナーグループのバナーをアクティブにするページを設定します。

新しいバナーグループを設定するには:

  1. AppsFlyer 管理画面から、エクスペリエンス&ディープリンク > Web-to-App > スマートバナーへ移動します。
  2. 左側のメニューで、[バナーグループの追加]をクリックします。
  3. 一意のバナーグループ名を入力します。
    名前は、バナーグループ内で定義されるバナー間の一般的な共通テーマ(広告アプリなど)を反映した名前を付けてください。
  4. バナーグループのOneLinkテンプレートを選択します。
  5. [オプション] ユニバーサルリンクとAndroidアプリリンクユーザーのフォールバックとして、バナーグループ用のURIスキームを設定します。デフォルトで、この値はOneLinkテンプレートから取得されるため、これはほとんどの場合使用されません。テンプレートの値と異なる値が必要な場合にのみ、バナーグループにこの値を設定してください。
  6. このバナーグループから来た新しいインストールを計測させるプライマリ(メイン)およびフォールバックの計測ソースを設定します。次の表をご参照のうえ、使用したい計測ソース(パラメータ)を選択してください。
    オプション いつ選択すべきか 備考
    Use UTM parameters (UTMパラメーターを使用) ほとんどの非オーガニック訪問者がUTMパラメータを持つソースからモバイルWebサイトにアクセスする場合に選択します。
    • メディアソース名 (pid) = UTM_Source 
    • キャンペーン (c) = UTM_campaign
    • UTM_Source または UTM_Campaign がない場合は、フォールバックとして静的名が使用されます。
    Use incoming attribution link parameters (アトリビューションリンクのパラメーターを使用) ほとんどの非オーガニック訪問者が、AppsFlyerの計測リンクを使用するクリック広告ネットワークからモバイルWebサイトにアクセスする場合に選択します。
    • AppsFlyerアトリビューションリンクからの全ての利用可能なパラメータは、スマートバナーリンクに追加されます。
    • AppsFlyerアトリビューションリンクとスマートバナーの両方にパラメータが存在する場合、パラメータは最終カスタムリンクで優先されます。
    Add another attribution parameter (別のアトリビューションパラメーターを追加) 必要に応じて、追加でWebサイトに関連する計測データを追加してください。これによりインストールごとに詳細な分析が可能になります。 例えば、eコマースサイトで全ての商品タイプに、af_adset の値のみが異なる同一のカスタムリンクを作成します(例:"af_adset=fruit")。 
    Use default attribution parameters (デフォルトのアトリビューションパラメータを使用)
    • 以下の場合に選択してください。
      • ほとんどのモバイルWebサイト訪問者がオーガニックである。
      • 非オーガニックの訪問者は、アドネットワークのクリックまたはUTMパラメーターを持つ媒体からWebサイトにこない。
    • パラメーター値をカスタマイズできます。
    重要:ベストプラクティスは、UTMまたは流入計測リンクパラメータを選択する方法です。なぜなら、メディアソース、キャンペーン、チャネル名が利用できない場合、デフォルトのスマートバナー計測パラメーターはカスタムリンク上でフォールバックとして使用されるためです。
  7. [推奨] デフォルトの計測パラメータチャンネル名を設定して、スマートバナーから来るすべてのインストールを指定されたチャンネルに紐づけます。これにより、コホートレポートオーバービュー管理画面リテンションレポートなどで、同じチャネルの下に複数のメディアソースからの情報を集約できます。
  8. [オプション] 非表示動作を設定します。つまり、ユーザーがグループ内のバナーを閉じてから、再度同じバナーが表示されるまでの最小時間を設定します。次のいずれかから選択してください。
    • 時間ごと:1時間、1日、または1週間。
    • 次のセッション:ユーザーがバナーを閉じた後、別のタブまたはウィンドウで行われるセッションを意味します。
    • 二度と表示しない:バナーは再表示されません。
      : 
      • ユーザーがブラウザのキャッシュをクリアするか、プライベートモードでブラウザを使用している場合は、非表示動作設定は機能しません。
      • 非表示動作は、ユーザーが閉じたバナーに適用されます。バナーグループ内の他のバナーは引き続き表示できます。
  9. [オプション] フリークエンシーキャップを設定します。
    フリークエンシーキャップは、バナーグループの各バナーが一人のユニークユーザーに対して最大何回表示させるかを決定します。
    [制限なし] (バナーは常に表示されます) または [ユーザー毎にバナーの表示回数を制限する] のいずれかを選択します。例えば、フリークエンシーキャップが3で、ユーザーが4回にサイトを訪れた場合、ユーザーには同じバナーが最初の3回表示されますが、4回目以降は表示されません。
  10. [オプション] バナーを表示するオペレーティングシステムを設定してください。
    • 全てのモバイルオペレーティングシステム
    • Androidのみ、またはiOSのみ。
  11. [オプション] バナーグループを有効化するスケジュール:すぐに開始(デフォルト)または期間限定のキャンペーンを設定します。
  12. [オプション] ロケーションを設定して、バナーグループが有効になる地域を指定します。
    1. このバナーグループをすべてのユーザーに表示するには、ワールドワイドを選択します。必要に応じて、異なる地域、国、州からの訪問者を除外します。
    2. 特定のロケーションを選択をクリックすると、このバナーグループを一つまたは複数のロケーションで表示できます。
  13. [オプション] 表示するページを設定してください。バナーグループを表示するページを設定します。
    • [デフォルト設定] ウェブサイトの全ページに表示されます。
      注意: フォールバックとして、全ページに少なくとも1つのバナーグループを定義することをお勧めします。
    • 特定のページに表示 : バナーを表示するために、ページまたはURLに含めるべき、または含めないものの条件を指定します。
      • 次のいずれかを選択できます。
        • 特定のページ:バナーを表示するページのホストおよび/またはパスを指定します。入力されたクエリはすべて無視されます。例: http://www.example.com/path?query
        • URLパスとクエリ:バナーが表示されるかを決定するパスおよび/またはクエリを入力してください。例:path?query。 注記:次のようにURL全体を入力しないでください。 http://www.example.com/path?query。パスおよび/またはクエリのみを入力してください。 
      • and/or を使用して、最大 5 つの条件を追加できます。
      • 条件間で競合がある場合、バナーは表示されません。
  14. バナーグループを作成をクリックします。
  15. [オプション] 再度バナーグループを編集するには、[ターゲティング&動作] にカーソルを合わせ、[編集] をクリックします。

 

マークは、「Feed Me」というフードデリバリーサービスのマーケティング担当者です。彼はアプリ内でスモモのセールキャンペーンを企画します。マークはこのキャンペーンのために、アドネットワークやGoogleだけでなく、SMSブラストも実施することにしました。

キャンペーンの準備として、マークは、

  • 流入リンクのアトリビューションパラメーターとUTMのパラメータの両方を使用を選択します(流入リンクとUTMのどちらのキャンペーンからのクリックでもない場合は、デフォルトのパラメーターがフォールバックとして使用されます)。
  • ユーザーをFeed Me モバイルサイトのスモモセールページに誘導するために、キャンペーンで使用するアトリビューションリンクをアドネットワークに渡します。このリンクには、Redirection URL (af_r) パラメーターと、スモモのセールページへのURLが含まれています:http://feedme.com/plums_link 
  • モバイルWebキャンペーン「plums_utm」を含むモバイルWebを訪問するユーザー向けにGoogle Adsキャンペーンを準備します。
  • SMS用に、ユーザーをFeed Me モバイルサイトのスモモセールページに誘導するために、キャンペーンリンクにアトリビューションパラメーターを追加します。リンクには pid パラメーターとスモモのセールページのURLが含まれます:http://feedme.com/plums_link?pid=sms&c=plums

キャンペーンが開始されます。

ユーザーフローは以下のとおりです。

  • スモモセールの広告をクリックし、Feed Meのモバイルサイトに遷移します。
  • Google Adsのクリックとその他全てのクリックは、流入リンクのランディングページに到着し、一致するスマートバナーがページごとに有効になります。
  • モバイルサイト上でスマートバーナーが表示されユーザーがクリックします。
  • ユーザーがFeed Meアプリに到達し、ダウンロード、インストールを行います。
  • アプリ起動時にスモモセールのページに遷移します。
  • Feed Meのモバイルサイトに誘導した正しいメディアソースにこのユーザーの成果が計測されます。

3. バナーの設定

バナーグループ内にバナークリエイティブを作成する:

  1. バナーの作成 をクリックして、バナーの編集ページを開きます。
  2. バナーの名前を設定します。
  3. クリエイティブをデザインします:
    1. クリエイティブをデザインするをくりっくして、バナーのクリエイティブを設定します。
      バナーテンプレートの選択画面が開きます。

    2. クリエイティブテンプレートにカーソルを合わせ、作成をクリックして、クリエイティブの作成ページを開きます。
    3. スマートバナークリエイティブの全ての要素をカスタマイズしましょう。名前で要素を選択するか、プレビュー画像上で要素をクリックして編集できます。
      • タイトル
      • 説明
      • 星のレーティング
      • 閉じるボタン
      • アクションボタン
      • アプリのロゴ
      • 背景
      • バナーの余白(バナーサイズを調整するため)
      • 画像は、次のいずれかのファイル形式を使用してください:jpeg、jpg、png 
        :webp形式はサポートされておりません。
        画像の推奨事項は次のとおりです:
        テンプレートタイプ 最大画像ファイルサイズ DPI 画像比率
        スタンダード 300 キロバイト 72 9:4 (横長)

        強化版

        9:4 (横長)
        販促版 1:1
        インタースティシャル 9:16 (垂直)
    4. レビューをクリックして、バナークリエイティブを確認し、異なるデバイス上でのデザインをレビューしてください。
      :アクティブなキャンペーンでは、プレビュー画像とバナーの表示が若干異なる場合があります。
    5. 変更が必要な場合は、エディタに戻るをクリックしてください。
    6. 完了をクリックして、バナー設定ページに戻ります。
  4. [オプション] カスタム計測パラメーターを追加してください。例えば、ad_adsetaf_ad などです。
    pidc、および channel パラメーターは、バナーグループ単位に属しているため、バナー単位では追加できません。
  5. 新しいクリエイティブが完了し保存した後、バナーのステイタスはアクティブになります。ステータストグルを使用して、アクティブ一時停止のステータスを切り替えられます。
  6. [オプション] ユーザー獲得用のURLからリターゲティングURLに計測リンクを変換するには、is_retargeting=true パラメーターを追加してください。
  7. すべて保存をクリックして保存するか、すべてを保存して閉じるをクリックして保存してバナー設定ページを閉じます。

4. テスト

クリエイティブの準備ができたら、本番環境でアクティブにする前に テストを実施してください。

スマートバナーのクリエイティブをテストする方法: 

前提条件:スマートバナーのコードスニペットがWebサイトに実装されていることを確認してください。

  1. クリエイティブのテストページにて、スマートバナーSDKが実装されているWebページへのリンクを入力してください(ディベロッパー向けのスマートバナーを参照してください)。
  2. [Generate] をクリックします。
  3. 生成されたリンクをコピーし、テスト端末に送信するか、QRコードをテスト端末でスキャンします。リンクまたはQRコードはWebページにリダイレクトし、クリエイティブとともにバナーが表示されます。
  4. クリエイティブを編集 をクリックしてクリエイティブ設定に戻るか、 完了をクリックしてクリエイティブを保存します。

追加情報

バナーグループの表示ロジック

AppsFlyerは、スマートバナーを表示するかどうかを決定する際に、次の点を考慮します。

  • バナーグループのルール(非表示動作、フリークエンシーキャップ、場所、アクティブなページ等)の設定はありますか?
  • エンドユーザーはルールの条件を満たし、バナーが表示される条件に当てはまりますか?

両方の質問に対する回答が「はい」の場合、つまりルールが設定されていて、ユーザーにバナーを表示する条件に当てはまる場合、AppsFlyerは次の表で説明されているように表示するバナーを選択します。

バナーグループの設定 どのバナーが表示されるか
単一バナーグループ AppsFlyerは、すべてのバナーグループ内のすべてのアクティブなバナーを、すべての適格なユーザー間で均等に分割して表示します。
  • 例1:アクティブなバナーが1つあります。これは全てのユーザーに表示されます。
  • 例2:バナーが2つあります。50%のユーザーにはバナー1が表示され、残りの50%にはバナー2が表示されます。
  • 例3:バナーが3つあり、該当ユーザーの1/3に各バナーが表示されます。
  • 例4:アクティブなバナーはありません。何も表示されません。
複数のバナーグループで同じルールが設定されている場合 AppsFlyerは、すべてのバナーグループ内のすべてのアクティブなバナーを、すべての適格なユーザー間で均等に分割して表示します。

2つのバナーグループ(AとB)にそれぞれ3つのバナー(合計6つのバナー)が存在します。該当するユーザーの1/6に各バナーが表示されます。

複数のバナーグループで異なるルールが設定されている場合 AppsFlyerは、該当するユーザーを最も具体的に記述し一致するルールを持つバナーグループ内の全てのアクティブなバナーを均等に分割して表示します。バナーグループが異なる方法で等しく特定されている場合は、これらすべてのバナーグループのバナーが表示されます。
  • 例1:AとBの2つのバナーグループがあります。バナーグループAは世界中に表示するように設定され、バナーグループBは日本で表示するように設定されています。バナーグループBのほうがより具体的なルールであるため、日本のユーザーにはこのグループのバナーのみが表示されます。グループにアクティブなバナーがない場合は、何も表示されません。
  • 例2:AとBの2つのバナーグループがあります。バナーグループAは世界中に表示するように設定され、バナーグループBはウクライナ以外の全ての国に表示するように設定されています。バナーグループBのほうがより具体的なルールであるため、ウクライナを除く世界中のユーザーにはこのグループのバナーのみが表示されます。バナーグループBにアクティブなバナーがない場合は、何も表示されません。ウクライナではバナーグループAが表示されます。
  • 例3:AとBの2つのバナーグループがあります。バナーグループAは日本で表示するように設定され、バナーグループBは4月に表示するように設定されています。どちらのバナーグループも、それぞれ異なる具体性を持っています。したがって、両方のグループが同等な優先度を持っているため、4月中は日本で両方のバナーが表示されます。

バナーのパフォーマンスをA/Bテストする

個々のバナーのパフォーマンスをA/Bテストすることができます。テストするには、カスタム計測パラメーターをバナークリエイティブに追加し(バナー設定のステップ4)、これらのパラメーターを使用して各バナーのパフォーマンスを比較してください。

pidcchannelはバナーグループ単位のため、これら以外のパラメーターを追加してください。

推奨:各バナークリエイティブに一意の af_adset パラメーターを追加してください。次に、AppsFlyerオーバービュー管理画面の集計パフォーマンスレポートを使用して、次の画像のとおり、パフォーマンスを簡単に比較できます。

banner_performance.jpg

よくある質問

なぜバナーが表示されないのですか?

バナーグループで設定されているフリークエンシーキャップによるためです。フリークエンシーキャップ(最大表示回数)は、1ユニークユーザーに対しての最大表示回数を設定できます。たとえば、最大表示回数が3に設定されている場合、ユーザーがサイトに4回アクセスすると、最初の3回はバナーが表示されますが、4回目のアクセスでは表示されません。最大表示回数は無効にすることも可能です。最大表示回数の値を選択、またはを最大表示回数を無効にしてください。

スマートバナーのURLにパラメーターを追加できますか?

はい。showBanner 関数、または updateParams 関数を使用してスマートバナーのURLにパラメーターを追加できます。

スマートバナーはディープリンクに対応していますか?

はい。そのためには、deep_link_value パラメーターを以下のいずれかの方法で追加してください。

  • AppsFlyer画面にて、バナーの設定時に静的なカスタム計測パラメーターを追加してください。
  • showBanner 関数で additionalParams を使用して、バナーを表示する前にURLにパラメーターを追加することができます。
  • updateParams 関数を使用して、バナーが表示された後にURLにパラメーターを追加することができます。

deep_link_value で希望する動作を開発者が実装していることを確認してください。

スマートバナーは、ユーザーがアプリをインストール済みかどうかによって、異なるコンテンツを表示することができますか?

いいえ。ユーザーがアプリをインストール済みかどうか分からない場合は、両方の場合に適用できるCTA (Call To Action)を使用することを推奨します。例:「アプリへ移動する」または「アプリを開く」など。

ユーザーがバナーのあるオリジナルのランディングページからサイト内の別のページに移動し、その後バナーのあるページに戻った場合、オリジナルの受信URLパラメーターはスマートバナーのURLでまだ利用可能でしょうか?

はい。元の受信URLに utm_source または pid パラメーターが含まれている場合、元のURLは閲覧セッションの間保存され、パラメーターは発信バナーURLに適用されます。

モバイルサイトではバナーを表示し、ラップ / ハイブリッドアプリでは表示しないように設定することはできますか?

はい。そのためには、スマートバナーをラップ/ハイブリッドアプリに実装し、アプリからバナーページを読み込む際に(Webブラウザではなく)、showBanner 関数を使わないでください。これは、アプリ内にバナーを表示します。または、hideBanner 関数を使用してください。

特性と制限

特性 備考
タブレット
  • スマートバナーはモバイルデバイス用に設計されており、解像度は大画面のタブレットには最適化されない場合があります。
  • タブレットのブラウザはモバイルデバイスとして認識されない場合があります。
カスタムパラメーター
  • カスタム計測パラメーターでは次の特殊文字は使用できません: ;、*、!、@、#、?、$、^、:、&、~、`、=、+、’,、>、<、/
  • これらの特殊文字がパラメーターに含まれている場合は、パラメーターは保存されません。
バナー表示の分割 AppsFlyerは、アクティブなバナーを均等に分割してユーザーに表示します。特定のバナーをより多くまたは少なく表示することを選択することはできません。例えば、2つのバナーグループがある場合、それぞれ50%のユーザーに表示されます。この割合を 70%-30% に変更することはできません。 
特定のページ 特定のページにバナーを表示するようにバナーグループを設定すると、バナーのルールは入力したホスト/パスにのみ適用されます。完全一致ではない場合(例えば、サイトページにルール設定に含まれていない追加の文字列がある場合)ルールは適用されません。
この記事は役に立ちましたか?