初めてSmart Bannersを表示するためのモバイルサイトの準備

1. AppsFlyerのサイドメニューから、［Engage］ > ［Web-to-app］ > ［Smart Banners］ > ［Smart Bannersへ移動］を選択します。
2. ［はじめる］をクリックします。設定ウィザードの案内に従って、以下の手順を進めます。 Webサイトのワークスペースを追加する場合は、後述の手順を参照してください。
3. Webサイトのワークスペース名を入力します。
4. ［作成］をクリックします。 Webサイトのワークスペースが開きます。 
5. バナーのコードスニペットをコピーします。 
6. Webサイトにコードスニペットを実装します。この作業は、Webサイトごとに一度だけ行います。
   • Googleタグマネージャー、Adobe Tag Manager、Shopify、Wix、Squarespace、WordPressでWebサイトにコードを追加する方法は、Smart Banners｜Webサイトへのコード実装（マーケター向け）を参照してください。
   • 他のプラットフォームでの実装や、要件に合わせたコードの変更（パラメータの追加、ディープリンク、バナーの非表示、PBAとSmart Bannersの連携など）については、Smart Banners｜Webサイトへのコード実装（開発者向け）を参照してください。
7. ［任意］Webキーをコピーします。（このキーは、コードスニペットにも含まれています。）
8. ［続行］をクリックします。

2つ目以降のWebサイトのワークスペースを作成するには

1. AppsFlyerのサイドメニューから、［Engage］ > ［Web-to-app］ > ［Smart Banners］ > ［Studio］を選択します。
2. オプションメニューをクリックします。 
3. ［新しいWebサイトのワークスペース］を選択します。
4. Webサイトのワークスペース名を入力します。
5. ［作成］をクリックします。 Webサイトのワークスペースが開きます。 
6. バナーのコードスニペットをコピーします。 
7. Webサイトにコードスニペットを実装します。この作業は、Webサイトごとに一度だけ行います。
   • Googleタグマネージャー、Adobe Tag Manager、Shopify、Wix、Squarespace、WordPressでWebサイトにコードを追加する方法は、Smart Banners｜Webサイトへのコード実装（マーケター向け）を参照してください。
   • 他のプラットフォームでの実装や、要件に合わせたコードの変更（パラメータの追加、ディープリンク、バナーの非表示、PBAとSmart Bannersの連携など）については、Smart Banners｜Webサイトへのコード実装（開発者向け）を参照してください。
8. ［任意］Webキーをコピーします。（このキーは、コードスニペットにも含まれています。）
9. ［続行］をクリックします。

バナーグループには、1つ以上のバナーを含められます。ここでは、次の設定を行えます。

• Webサイトの訪問者の誘導先となるモバイルアプリを含む、バナーグループ用のOneLinkテンプレートを選択します。
• 特定のディープリンク用スキームを設定します。
• バナーグループ内のすべてのバナーに適用する、ターゲティングルール、配信スケジュール、表示動作、アトリビューションの詳細を設定します。
• どのページを訪問したときに、バナーグループ内のバナーを表示するかを設定します。

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

1. AppsFlyerのサイドメニューから、［Engage］ > ［Web-to-app］ > ［Smart Banners］を選択します。
2. 初めてバナーグループを設定する場合
   1. 左側の［バナーグループを追加］をクリックします。
   2. 手順5以降に進みます。
3. バナーグループを追加する場合
   1. ［Studio］タブに移動します。
   2. ［＋新規］をクリックします。
   3. 手順5以降に進みます。
4. バナーグループを複製する場合
   1. 削除アイコンの隣にある複製アイコンをクリックします。
5. 重複しないバナーグループ名を入力します。宣伝するアプリなど、グループ内に作成するバナーに共通するテーマが分かる名前にしてください。
6. バナーグループに使用するOneLinkテンプレートを選択します。
7. ［任意］Universal LinksやAndroid App Linksが機能しない場合の代替手段として、バナーグループにURIスキームを設定します。デフォルトではOneLinkテンプレートの値が使用されるため、通常は設定不要です。テンプレートと異なる値が必要な場合にのみ、バナーグループ側で設定してください。

