概要: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のコードを実装するには:
- Webサイトのワークスペースの設定手順に従い、Smart Bannersのコードを取得します。
- 以下のプラットフォーム別の手順に従って、Webサイトにコードを実装します。
Googleタグマネージャー
Googleタグマネージャーでコードを実装するには:
- GTMで新しいタグを作成します。
- タグに名前を付け、[タグの設定]をクリックし、[カスタムHTML]を選択します。
- HTMLの入力欄に、Smart Bannersのコードスニペットを貼り付けます。スニペット内のYOUR-BANNER-KEYを、実際のバナーキーに置き換えます。
- [トリガー]をクリックし、画面右上の+アイコンをクリックして新しいトリガーを作成します。
- トリガーに名前を付け、[トリガーの設定]で[ページビュー]を選択します。
- すべてのページでバナーを表示する場合は、[すべてのページビュー]を選択します。特定のページでのみバナーを表示する場合は、[一部のページビュー]を選択し、タグを発火させる条件を設定します。トリガーの詳細は、GTMのドキュメントを参照してください。
- 右上の[保存]をクリックします。
- タグの設定画面に戻ります。設定内容を確認し、右上の[保存]をクリックします。
- GTMのコンテナを公開します。
Adobe Launch Tag Manager
Adobe Launch Tag Managerでコードを実装するには:
手順1:Adobe Experience Cloudでプロパティを作成する
Smart Bannersのコードを配置するプロパティ(タグ)を作成するには:
- [Adobe Experience Cloud] > [Launch]に移動します。
- [Adobe Experience Cloud Launch]で、[Go to Launch]をクリックします。
- [New Property]をクリックします。
- プロパティに名前を付けます。
- [Platform]で[Web]を選択します。
- Webサイトのドメインを入力します。
- [Save]をクリックします。
手順2:Adobe LaunchのプロパティにSmart Bannersのコードを追加する
タグにSmart Bannersのコードを追加するには:
- [My web property]ページで[Rules]タブを選択します。
- ルールに名前を付けます。推奨名:AppsFlyer Smart Banners。
-
[If]セクションの[Events]で、[+Add]をクリックします。
- [Event Type]で[Core - DOM Ready]を選択します。
- [Keep Changes]をクリックします。
-
[Then]セクションの[Actions]で、[+Add]をクリックします。
- [Action Type] > [Custom Code]を選択します。
- [JavaScript] > [Open Editor]を選択し、<script>タグを除いたSmart Banners SDKのスニペットを貼り付けます。
- [Keep Changes]をクリックして、コードエディターを閉じます。
- [Save]をクリックします。
手順3:WebサイトにAdobe Launchのタグを追加する
Smart Bannersのコードを読み込むAdobe Launchのタグを、Webサイトに追加するには:
- [My web property]ページで[Environments]タブを選択します。
- 公開する環境(開発環境または本番環境)の行を探します。
- 対象の行の[Install]列にあるボックスのアイコンをクリックします。通常は、本番環境の行を選択します。
- Adobe Launchの環境の公開について説明するセクションを参照してください。
-
[Web Install Instructions]ダイアログで、次の操作を行います。
- スクリプトのコードスニペットをコピーします。
- ダイアログを閉じます。
- Webサイトの<head>タグ内にコードスニペットを貼り付けます。
手順4:Adobe Launchの環境を公開する
環境を公開してAdobe Launchのタグを有効にするには:
- [My web property]ページで[Publishing]タブに移動します。
-
[Development]セクションで[Add New Library]をクリックします。
- ライブラリに名前を付け、環境を選択します。
- [Resource Changes]で[Add a Resource]をクリックします。
- [Rules] > [Load Smart Banners] > [Latest] > [Select & Create a New Revision]をクリックします。
- [Save]をクリックします。
-
[Development]セクションで、次の操作を行います。
- 新しく作成したライブラリの横にある操作メニュー(3点アイコン)をクリックし、[Build for Development]を選択します。
- もう一度操作メニューをクリックし、[Submit for Approval]を選択します。
-
[Submitted]セクションで、次の操作を行います。
- 操作メニューをクリックし、[Build for Staging]を選択します。
- もう一度操作メニューをクリックし、[Approve for Publishing]を選択します。
-
[Approved]セクションで操作メニューをクリックし、[Build & Publish to Production]
を選択します。これで手順は完了です。
モバイルでWebサイトを読み込むと、有効なバナークリエイティブが表示されます。特定のページやユーザー操作に応じてのみバナーを表示するには、Adobe Launchのルールを参照してください。
Shopify
ShopifyのWebサイトにコードを実装するには:
- Shopifyの管理画面で、[販売チャネル] > [オンラインストア] > [テーマ]に移動します。
現在のテーマが表示されます。 -
[アクション] > [コードを編集]をクリックします。
テーマのコード編集ページが開きます。 - Layoutフォルダーで、{/} themeで始まるファイルをクリックします。
Webページのコードが表示されます。 - コード内の<head>の直下に、Smart Bannersのコードを貼り付けます。
Wix
WixのWebサイトにコードを実装するには:
- Wixの管理画面で[設定]をクリックします。
- 設定ページの詳細設定セクションで[カスタムコード]をクリックします。
- [+カスタムコードを追加]をクリックします。
- [コードスニペットをここに貼り付け]欄に、Smart Bannersのコードを貼り付けます。
- 名前の入力欄に、コードの名前を入力します。 推奨名:AppsFlyer Smart Banners。
-
[コードを追加するページ]で、バナーを表示するページを選択します。次のいずれかを選択します。
- すべてのページ
- 特定のページを選択
-
[適用]をクリックします。
カスタムコードのページに、追加したコードが表示されます。 Headセクションに配置されていることを確認します。
Squarespace
SquarespaceのWebサイトにコードを実装するには:
- Squarespaceの管理画面で[Website]をクリックします。
- [Settings]をクリックします。
- [Advanced]をクリックします。
- [Code Injection]をクリックします。
- [Header]セクションに、Smart Bannersのコードを貼り付けます。
- [Save]をクリックします。
WordPress
WordPressのWebサイトにコードを実装するには:
- WordPressの管理画面で、[外観] >[テーマエディター]をクリックします。
テーマの編集ページが開き、WebサイトのCSSコードが表示されます。 - [テーマファイル]で[テーマヘッダー(header.php)]をクリックします。
- 表示されたコードの<head>の下に、Smart Bannersのコードを貼り付けます。
- [ファイルを更新]をクリックします。
関連情報