スマートバナー — モバイルウェブからアプリへの誘導（マーケター向け）

スマートバナーを初めて実装するためにモバイルサイトを準備する方法

1. AppsFlyer管理画面 左メニュー エンゲージメント > Web-to-App > スマートバナー > スマートバナーへ移動します。
2. はじめようをクリックしてください。設定画面が開き、必要なステップ（以下）を案内します。ウェブサイトワークプレイスを設定するには、以下を参照してください。
3. ウェブサイトワークプレイス名を入力します。
4. 作成をクリックしてください。ウェブサイトのワークプレイスが開きます。 
5. 以下のバナーコードスニペットをコピーします。 
6. コードスニペットをウェブサイトに実装してください。この作業は、1つのウェブサイトに対して一度だけ行ってください。
   • このコードをウェブサイトのGoogle Tag Manager、Adobe Tag Manager、Shopify、Wix、Squarespace、またはWordPressに追加するには、マーケター向けスマートバナーのウェブサイトコードの実装を参照してください。
   • コードを他のプラットフォーム経由で追加したり、必要に応じてコードを変更する（パラメーターの追加、ディープリンク、バナーの非表示、スマートバナーと PBA の統合など）には、 デベロッパー向けスマートバナーのウェブサイトコードの実装を参照してください。
7. [オプション] ウェブキーをコピーします。（このキーは、コードスニペットの一部として既に存在します）。
8. 次へをクリックしてください。

2回目以降のウェブサイトワークプレイスを作成する方法

1. AppsFlyer管理画面左メニュー エンゲージメント > Web-to-app > スマートバナー > Studioを選択します。
2. オプションメニューをクリックしてください。 
3. 新しいウェブサイトワークプレイスを選択してください。
4. ウェブサイトワークプレイス名を入力します。
5. 作成をクリックしてください。ウェブサイトのワークプレイスが開きます。 
6. 以下のバナーコードスニペットをコピーします。 
7. コードスニペットをウェブサイトに実装してください。この作業は、1つのウェブサイトに対して一度だけ行ってください。
   • このコードをウェブサイトのGoogle Tag Manager、Adobe Tag Manager、Shopify、Wix、Squarespace、またはWordPressに追加するには、マーケター向けスマートバナーのウェブサイトコードの実装を参照してください。
   • コードを他のプラットフォーム経由で追加したり、必要に応じてコードを変更する（パラメーターの追加、ディープリンク、バナーの非表示、スマートバナーと PBA の統合など）には、 デベロッパー向けスマートバナーのウェブサイトコードの実装を参照してください。
8. [オプション] ウェブキーをコピーします。（このキーは、コードスニペットの一部として既に存在します）。
9. 次へをクリックしてください。

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

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

バナーグループを設定または複製する：

1. AppsFlyer管理画面 左メニュー エンゲージメント > Web-to-App > スマートバナーへ移動します。
2. バナーグループを初めて設定する場合 -
   1. 左側のメニューで、バナーグループの追加をクリックします。
   2. ステップ5以降の手順に従ってください。
3. 追加のバナーグループを設定する場合 -
   1. Studioタブに移動します。
   2. + Newをクリックします。
   3. ステップ5以降の手順に従ってください。
4. バナーグループを複製するには：
   1. 削除アイコンの横にある 複製 アイコンをクリックします。