8. このバナーグループ経由の新規インストールについて、優先的に使用する成果の紐づけ先と、それを使用できない場合の代替の紐づけ先を設定します。 
   
   クリックIDの引き継ぎに関する注意：受信URLにFBCLID、GCLID、WBRAID、GBRAID、ttclid、twclid、ScCidが含まれている場合、送信URLに自動で引き継がれます。 GoogleのクリックIDがあり、keywordパラメータも見つかった場合は、その値が送信URLのaf_keywordsに設定されます。

   以下の表を参考に、カスタムリンクに最適な設定を選択してください。

   選択肢	選択するケース	補足
   UTMパラメータを使用	非オーガニック訪問者の大半が、UTMパラメータを付与した流入元からモバイルWebサイトへ訪問する場合に選択します。	◦ メディアソース名（pid）＝UTM_Source ◦ キャンペーン（c）＝UTM_campaign ◦ UTM_sourceまたはUTM_campaignがない場合は、代わりに固定の名前が使用されます。
   受信アトリビューションリンクのパラメータを使用	非オーガニック訪問者の大半が、AppsFlyerのアトリビューションリンクを使用してクリックを計測するアドネットワークから、モバイルWebサイトへ訪問する場合に選択します。	◦ 受信したAppsFlyerのアトリビューションリンク内にある、利用可能なすべてのパラメータがSmart Bannerのリンクに追加されます。  ◦ 同じパラメータが受信したAppsFlyerのアトリビューションリンクとSmart Bannerの両方にある場合、最終的なカスタムリンクでは受信パラメータが優先されます。
   アトリビューションパラメータを追加	必要に応じて、Webサイトに関連するアトリビューションデータを追加できます。これにより、インストールごとに詳しく分析できます。	たとえばECサイトでは、商品カテゴリごとにaf_adsetの値だけが異なるカスタムリンクを作成します（例：「af_adset=fruit」）。
   デフォルトのアトリビューションパラメータを使用	◦ 選択するケース： ▪ モバイルWebサイトの訪問者の大半がオーガニックである場合。   ▪ 非オーガニック訪問者の流入元が、クリックの計測に対応するアドネットワークでも、UTMパラメータを付与した流入元でもない場合。 ◦ パラメータの値はカスタマイズできます。	重要：UTMパラメータまたは受信アトリビューションリンクのパラメータを選択することをおすすめします。メディアソース名、キャンペーン名、チャネル名を取得できない場合は、どちらを選んでも、Smart Bannerのデフォルトのアトリビューションパラメータが代替値としてカスタムリンクに使用されます。

9. ［推奨］Smart Banner経由のすべてのインストールを特定のチャネルに紐づけるには、デフォルトのアトリビューションパラメータで［チャネル名］を設定します。これにより、コホートレポート、Overview dashboard、リテンションレポートなどで、複数のメディアソースの情報を同じチャネルとして集計できます。
    

10. ［任意］バナーをクリックしたユーザーのリエンゲージメントをバナーグループで記録する場合は、［リターゲティング］を有効にします。詳細は、リターゲティングアトリビューションガイドを参照してください。

    重要

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

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

    既存ユーザーがOneLinkを使用したリターゲティング以外のバナーリンク（UA）をクリックした場合も、同様にアプリが起動し、ユーザー体験は変わりません。ただし、この場合のリエンゲージメントは通常のセッションとして記録されるため、オウンドメディアキャンペーンの成果を計測できません。

11. ［任意］［アクティブユーザーをリターゲティング対象から除外］を有効にし、非アクティブ期間を選択します。バナーグループのリンクにaf_inactivity_window=[number of days]が追加され、指定した期間にアクティブだったユーザーはすべてリターゲティングの対象から除外されます。
12. リエンゲージメント後、アプリ内イベントをリターゲティングのメディアソースに紐づける期間を、リエンゲージメント期間として設定します。
    • 日単位（1～90日）、時間単位（最大23時間）、または無期限で設定できます。
    • リエンゲージメント期間は、リンクのaf_reengagement_windowパラメータに追加されます。
