どのようにお手伝いできますか?

Smart Banners|Webサイトへのコード実装(マーケター向け)

  • 更新

概要:WebサイトにSmart Bannersのコードを追加し、訪問者をモバイルアプリのユーザーへ誘導します。

注意

AppsFlyerのSmart Banners Web SDK v1は、2023年11月8日をもって非推奨となりました。 WebサイトにSmart Bannersを表示するには、v2へのアップグレードが必要です。詳細はこちら

Webサイトへのコード実装

この記事では、以下のいずれかを使用して自社サイトにSmart Bannersのコードを実装したいマーケター向けに、手順を説明します。

  • Googleタグマネージャー(GTM)
  • Adobe Launch Tag Manager
  • Shopify
  • Wix
  • Squarespace
  • WordPress

他のプラットフォームでの実装や、要件に合わせたコードの変更(パラメータの追加、ディープリンク、バナーの非表示、PBAとSmart Bannersの連携など)については、Smart Banners|Webサイトへのコード実装(開発者向け)を参照してください。

自社サイトにSmart Bannersのコードを実装するには:

  1. Webサイトのワークスペースの設定手順に従い、Smart Bannersのコードを取得します。
  2. 以下のプラットフォーム別の手順に従って、Webサイトにコードを実装します。

Googleタグマネージャー

Googleタグマネージャーでコードを実装するには:

  1. GTMで新しいタグを作成します。
  2. タグに名前を付け、[タグの設定]をクリックし、[カスタムHTML]を選択します。
  3. HTMLの入力欄に、Smart Bannersのコードスニペットを貼り付けます。スニペット内のYOUR-BANNER-KEYを、実際のバナーキーに置き換えます。
  4. [トリガー]をクリックし、画面右上の+アイコンをクリックして新しいトリガーを作成します。
  5. トリガーに名前を付け、[トリガーの設定]で[ページビュー]を選択します。
  6. すべてのページでバナーを表示する場合は、[すべてのページビュー]を選択します。特定のページでのみバナーを表示する場合は、[一部のページビュー]を選択し、タグを発火させる条件を設定します。トリガーの詳細は、GTMのドキュメントを参照してください。
  7. 右上の[保存]をクリックします。
  8. タグの設定画面に戻ります。設定内容を確認し、右上の[保存]をクリックします。
  9. GTMのコンテナを公開します。 

Adobe Launch Tag Manager

Adobe Launch Tag Managerでコードを実装するには:

手順1:Adobe Experience Cloudでプロパティを作成する

Smart Bannersのコードを配置するプロパティ(タグ)を作成するには:

  1. [Adobe Experience Cloud] > [Launch]に移動します。
  2. [Adobe Experience Cloud Launch]で、[Go to Launch]をクリックします。
  3. [New Property]をクリックします。
  4. プロパティに名前を付けます。
  5. [Platform]で[Web]を選択します。
  6. Webサイトのドメインを入力します。
  7. [Save]をクリックします。

手順2:Adobe LaunchのプロパティにSmart Bannersのコードを追加する

タグにSmart Bannersのコードを追加するには:

  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] > [Custom Code]を選択します。
    • [JavaScript] > [Open Editor]を選択し、<script>タグを除いたSmart Banners SDKのスニペットを貼り付けます。
    • [Keep Changes]をクリックして、コードエディターを閉じます。
  5. [Save]をクリックします。

手順3:WebサイトにAdobe Launchのタグを追加する

Smart Bannersのコードを読み込むAdobe Launchのタグを、Webサイトに追加するには:

  1. [My web property]ページで[Environments]タブを選択します。
  2. 公開する環境(開発環境または本番環境)の行を探します。
    • 対象の行の[Install]列にあるボックスのアイコンをクリックします。通常は、本番環境の行を選択します。
    • Adobe Launchの環境の公開について説明するセクションを参照してください。
  3. [Web Install Instructions]ダイアログで、次の操作を行います。  
    • スクリプトのコードスニペットをコピーします。
    • ダイアログを閉じます。
  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. [Save]をクリックします。
  3. [Development]セクションで、次の操作を行います。
    1. 新しく作成したライブラリの横にある操作メニュー(3点アイコン)をクリックし、[Build for Development]を選択します。
    2. もう一度操作メニューをクリックし、[Submit for Approval]を選択します。
  4. [Submitted]セクションで、次の操作を行います。
    1. 操作メニューをクリックし、[Build for Staging]を選択します。
    2. もう一度操作メニューをクリックし、[Approve for Publishing]を選択します。
  5. [Approved]セクションで操作メニューをクリックし、[Build & Publish to Production]
    を選択します。
    これで手順は完了です。

モバイルでWebサイトを読み込むと、有効なバナークリエイティブが表示されます。特定のページやユーザー操作に応じてのみバナーを表示するには、Adobe Launchのルールを参照してください。

Shopify

ShopifyのWebサイトにコードを実装するには:

  1. Shopifyの管理画面で、[販売チャネル] > [オンラインストア] > [テーマ]に移動します。
    現在のテーマが表示されます。
  2. [アクション] > [コードを編集]をクリックします。
    テーマのコード編集ページが開きます。
  3. Layoutフォルダーで、{/} themeで始まるファイルをクリックします。
    Webページのコードが表示されます。
  4. コード内の<head>の直下に、Smart Bannersのコードを貼り付けます。 

Wix

WixのWebサイトにコードを実装するには:

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

Squarespace

SquarespaceのWebサイトにコードを実装するには:

  1. Squarespaceの管理画面で[Website]をクリックします。
  2. [Settings]をクリックします。
  3. [Advanced]をクリックします。
  4. [Code Injection]をクリックします。
  5. [Header]セクションに、Smart Bannersのコードを貼り付けます。
  6. [Save]をクリックします。

WordPress

WordPressのWebサイトにコードを実装するには:

  1. WordPressの管理画面で、[外観] >[テーマエディター]をクリックします。
    テーマの編集ページが開き、WebサイトのCSSコードが表示されます。
  2. [テーマファイル]で[テーマヘッダー(header.php)]をクリックします。
  3. 表示されたコードの<head>の下に、Smart Bannersのコードを貼り付けます。
  4. [ファイルを更新]をクリックします。