5. 一意のバナーグループ名を入力します。名前は、バナーグループ内で定義されるバナー間の一般的な共通テーマ（広告アプリなど）を反映した名前を付けてください。
6. バナーグループのOneLinkテンプレートを選択します。
7. [オプション] ユニバーサルリンクとAndroidアプリリンクユーザーのフォールバックとして、バナーグループ用のURIスキームを設定します。デフォルトで、この値はOneLinkテンプレートから取得されるため、これはほとんどの場合使用されません。テンプレートの値と異なる値が必要な場合にのみ、バナーグループにこの値を設定してください。
8. このバナーグループから来た新しいインストールを計測させるプライマリ（メイン）およびフォールバックの計測ソースを設定します。次の表をご参照のうえ、使用したい計測ソース（パラメータ）を選択してください。 
   
   クリックID転送に関する注意：FBCLID、GCLID、WBRAID、GBRAIDは、受信URLで利用可能であれば、自動的に送信URLに転送されます。GoogleのクリックIDの場合、"keyword" パラメータも見つかった場合、キーワードの値を af_keywords の値として送信URLに入れます。
   

   以下の表を使用して、カスタムリンクへ最適なオプションを選択してください：

   オプション	いつ選択すべきか	備考
   UTM パラメーターを使用する	ほとんどの非オーガニック訪問者が UTMパラメーターを持つソースからモバイルウェブサイトにアクセスする場合に選択します。	◦ メディアソース名（pid）= UTM_Source ◦ キャンペーン（c）= UTM_campaign ◦ UTM_Source または UTM_Campaign がない場合は、フォールバックとして静的名が使用されます。
   計測リンクのパラメーターを使用する	非オーガニック訪問者のほとんどが、AppsFlyer の計測リンクを使用するクリックアドネットワークからモバイルウェブサイトにアクセスするタイミングを選択します。	◦ 受信した AppsFlyer 計測リンクから利用可能なすべてのパラメーターがスマートバナーリンクに追加されます。  ◦ 受信する AppsFlyer 計測リンクとスマートバナーの両方にパラメータが存在する場合、受信パラメータが最終的なカスタムリンクで優先されます。
   別のアトリビューションパラメーターを追加	必要に応じて、追加でウェブサイトに関連するアトリビューションデータを追加します。これにより、すべてのインストールを詳細に分析できます。	たとえば、Eコマースサイトでは、すべての製品カテゴリタイプに対して、af_adset 値が異なる同一のカスタムリンクを作成します（例: "af_adset=fruit"）
   デフォルトのアトリビューションパラメーターを使用する	◦ 次の場合に選択します： ▪ モバイルウェブサイトの訪問者のほとんどがオーガニック　▪ 非オーガニック訪問者が、クリックアドネットワークやUTMパラメーターを持つソースからウェブサイトにアクセスすることがない　◦ パラメータ値をカスタマイズできます。	重要：ベストプラクティスは、UTM または流入計測リンクパラメーターを選択する方法です。なぜなら、メディアソース、キャンペーン、チャネル名が利用できない場合、デフォルトのスマートバナー・アトリビューションパラメーターはカスタムリンク上でフォールバックとして使用されるためです。

9. [推奨] デフォルトのアトリビューションパラメーターチャネル名を設定して、スマートバナーからのすべてのインストールを指定したチャネルにアトリビューションします。これにより、コホートレポート、オーバービュー、リテンションレポートなどで、同じチャネルの下に複数のメディアソースからの情報を集約できます。
   
   
10. [オプション]　バナーグループを使用して、バナーをクリックしたユーザーが実行したリエンゲージメントを記録する場合は、リターゲティング をオンにします。リターゲティングの詳細については、 リターゲティングアトリビューションガイドを参照してください。

    重要

    リターゲティングを機能させるには、次の設定も必要です：

    • アプリのリターゲティングを有効にする 

    OneLinkを利用した非リターゲティングバナーリンク（UA）をクリックした既存ユーザーもアプリを起動し、同じユーザーエクスペリエンスを得ることができます。ただし、リエンゲージメントは通常のセッションとして記録されるため、オウンドメディアキャンペーンの成功を測定することはできません。

11. [オプション] リターゲティングでアクティブなユーザーを無視する をオンにして、特定の休眠期間を選択・設定します。これにより、パラメーター af_inactivity_window=[日数] がスマートバナーグループリンクに追加され、期間中にアクティブなすべてのユーザーがリターゲティング計測で無視されます。
12. リエンゲージメント期間を設定し、リエンゲージメントCV計測後に、ユーザーが実行したアプリ内イベントがリターゲティングメディアソースに紐づけられる期間を設定します。
    • 値には、日数（1～90）、時間数（最大23）またはLifetime（無限）を設定できます。
    • リエンゲージメント期間は、 af_reengagement_window パラメーターでリンクに追加されます。
13. [オプション] 非表示動作を設定します。つまり、ユーザーがグループ内のバナーを閉じてから、再度同じバナーが表示されるまでの最小時間を設定します。次のいずれかから選択します：
    • 期間：1時間、1日、または1週間。
    • 次のセッション：ユーザーがバナーを閉じた後、別のタブまたはウィンドウで行われるセッションを意味します。
    • 二度と表示しない：バナーは再表示されません。 　注：
      • ユーザーがブラウザのキャッシュをクリアするか、プライベートモードでブラウザを使用している場合は、非表示動作設定は機能しません。
      • 非表示動作は、ユーザーが閉じたバナーに適用されます。バナーグループ内の他のバナーは引き続き表示できます。