13. ［任意］［バナーを閉じた後の再表示設定］を設定します。これは、ユーザーがグループ内のバナーを閉じてから、同じバナーを再表示できるようになるまでの最短時間です。次のいずれかを選択します。
    • 時間を指定：1時間、1日、1週間。
    • 次のセッション：ユーザーがバナーを閉じた後、別のタブやウィンドウで開始するセッションを指します。
    • 再表示しない：そのバナーを再び表示しません。 注意：
      • ユーザーがブラウザーのキャッシュを削除した場合や、プライベートブラウジングモードでサイトを閲覧した場合、再表示設定の情報は失われます。
      • 再表示設定はユーザーが閉じたバナーに適用されます。同じグループ内の他のバナーは、引き続き表示できます。

14. ［任意］［フリークエンシーキャップ］（表示回数の上限）を設定します。  フリークエンシーキャップは、バナーグループ内の各バナーを、1人のユーザーに何回まで表示するかを定める設定です。常にバナーを表示する［上限なし］、または［バナーの表示回数を制限］を選択できます。

    たとえば、バナーグループに3つのバナーがあり、上限を1回に設定した場合、各バナーがユーザーごとに1回ずつ表示されます。この場合、ユーザーは3回の訪問でグループ内の3つのバナーをすべて見ることになります。 4回目以降の訪問では、そのグループのバナーは表示されません。上限を2回に設定した場合は、各バナーがユーザーごとに2回ずつ表示されるため、グループ全体の上限に達するまでに計6回の訪問が必要です。

15. ［任意］バナーを表示するOSを設定します。
    • すべてのモバイルOS。
    • Androidのみ、またはiOSのみ。
16. ［任意］バナーグループの配信スケジュールを設定します。すぐに開始する（デフォルト）か、配信期間を指定できます。
17. ［任意］バナーグループを表示する地域を設定します。
    1. すべてのユーザーに表示するには、［全世界］を選択します。必要に応じて、特定の地域、国、州からの訪問者を除外します。
    2. 1つ以上の特定の地域のユーザーに表示するには、［特定の地域を選択］を選択します。
18. ［任意］［表示対象のページ］で、バナーグループを表示するページを設定します。
    • ［デフォルト］Webサイトの［すべてのページに表示］。 注意：他の条件に当てはまらない場合にも表示できるよう、すべてのページを対象とするバナーグループを少なくとも1つ作成することをおすすめします。
    • ［特定のページに表示］：バナーを表示する条件として、ページやURLに含まれる文字列、または含まれない文字列を指定します。
      • 次のいずれかを選択できます。
        • ［特定のページ］：バナーを表示するページのホストやパスを指定します。クエリを入力しても無視されます。例：http://www.example.com/path?query
        • ［URLのパスとクエリ］：バナーの表示条件となるパスやクエリを入力します。例：path?query。 注意：http://www.example.com/path?queryのように、URL全体を入力しないでください。パスやクエリのみを入力します。

• AND／ORを使って、最大15個の条件を追加できます。
• 条件が矛盾する場合、バナーは表示されません。

1. ［バナーグループを作成］をクリックします。
2. ［任意］バナーグループを再編集するには、［ターゲティングと表示動作］にカーソルを合わせ、［編集］をクリックします。

ターゲティングと表示動作

［ターゲティングと表示動作］パネルでは、そのバナーグループに設定した内容を確認できます。編集するには、編集アイコンをクリックします。

バナーグループ内にバナーを作成するには：

