マーケター向けスマートバナーのWebサイトへの実装

推奨
マーケター マーケター デベロッパー
最終更新日：

概要：スマートバナーのコードをWebサイトに追加して、Webサイト訪問者をモバイルアプリユーザーに変換しましょう。

 注意

AppsFlyerスマートバナーウェブSDK V1は、2023年11月8日に廃止されました。ウェブサイトにスマートバナーを表示するにはV2にアップグレードする必要があります。詳細はこちら

Webサイトコードの実装

この記事は、次のいずれかの方法で、スマートバナーのコードをWebサイトに実装したいマーケティング担当者を対象としています。

  • Google Tag Manager (GTM)
  • Adobe Launch Tag Manager
  • Shopify
  • Wix
  • Squarespace
  • WordPress

他のプラットフォーム経由でWebサイトにコードを追加したり、必要に応じてコードを変更する（パラメーターの追加、ディープリンク、バナーの非表示、スマートバナーとPBAの統合など）には、ディベロッパー向けスマートバナーのWebサイトへのコード実装を参照してください。

スマートバナーのコードをサイトに実装する方法：

  1. こちらの手順に従ってスマートバナーのコードを取得してください。
  2. 以下の各プラットフォーム向けの手順を使用して、コードをWebサイトに実装してください。

Google Tag Manager

Google Tag Managerでコードを実装する方法：

  1. GTMで、新しいタグを作成します。
  2. タグに名前を付け、Tag Configuration をクリックして、Custom HTML を選択します。
  3. HTMLボックスに、スマートバナーのコードを貼り付けてください。コード内のYOUR-BANNER-KEYを実際のバナーキーに置き換えてください。
  4. トリガー をクリックし、画面の右上隅にあるプラスアイコンをクリックして新しいトリガーを作成します。
  5. Trigger Configuration にてトリガーに名前を付け、Page View を選択します。
  6. バナーをすべてのページに表示する場合は、All Page Views を選択します。選択したページにバナーを表示する場合は、Some Page Views を選択し、タグをトリガーする条件を定義します。トリガーの詳細については、GTMのドキュメントをご覧ください。
  7. 右上隅にある [保存] をクリックします。
  8. タグの設定画面に戻ります。すべてが設定されていることを確認し、右上隅の 保存 をクリックします。
  9. GTMコンテナーを公開します。

Adobe Launch Tag Manager

Adobe Launch Tag Manager でコードを実装する方法：

ステップ1：Adobe Experience Cloudでプロパティを作成する

スマートバナーコードをホストするプロパティ（タグ）を作成する方法：

  1. Adobe Experience Cloud >Launch を開きます。
  2. [Adobe Experience Cloud Launch] の下にある [Go to Launch] をクリックします。
  3. [New Property]（新しいプロパティ）をクリックします。
  4. プロパティに名前を付けます。
  5. Platform の下にある、 Web を選択します。
  6. ウェブサイトのドメインを入力してください。
  7. 保存 をクリックしてください。

ステップ2：スマートバナーのコードをAdobe Launch プロパティに追加する

スマートバナーコードをタグに追加する方法：

  1. My web property ページにて、Rules タブを選択します。
  2. ルールに名前を付けます。推奨: AppsFlyer Smart Banners
  3. If セクションで、Eventsの下にある +Add をクリックしてください。
    • [Event Type] にある [Core - DOM Ready] を選択します
    • [Keep Changes]（変更を保存）をクリックします。
  4. Then セクションで、Actions の下にある +Add をクリックしてください。
    • [Action Type] > [Custome Code] をクリックします。
    • JavaScript > Open Editor を選択し、<script> タグなしでスマートバナーSDKコードを貼り付けます。
    • [Keep Changes]（変更を保存）をクリックして、コードエディターを閉じます。
  5. 保存 をクリックしてください。

ステップ3：Adobe LaunchタグをWebサイトに追加する