14. [オプション] フリークエンシーキャッピングを設定します。  フリークエンシーキャッピングは、バナーグループ内の各バナーが一意のユーザーに表示される回数を決定します。制限なし（バナーが常に表示される）またはバナーの表示を制限するのいずれかを選択できます。

    たとえば、バナーグループが 3つのバナー（クリエイティブ）で構成され、フリークエンシーキャッピングが 1 に設定されている場合、グループ内の各バナーはユーザーごとに 1 回表示されます。このシナリオでは、3回アクセスした後、ユーザーはグループ内の 3つのすべてのバナーを閲覧（表示）します。ただし、4回目の訪問以降、このユーザーはグループからのバナーが表示されなくなります。フリークエンシーキャッピングを 2 に設定すると、グループ内の各バナーはユーザーごとに 2回ずつ表示され、グループの上限に達するには合計 6回のアクセスが必要です。

15. [オプション] バナーを表示するオペレーティングシステムを設定してください：
    • 全てのモバイルオペレーティングシステム
    • Androidのみ、またはiOSのみ。
16. [オプション] バナーグループを有効化するスケジュール：すぐに開始（デフォルト）または期間限定のキャンペーンを設定します。
17. [オプション] ロケーションを設定して、バナーグループが有効になる地域を指定します。
    1. このバナーグループをすべてのユーザーに表示するには、ワールドワイドを選択します。必要に応じて、異なる地域、国、州からの訪問者を除外します。
    2. 特定のロケーションを選択をクリックすると、このバナーグループを一つまたは複数のロケーションで表示できます。
18. [オプション] ウェブサイト内でバナーグループが訪問者に表示される表示するページを設定します：
    • [デフォルト] Webサイトの全てのページに表示します。 　注：フォールバックとして、すべてのページに少なくとも1つのバナーグループを定義することをお勧めします。
    • 特定ページに表示する：バナーを表示するために、ページや URL に何を含めるべきか、あるいは含めるべきではないかを指定します。
      • 次のいずれかを選択できます。
        • 特定のページ：バナーを表示するページのホストまたはパスを指定します。入力されたクエリはすべて無視されます。例: http://www.example.com/path?query
        • URLパスとクエリ：バナーを表示するかどうかを決定するパスやクエリを入力する。例： path?query 　注：http://www.example.com/path?query などのURL全体を入力しないでください。パスやクエリのみを入力します。
      • and/or を使用して、最大15の条件を追加できます。
      • 条件間で競合がある場合、バナーは表示されません。
19. バナーグループを作成をクリックします。
20. [オプション] 再度バナーグループを編集するには、ターゲティング＆動作 にカーソルを合わせ、編集 をクリックします。

ターゲティング＆動作

[ターゲティング＆動作] パネルには、そのバナーグループに対して構成した設定が表示されます。これらの設定を編集するには、編集アイコンをクリックします。

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

1.  + 新しいバナー をクリックして、 バナーの編集 ページに入ります。
2. バナーの名前を設定します。
3. クリエイティブをデザインします：
   1. クリエイティブをデザインするをクリックして、バナーのクリエイティブを設定します。

      バナーテンプレートの選択画面が開きます。

      
   2. クリエイティブテンプレートにカーソルを合わせ、作成をクリックして、クリエイティブの作成ページを開きます。
   3. スマートバナークリエイティブの全ての要素をカスタマイズしましょう。名前で要素を選択するか、プレビュー画像上で要素をクリックして編集できます。 注記：すべての要素がすべてのテンプレートで使用できるわけではありません。
      • タイトル
      • 説明
      • 星のレーティング
      • 閉じるボタン
      • アクションボタン
      • アプリのロゴ
      • 背景
      • バナーの位置
      • バナーの余白（バナーサイズを調整するため）
      • デバイスの透明性
      • 画像は、次のいずれかのファイル形式を使用してください：jpeg、jpg、png 注：webp形式はサポートされておりません。  画像の推奨事項は次のとおりです：

        テンプレートタイプ	最大画像ファイルサイズ	画像比率	画像の縦サイズ	画像の横サイズ
        極小	300 KB	3:1（幅 x 高さ）	70 ピクセル	デバイスに合わせて自動調整
        スタンダード	300 KB	3:1（幅 x 高さ）	70 ピクセル	デバイスに合わせて自動調整
        強化版	300 KB	9:4（幅 x 高さ）	110 ピクセル	デバイスに合わせて自動調整
        複数オプション	300 KB	9:4（幅 x 高さ）	110 ピクセル	デバイスに合わせて自動調整
        販促版	300 KB	4:5（幅 x 高さ）	300 ピクセル	デバイスに合わせて自動調整
        複数オプション - オーバーレイ	300 KB	9:4（幅 x 高さ）	110 ピクセル	デバイスに合わせて自動調整
        インタースティシャル	700 キロバイト	9:16（幅 x 高さ）	デバイスに合わせて自動調整	デバイスに合わせて自動調整

   4. レビューをクリックして、バナークリエイティブを確認し、異なるデバイス上でのデザインをレビューしてください。　注：アクティブなキャンペーンでは、プレビュー画像とバナーの表示が若干異なる場合があります。
   5. 変更が必要な場合は、エディタに戻るをクリックしてください。
   6. 完了をクリックして、バナー設定ページに戻ります。