1. ［新しいバナー］をクリックし、［バナーを編集］ページを開きます。
2. バナーの名前を設定します。
3. ［クリエイティブをデザイン］でクリエイティブを作成します。

   1. ［クリエイティブをデザイン］をクリックして、バナーのクリエイティブを設定します。

      バナーテンプレートを選択するウィンドウが開きます。

      

   2. クリエイティブテンプレートにカーソルを合わせて［作成］をクリックし、［クリエイティブを作成］の設定ページを開きます。
   3. Smart Bannerのクリエイティブの各要素をカスタマイズします。要素名から選択するか、プレビュー画像内の要素をクリックします。 注意：テンプレートによって、使用できる要素は異なります。
      • タイトル
      • 説明
      • 評価の星
      • 閉じるボタン
      • CTA
      • アプリのロゴ
      • 背景
      • バナーの表示位置
      • バナーの余白（サイズ調整用）
      • Device transparency

      • 画像はjpeg、jpg、pngのいずれかの形式を使用してください。 注意：webp形式には対応していません。  画像の推奨仕様は以下のとおりです。

        テンプレートの種類	画像ファイルの最大サイズ	画像の縦横比	画像の高さ	画像の幅
        Minimal	300 KB	3:1（幅×高さ）	70 px	デバイスに合わせて調整
        Standard	300 KB	3:1（幅×高さ）	70 px	デバイスに合わせて調整
        Enhanced	300 KB	9:4（幅×高さ）	110 px	デバイスに合わせて調整
        Multi-choice	300 KB	9:4（幅×高さ）	110 px	デバイスに合わせて調整
        Promotional	300 KB	4:5（幅×高さ）	300 px	デバイスに合わせて調整
        Multi-choice overlay	300 KB	9:4（幅×高さ）	110 px	デバイスに合わせて調整
        Interstitial	700 KB	9:16（幅×高さ）	デバイスに合わせて調整	デバイスに合わせて調整

   4. ［レビュー］をクリックしてクリエイティブを確認し、各種デバイスでの表示をテストします。注意：実際の配信時には、プレビュー画像と表示が多少異なる場合があります。
   5. 変更が必要な場合は、［エディターに戻る］をクリックします。
   6. ［完了］をクリックして、バナーの設定ページに戻ります。
4. ［任意］カスタムのアトリビューションパラメータを追加します。たとえば、af_adsetやaf_adを追加できます。注意：pid、c、channelはバナーグループ単位のパラメータのため、個別のバナーには追加できません。
5. 新しいクリエイティブの作成が完了し、保存すると、バナーのステータスが有効になります。［ステータス］のトグルで、［有効］と［一時停止］を切り替えます。
6. ［すべて保存］をクリックして変更を保存します。保存してバナーの設定ページを閉じる場合は、［すべて保存して閉じる］をクリックします。

クリエイティブが完成したら、ユーザー向けに公開・配信する前にテストします。

Smart Bannerのクリエイティブをテストするには：

前提条件：WebサイトにSmart Bannersのコードスニペットが実装されていることを確認します。

1. ［クリエイティブをテスト］ページに、Smart Banners SDKを実装したWebページのリンクを入力します（Smart Bannersの開発者向けドキュメントを参照）。
2. ［生成］をクリックします。
3. 生成されたリンクをコピーしてテストデバイスに送信するか、テストデバイスでQRコードを読み取ります。 リンクを開くかQRコードを読み取ると、Webページへ移動し、作成したクリエイティブのバナーが表示されます。
4. ［クリエイティブを編集］をクリックすると設定に戻り、［完了］をクリックするとクリエイティブが保存されます。

パフォーマンスページでは、すべてのSmart Bannersについて、最大過去90日分のパフォーマンスデータを確認・比較できます。

パフォーマンスページを表示するには：

1. AppsFlyerのサイドメニューから、［Engage］ > ［Web-to-app］ > ［Smart Banners］ > ［パフォーマンス］を選択します。
2. 成果を確認する期間を選択します。デフォルトの期間は過去7日間です。
3. ［任意］［現在有効なバナーのみ表示］を有効にします。有効にすると、選択した期間中に配信されていても、現在一時停止中または無効のバナーのデータは表示されません。選択した期間のパフォーマンスデータが表示されます。

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

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

