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

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

スマートバナー

WebサイトにAppsFlyer スマートバナーSDKを設置することで、スマートバナーを利用できます。Webサイト側での初期セットアップの他には、コーディングは不要です。 

スマートバナーを使用すると、モバイルウェブサイトに訪問しユーザー経由のアプリインストールの質を測定できます。スマートバナーは、クリックスルーアトリビューションを利用してアトリビューション測定し、さらにインプレッションもカウントすることができます。

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

 注意

スマートバナーがあなたのアプリに適切なソリューションであるかどうか確かではありませんか?
スマートバナーとAppsFlyerの他ソリューションを比較してみましょう。

作業範囲

作業担当者

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

  • 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 default attribution parameters (デフォルトのアトリビューションパラメータを使用)
    • ほとんどのモバイルWebサイトの訪問者がオーガニックの場合に選択します。
    • 非オーガニック訪問者がクリック広告ネットワークやUTMパラメータを持つメディアソースからWebサイトにアクセスしない場合に選択します。

    重要:これらの値は、カスタムリンク上でメディアソース、キャンペーン、またはチャネル名が利用できない場合の代替として使用されます。

    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")。 
  7. [推奨] デフォルトの計測パラメータチャンネル名を設定して、スマートバナーから来るすべてのインストールを指定されたチャンネルに紐づけます。これにより、コホートレポートオーバービュー管理画面リテンションレポートなどで、同じチャネルの下に複数のメディアソースからの情報を集約できます。
  8. [オプション] 非表示動作を設定します。つまり、ユーザーがバナーを閉じてから、再度バナーが表示されるまでの最小時間を設定します。次のいずれかから選択します。
    • 時間ごと:1時間、1日、または1週間。
    • 次のセッション:ユーザーがバナーを閉じた後、別のタブまたはウィンドウで行われるセッションを意味します。
    • 二度と表示しない:バナーは再表示されません。
      :ユーザーがブラウザのキャッシュをクリアするか、プライベートモードでブラウザを使用している場合は、非表示動作設定は機能しません。
  9. [オプション] フリークエンシーキャップを設定します。
    フリークエンシーキャップは、一意のユーザーにバナーが表示される最大回数を示します。たとえば、最大表示回数が3に設定されている場合、ユーザーがサイトに4回アクセスすると、最初の3回はバナーが表示されますが、4回目のアクセスでは表示されません。最大表示回数は無効にすることも可能です。最大表示回数の値を選択、またはを最大表示回数を無効にします。
  10. [オプション] バナーグループを有効化するスケジュール:すぐに開始(デフォルト)または期間限定のキャンペーンを設定します。
  11. [オプション] ロケーションを設定して、バナーグループが有効になる地域を指定します。
    1. このバナーグループをすべてのユーザーに表示するには、ワールドワイドを選択します。必要に応じて、異なる地域、国、州からの訪問者を除外します。
    2. 特定のロケーションを選択をクリックすると、このバナーグループを一つまたは複数のロケーションで表示できます。
  12. [オプション] Webサイト内でバナーグループが訪問者に表示される表示するページを設定します:
    • [デフォルト] ウェブサイトの全てのページに表示します。
      : フォールバックとして、すべてのページに少なくとも1つのバナーグループを定義することをお勧めします。
    • 特定のページに表示 : バナーを表示するために、ページまたはURLに含めるべき、または含めないものの条件を指定します。
      • 使用できる特殊文字:&, ?, =, /, :, -, %.
      • and/or を使用して、最大 5 つの条件を追加できます。
      • 条件間で競合がある場合、バナーは表示されません。
  13. バナーグループを作成をクリックします。
  14. [オプション] 再度バナーグループを編集するには、[ターゲティング&動作] にカーソルを合わせ、[編集] をクリックします。

 例

マークは、カリフォルニア州で Feed Me の新しいビーガンハンバーガーのキャンペーンを作成することにしました。

  • 彼は新しいバナーグループを作成し「Feed me burgers」と名付けました。
  • ロケーションをカリフォルニア州に設定し、カリフォルニアの訪問者のみにこのバナーグループを表示します。
  • バナーを次のページのみに https://feedme.com/promo/veganburger かつ、URLに utm_campaign=google が含まれている場合に表示するように指定します。

smart_banner_example_3.jpg

3. バナーの設定

新しいバナーグループの最初のバナーを作成する方法:

  1. バナーの作成 をクリックして、バナーの追加ページを開きます。
  2. バナーの名前を設定します。
  3. [クリエイティブをデザインする]をクリックして、バナーのクリエイティブを設定します(下記参照)。
  4. 新しいクリエイティブが完了し保存した後、バナーのステイタスはアクティブになります。トグルを使用してアクティブ一時停止中のステイタスを切り替えてください。
  5. [オプション] 必要に応じて、バナー固有のアトリビューションパラメータを追加します。例:広告名。
  6. アトリビューションリンクを新規ユーザー獲得タイプのURLからリターゲティングURLへ変更するには、カスタムの is_retargeting=true パラメーターを追加します。
  7. [保存して閉じる] をクリックします。

バナークリエイティブの設定

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

  1. バナー設定ページにて、[クリエイティブをデザインする] をクリックしてクリエイティブ設定ページを開きます。
  2. [クリエイティブテンプレート] をクリックし、希望のテンプレートにカーソルを合わせ、[作成する] をクリックしクリエイティブの構築ページを開きます。
  3. クリエイティブの構築設定ページでは、他のクリエイティブテンプレートを試すことができます。
  4. すべてのテキストと画像を独自のものに変更します。
  5. 全ての画像は次のフォーマットのいずれかにしてください:.png、.jpeg、.jpg
    また URLには、ファイル拡張子が含まれている必要があります。
      有効なURL: https://example.com/my_image.png 
      無効なURL: https://example.com/my_image 
    使用する画像の全てのツールチップを確認し、推奨事項を確認してください。
  6. [クリエイティブを構築する] をクリックします。

SB_Build_creative_en-us.png

4. テスト

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

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

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

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