4. [オプション] カスタムアトリビューションパラメーターを追加してください。例：ad_adset および af_ad。　注：pid、c、channelのパラメーターは、バナーグループ単位に属しているため、バナー単位では追加できません。
5. 新しいクリエイティブが完了し保存した後、バナーのステイタスはアクティブになります。ステータストグルを使用して、アクティブと一時停止のステータスを切り替えられます。
6. すべて保存をクリックして保存するか、すべてを保存して閉じるをクリックして保存してバナー設定ページを閉じます。

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

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

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

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

パフォーマンスページでは、過去90日間までのすべてのスマートバナーのパフォーマンスデータを表示して比較できます。

パフォーマンスページを表示する方法：

1. AppsFlyer のサイドメニューから、Engage>Web-to-app>Smart Banners>Performanceを選択します。
2. パフォーマンスを確認したい期間を選択してください。デフォルトの期間は過去7日間です。
3. [オプション] 現在アクティブなバナーのみを表示する をオンにしてください。オンにすると、一時停止しているバナーや現在アクティブでないバナーのデータは、選択した日付範囲内にアクティブであった場合でも表示されません。選択した期間のパフォーマンスデータが表示されます。

特定のバナーの過去 7日間のパフォーマンスデータを確認できます。

バナーのパフォーマンスを表示するには：

1. AppFlyer管理画面左メニュー エンゲージメント > Web-to-app > スマートバナー > Studioを選択します。
2. パフォーマンスを表示するウェブサイトワークプレイスとバナーグループを選択します。
3. バナーグループ内のいずれかのバナーにカーソルを合わせてください。過去1週間のパフォーマンスデータが表示されます。

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

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

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

パフォーマンス管理画面でパフォーマンスを比較することで、バナーのA/Bテストを行うことができます。アトリビューション関連の追加データについては、バナークリエイティブまたはバナーグループごとに一意の値を持つ af_adset、af_adまたはその他のアトリビューションパラメーター（pid、c、channelを除く）を追加することをお勧めします。これらのパラメーターは、AppsFlyerの管理画面やレポートでデータを表示する際に、各バナーグループのパフォーマンスを比較するために使用します。

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

はい。ウェブサイトで使用する独自のフォントをバナーに設定するには、 デベロッパーハブの手順を使用します。

• 実装するには、We開発者の実装が必要です。
• フォントは、ウェブサイト上のすべてのバナーとバナー内のすべてのテキスト要素に適用されます。
• フォントは AppsFlyer 管理画面上のクリエイティブエディターでは表示できません。
• 実装後、 クリエイティブバナーをテストしてください。
• フォントが正しく表示されない場合は、クリエイティブエディターでバナーを再保存します。

はい、スマートスクリプトの中で以下の2つの関数を呼び出します：

• showBanner
• updateParams

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

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

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

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

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

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

私たちは、障碍のあるユーザーを含むすべてのユーザーがスマートバナーに完全にアクセスして関与できるようにすることをお約束します。

そのため、スマートバナーのウェブアクセシビリティを互換性のあるものにし、スマートバナー要素に関連するHTML属性を提供することで、WCAG 2.1標準のベストプラクティスに従うよう努めています。

ただし、そのようなスマートバナーのお客様自身の使用目的に関連するアクセシビリティ要件を決定することは、お客様の単独の責任です。お客様は、使用するスマートバナーが、関連するウェブアクセシビリティ要件に従って、すべてのユーザーが引き続きアクセスできるようにする責任を単独で負います。

スマートバナーに対するさまざまな変更は、内部バナー要素の色やサイズを編集するなど、関連するアクセシビリティ要件との互換性に影響を与える可能性があることに注意してください。