1. AppsFlyerのサイドメニューから、［Engage］ > ［Web-to-app］ > ［Smart Banners］ > ［Studio］を選択します。
2. 成果を確認するWebサイトのワークスペースとバナーグループを選択します。
3. バナーグループ内のいずれかのバナーにカーソルを合わせます。過去1週間のパフォーマンスデータが表示されます。

AppsFlyerは、Smart Bannerを表示するかどうか、また、どのバナーを表示するかを判断する際に、次の点を確認します。

• バナーグループにルール（再表示設定、フリークエンシーキャップ、地域、表示対象のページなど）が設定されているか。
• ユーザーがルールの条件を満たし、バナーの表示対象になっているか。

両方に該当する場合、つまりルールが設定されており、ユーザーが表示対象になっている場合は、以下の表のとおりに表示するバナーを選択します。

パフォーマンスダッシュボードで成果を比較し、バナーのA/Bテストを行えます。アトリビューションに関するデータをさらに取得するには、クリエイティブまたはバナーグループごとに固有の値を設定したaf_adset、af_adなどのパラメータを追加することをおすすめします。ただし、pid、c、channelは除きます。これらのパラメータを使い、AppsFlyerのダッシュボードやレポートでバナーグループごとの成果を比較できます。

バナーグループに設定したフリークエンシーキャップが原因です。フリークエンシーキャップは、1人のユーザーにバナーを何回まで表示するかを定める設定です。 たとえば上限を3回に設定し、ユーザーがサイトを4回訪問した場合、最初の3回はバナーが表示されますが、4回目以降は表示されません。フリークエンシーキャップは無効にできます。表示回数の上限を選択するか、フリークエンシーキャップを無効にしてください。

はい。開発者ハブの手順に従い、Webサイトで使用している独自のフォントをバナーにも設定できます。

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

はい。Smart Script内で次の2つの関数を呼び出すことで追加できます。

• showBanner
• updateParams

はい。以下のいずれかの方法でdeep_link_valueパラメータを追加します。

• AppsFlyerの管理画面で、バナーの設定時に固定値のカスタムアトリビューションパラメータを追加します。
• showBanner関数のadditionalParamsを使い、バナーの表示前にURLにパラメータを追加します。
• updateParams関数を使い、バナーの表示後にURLにパラメータを追加します。

deep_link_valueに応じて意図した動作になるよう、開発者が実装していることを確認してください。

いいえ。インストール済みかどうかを把握できない場合は、どちらのユーザーにも適したCTAにすることをおすすめします。例：「アプリへ移動」「アプリを開く」。

はい。元の受信URLにutm_sourceまたはpidパラメータが含まれていれば、ブラウジングセッション中は元のURLが保持され、バナーの送信URLにそのパラメータが適用されます。

はい。ラッパーアプリやハイブリッドアプリにSmart Bannersを実装し、Webブラウザーではなくアプリからバナーのページを読み込む場合は、アプリ内にバナーを表示するshowBanner関数を使用しないでください。または、hideBanner関数を使用してください。

AppsFlyerは、障害のある方を含むすべてのユーザーが、Smart Bannersに十分にアクセスし、利用できるよう取り組んでいます。

そのため、Smart Bannerの要素に必要なHTML属性を設定するなど、WCAG 2.1のベストプラクティスに従い、Webアクセシビリティへの対応を進めています。

ただし、Smart Bannersの使用目的に応じて適用されるアクセシビリティ要件を判断する責任は、お客様にあります。使用するSmart Bannersが、該当するWebアクセシビリティ要件に従って、引き続きすべてのユーザーに利用可能な状態にあることを保証する責任は、お客様にあります。

バナー内の要素の色やサイズの編集など、Smart Bannerへの各種変更によって、該当するアクセシビリティ要件への適合性が変わる可能性がある点にご注意ください。

いいえ。 Smart Bannerを削除しても、アトリビューションデータは削除されません。