スマートバナー - モバイルWebからアプリへ

概要:Webサイトトラフィックの大部分はモバイル端末から発生しています。モバイルサイトにスマートバナーを使用して、Web訪問者をアプリユーザーにコンバートしましょう。

smart-banners-webinar_ja.jpg

wc2a.jpg

スマートバナー

スマートバナー

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

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

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

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

 注意

スマートバナーが適切なソリューションか確信が持てませんか?
スマートバナーとAppsFlyerの他のWebからアプリへユーザーを誘導するソリューションを比較してみましょう。

作業範囲

作業担当者

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

  • Webサイト開発者は、サイトのHTMLにコードスニペットを入力するという作業が必要です。
  • 設定に関するその他のアクションは、マーケティング担当者が実行する項目です。

前提条件

  • 少なくとも 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 管理画面から、エンゲージメント&ディープリンク > スマートバナーへ移動します。
  2. [Website Workplaceを作成 ] をクリックします

    SB_website_workplace_en-us.png

  3. Website workplaceの名前を入力します。
  4. [作成] をクリックします
    Website Workplaceが開きます。 
  5. バナーのコードスニペットをコピーします。
  6. このコードスニペットをフロントエンド開発者へ渡し、Webサイトへ実装するよう依頼します。
    このシンプルなタスクは、Webサイトにつき一度のみフロントエンド開発者によって実施されるだけで、この後のステップでは彼らに作業をしてもらう必要はありません。 
  7. [オプション] Web keyをコピーします(このキーは既にコードスニペットの一部としてコード内に存在します)。
  8. [次へ] をクリックします

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

バナーグループには、1 つ以上のバナーが含まれています。ここでは次の設定が可能です。

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

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

  1. AppsFlyer 管理画面から、エンゲージメント&ディープリンク > スマートバナーへ移動します。
  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. [オプション] バナーグループを有効化するスケジュール:すぐに開始(デフォルト)または期間限定のキャンペーンを設定します。
  11. [オプション] ロケーションを設定して、バナーグループが有効になる地域を指定します。
    1. このバナーグループをすべてのユーザーに表示するには、ワールドワイドを選択します。必要に応じて、異なる地域、国、州からの訪問者を除外します。
    2. 特定のロケーションを選択をクリックすると、このバナーグループを一つまたは複数のロケーションで表示できます。
  12. [オプション] Webサイト内でバナーグループが訪問者に表示される表示するページを設定します:
    • [デフォルト] Webサイトの全てのページに表示します。
      : フォールバックとして、全てのページに少なくとも1つのバナーグループを定義することをお勧めします。
    • 特定のページに表示 : バナーを表示するために、ページまたはURLに含めるべき、または含めないものの条件を指定します。
      • 次のいずれかを選択できます。
        • 特定のページ:バナーを表示するページのホストおよび/またはパスを指定します。入力されたクエリはすべて無視されます。例:http://www.example.com/path?query
        • URL : バナーを表示するページのパスおよび/またはクエリ、またはパスおよび/またはクエリのキーワードを指定します。例: http://www.example.com/path?query
      • and/or を使用して、最大 5 つの条件を追加できます。
      • 条件間で競合がある場合、バナーは表示されません。
  13. バナーグループを作成をクリックします。
  14. [オプション] 再度バナーグループを編集するには、[ターゲティング&動作] にカーソルを合わせ、[編集] をクリックします。

 

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

SMSを使用したキャンペーンの準備として、マークは以下の作業を実行します。

  • ユーザーをFeed Me モバイルサイトのスモモセールページに誘導するために、キャンペーンリンクにアトリビューションパラメーターを追加します。リンクには pid パラメーターとスモモのセールページのURLが含まれます: http://feedme.com/plums_link?pid=sms&c=plums.
  • Attributed sources が Use incoming attribution link parametersに設定されており、「plums_link」を含むモバイルWebページを訪問したユーザーに対して有効になるスマートバナー (バナーグループとバナー) を作成します。

アドネットワークを使用したキャンペーンの準備として、マークは以下の作業を実行します。

  • ユーザーをFeed Me モバイルサイトのスモモセールページに誘導するために、キャンペーンで使用するアトリビューションリンクをアドネットワークに渡します。このリンクには、Redirection URL (af_r) パラメーターと、スモモのセールページへのURLが含まれています:http://feedme.com/plums_link追加パラメーターは不要です。
  • SMSキャンペーン向けに既に作成したスマートバナーを使用します

Google Adsを使用したキャンペーンの準備として、マークは以下の作業を実行します。

  • Feed Meのモバイルサイトで、スモモのセールページの複製を作成します: https://www.feedme.com/plums_utm?utm_source=google&utm_campaign=plums
  • Attributed sources が Use UTM parametersに設定され、「plums_utm」を含むモバイルWebページを訪問するユーザーに対して有効になるスマートバナー (バナーグループとバナー)  の複製を作成します。

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

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

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

3. バナーの設定

バナーグループにバナーを作成する方法:

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

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

        強化版

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

4. テスト

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

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

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

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

制限事項

制限事項 備考
タブレット
  • スマートバナーはモバイルデバイス用に設計されており、解像度は大画面のタブレットには最適化されない場合があります。
  • タブレットのブラウザはモバイルデバイスとして認識されない場合があります。
この記事は役に立ちましたか?