Webサイトに Adobe Launch タグを追加する方法（スマートバナーコードを読み込みます）：

  1. [My web property] ページで、[Environments] タブを選択します。
  2. 公開する環境（開発または本番）を含む行を見つけます。
    • Installヘッダーに含まれる、関連する行のボックスアイコンをクリックします。これは通常、実稼働環境です。
    • Adobe Launch 環境の公開に関するセクションを参照してください。
  3. Web Install Instructions のダイアログボックスにて、次の手順を行います。
    • スクリプトコードsnippetをコピーします。
    • ダイアログボックスを閉じます。
  4. コードスニペットをWebサイトの <head> タグの中に貼り付けます。

ステップ4：Adobe Launch環境を公開する

環境を公開してAdobe Launchタグをアクティベートする方法：

  1. [My web property] ページで、[Publishing] タブに移動します。
  2. [Development]セクションの、[Add New Library] をクリックします。
    1. ライブラリに名前を付けて、環境を選択します。
    2. Resource Changes の下にある Add a Resource をクリックしてください。
    3. Rules > Load Smart Banners > Latest > Select & Create a New Revision をクリックします。
    4. 保存 をクリックしてください。
  3. [Development] セクションにて、次を実行します。
    1. 新しく作成されたライブラリの横にある [アクション]メニュー（3つのドット）をクリックし、Build for Developers を選択します。
    2. アクションメニューをもう一度クリックし、Submit for Approval を選択します。
  4. [Submitted] セクションにて、次を実行します。
    1. アクションメニュ―をクリックし、Build for Staging を選択します。
    2. アクションメニューをもう一度クリックし、Approve for Publishing を選択します。
  5. Approved セクションにて、アクションメニューをクリックし、Build & Publish to Production を選択します。
    これでプロセスは完了です。

これで、ウェブサイトがモバイルで読み込まれると、バナーのアクティブなクリエイティブが表示されます。特定のページにのみ、またはユーザーのアクションに従ってバナーを表示するには、 Adobe Launch rulesを参照してください。

Shopify

：Shopifyサイトにコードを実装する方法

  1. Shopify管理画面にて、Sales Channels > Online Store > Themesへ移動してください。
    現在のテーマが表示されます。
  2. Actions > Edit codeをクリックしてください。
    テーマのコード編集ページが開きます。
  3. Layoutフォルダで、{/} theme で始まるファイルをクリックしてください。
    Webページのコードが表示されます。
  4. コード内の <head> のすぐ下に、スマートバナーのコードを貼り付けてください。

Wix

Wixサイトにコードを実装する方法：

  1. Wix管理画面にて、設定をクリックしてください。
  2. 設定ページの詳細設定セクションで、カスタムモードをクリックしてください。
  3. + カスタムモードを追加をクリックしてください。
  4. コードスニペットをここに貼り付けるというボックスに、スマートバナーのコードを貼り付けてください。
  5. [名前] ボックスに、コードの名前を入力します。 推奨：AppsFlyer Smart Banners。
  6. [ページにコードを追加] にて、バナーを表示する場所を選択します。以下のいずれかを選択してください。
    • 全てのページ
    • 特定のページを選択する
  7. 適用をクリックします。
    カスタムモードページにコードが表示されるようになりました。Headセクションに配置されていることを確認してください。

Squarespace

Squarespaceサイトにコードを実装する方法：

  1. Squarespace管理画面にて、Websiteをクリックしてください。
  2. Settingsをクリックしてください。
  3. Advancedをクリックしてください。
  4. Code Injectionをクリックしてください。
  5. Header セクションにスマートバナーのコードを貼り付けてください。
  6. 保存 をクリックしてください。

WordPress

Wordpressサイトにコードを実装する方法：

  1. WordPressダッシュボードで、テーマ編集 > 外観 (Apparance) をクリックします。
    [テーマ編集] ページが開き、WebサイトのCSSコードが表示されます。
  2. テーマファイル で、テーマヘッダー (header.php) をクリックします。
  3. 表示されるコードの <head> タグの中に、スマートバナーコードを貼り付けます。
  4. ファイルを更新 をクリックします。

参照：