概要:世界のWebサイトトラフィックの大部分はモバイル端末から発生しています。モバイルWebサイト上でスマートバナーを使用して、訪問者をアプリへ誘導しましょう。
スマートバナー
WebサイトにAppsFlyer スマートバナーSDKを設置することで、スマートバナーを利用できます。Webサイト側での初期セットアップの他には、コーディングは不要です。スマートバナーを使用すると、モバイルウェブサイトに訪問しユーザー経由のアプリインストールの質を測定できます。スマートバナーは、クリックスルーアトリビューションを利用してアトリビューション測定し、さらにインプレッションもカウントすることができます。
- クリック:ユーザーがスマートバナーをクリックしてインストールに進みます。
- インプレッション:バナーが読み込まれると(ユーザーにバナーが表示されると)インプレッションイベントがAppsFlyerに送信されます。
注意
スマートバナーが適切なソリューションか確信が持てませんか?
スマートバナーとAppsFlyerの他のWebからアプリへユーザーを誘導するソリューションを比較してみましょう。
作業範囲
作業担当者 マーケティング担当者と開発者。
|
前提条件
|
所要時間 約 20 分。 |
結果
|
例マークは、「Feed Me」という成功した食料品配達サービスのマーケティング担当者です。 そのために、マークは自分の広告デザインやテキストを使ったスマートバナーを使用します。 スマートバナーはOneLinkによって作成されます。モバイルWebサイト訪問者がCTAボタンをクリックすると、自動的に適切なアプリストアまたはランディングページに誘導され、簡単にアプリのインストールをすることができます。既存のモバイルユーザーがCTAボタンをクリックすると、アプリが起動します。 AppsFlyerはクリックやインストールの成果をマークが設定したメディアソースとキャンペーンに紐づけます。 |
重要:
AppsFlyerのスマートバナー、または iOS Safariのスマートアプリバナーのうち、いずれかのみを使用してください。両方を同時に使用すると、モバイルWebサイト上で表示エラーが発生し、アトリビューションの乖離が起こる可能性があります。
手順
次の手順に従って、以下の動作をするスマートバナーを設定します:
- スマートバナー経由で、ユーザーのデバイスに基づいて、モバイルサイトから適切なアプリストアまたはアプリページに誘導します。
- クリック/インストールをOneLinkを使用したオウンドメディアの成果に紐づけます。
1. Webサイトの設定
スマートバナーを表示できるようにモバイルサイトを準備します。
- AppsFlyer 管理画面から、エンゲージメント&ディープリンク > スマートバナーへ移動します。
- [Website workplaceを作成 ] をクリックします。
- Website workplaceの名前を入力します。
-
[作成] をクリックします。
Website workplaceが開きます。 - バナーのコードスニペットをコピーします。
-
このコードスニペットをフロントエンド開発者へ渡し、Webサイトへ実装するよう依頼します。
このシンプルなタスクは、Webサイトにつき一度のみフロントエンド開発者によって実施されるだけで、この後のステップでは彼らに作業をしてもらう必要はありません。 - [オプション] Web keyをコピーします(このキーは既にコードスニペットの一部としてコード内に存在します)。
- [次へ] をクリックします。
2. バナーグループの設定
バナーグループには、1 つ以上のバナーが含まれています。ここでは次の設定が可能です。
- バナーグループで使用するOneLinkテンプレートを選択します。これにはWebサイト訪問者を誘導するモバイルアプリが含まれます。
- 特定のディープリンクスキームを設定します。
- バナーグループ内の全てのバナーに適用されるターゲットのルール、スケジュール、動作、アトリビューションの詳細を定義します。
- 訪問時にバナーグループのバナーをアクティブにするページを設定します。
新しいバナーグループを設定するには:
- AppsFlyer 管理画面から、エンゲージメント&ディープリンク > スマートバナーへ移動します。
- 左側のメニューで、[バナーグループの追加]をクリックします。
- 一意のバナーグループ名を入力します。
名前は、バナーグループ内で定義されるバナー間の一般的な共通テーマ(広告アプリなど)を反映した名前を付けてください。 - バナーグループのOneLinkテンプレートを選択します。
- [オプション] ユニバーサルリンクとAndroidアプリリンクユーザーのフォールバックとして、バナーグループ用のURIスキームを設定します。これはほとんどの場合使用されません。デフォルトで、値はOneLinkテンプレートから取得されます。テンプレートの値と異なる値が必要な場合にのみ、バナーグループにこの値を設定してください。
- アトリビューションソースを設定し、このバナーグループから発生した新規インストールの属性を設定します。以下の表を使用して、カスタムリンクへ最適なオプションを選択してください。
オプション いつ選択すべきか 備考 Use default attribution parameters (デフォルトのアトリビューションパラメータを使用) - ほとんどのモバイルWebサイトの訪問者がオーガニックの場合に選択します。
- 非オーガニック訪問者がクリック広告ネットワークやUTMパラメータを持つメディアソースからWebサイトにアクセスしない場合に選択します。
重要:これらの値は、カスタムリンク上でメディアソース、キャンペーン、またはチャネル名が利用できない場合の代替として使用されます。
Use UTM parameters (UTMパラメーターを使用) ほとんどの非オーガニック訪問者がUTMパラメータを持つソースからモバイルWebサイトにアクセスする場合に選択します。 - メディアソース名 (pid) = UTM_Source
- キャンペーン (c) = UTM_campaign
- UTM_Source または UTM_Campaign がない場合は、フォールバックとして静的名が使用されます。
Use incoming attribution link parameters (アトリビューションリンクのパラメーターを使用) ほとんどの非オーガニック訪問者が、AppsFlyerの計測リンクを使用するクリック広告ネットワークからモバイルWebサイトにアクセスする場合に選択します。 - AppsFlyerアトリビューションリンクからの全ての利用可能なパラメータは、スマートバナーリンクに追加されます。
- AppsFlyerアトリビューションリンクとスマートバナーの両方にパラメータが存在する場合、パラメータは最終カスタムリンクで優先されます。
Add another attribution parameter (別のアトリビューションパラメーターを追加) 追加でWebサイトに関連するアトリビューションデータを追加したい場合。これによりインストールごとに詳細な分析が可能になります。 例えば、eコマースサイトで全ての商品タイプに、af_adset の値のみが異なる同一のカスタムリンクを作成します(例:"af_adset=fruit")。 - [推奨] デフォルトの計測パラメータチャンネル名を設定して、スマートバナーから来るすべてのインストールを指定されたチャンネルに紐づけます。これにより、コホートレポート、オーバービュー管理画面、リテンションレポートなどで、同じチャネルの下に複数のメディアソースからの情報を集約できます。
- [オプション] 非表示動作を設定します。つまり、ユーザーがバナーを閉じてから、再度バナーが表示されるまでの最小時間を設定します。次のいずれかから選択します。
- 時間ごと:1時間、1日、または1週間。
- 次のセッション:ユーザーがバナーを閉じた後、別のタブまたはウィンドウで行われるセッションを意味します。
- 二度と表示しない:バナーは再表示されません。
注:ユーザーがブラウザのキャッシュをクリアするか、プライベートモードでブラウザを使用している場合は、非表示動作設定は機能しません。
- [オプション] フリークエンシーキャップを設定します。
フリークエンシーキャップは、一意のユーザーにバナーが表示される最大回数を示します。たとえば、最大表示回数が3に設定されている場合、ユーザーがサイトに4回アクセスすると、最初の3回はバナーが表示されますが、4回目のアクセスでは表示されません。最大表示回数は無効にすることも可能です。最大表示回数の値を選択、またはを最大表示回数を無効にします。 - [オプション] バナーグループを有効化するスケジュール:すぐに開始(デフォルト)または期間限定のキャンペーンを設定します。
- [オプション] ロケーションを設定して、バナーグループが有効になる地域を指定します。
- このバナーグループをすべてのユーザーに表示するには、ワールドワイドを選択します。必要に応じて、異なる地域、国、州からの訪問者を除外します。
- 特定のロケーションを選択をクリックすると、このバナーグループを一つまたは複数のロケーションで表示できます。
- [オプション] Webサイト内でバナーグループが訪問者に表示される表示するページを設定します:
- [デフォルト] ウェブサイトの全てのページに表示します。
注 : フォールバックとして、すべてのページに少なくとも1つのバナーグループを定義することをお勧めします。 -
特定のページに表示 : バナーを表示するために、ページまたはURLに含めるべき、または含めないものの条件を指定します。
- 使用できる特殊文字:&, ?, =, /, :, -, %.
- and/or を使用して、最大 5 つの条件を追加できます。
- 条件間で競合がある場合、バナーは表示されません。
- [デフォルト] ウェブサイトの全てのページに表示します。
- バナーグループを作成をクリックします。
- [オプション] 再度バナーグループを編集するには、[ターゲティング&動作] にカーソルを合わせ、[編集] をクリックします。
例
マークは、カリフォルニア州で Feed Me の新しいビーガンハンバーガーのキャンペーンを作成することにしました。
- 彼は新しいバナーグループを作成し「Feed me burgers」と名付けました。
- ロケーションをカリフォルニア州に設定し、カリフォルニアの訪問者のみにこのバナーグループを表示します。
- バナーを次のページのみに https://feedme.com/promo/veganburger かつ、URLに utm_campaign=google が含まれている場合に表示するように指定します。
3. バナーの設定
新しいバナーグループの最初のバナーを作成する方法:
- バナーの作成 をクリックして、バナーの追加ページを開きます。
- バナーの名前を設定します。
- [クリエイティブをデザインする]をクリックして、バナーのクリエイティブを設定します(下記参照)。
- 新しいクリエイティブが完了し保存した後、バナーのステイタスはアクティブになります。トグルを使用してアクティブと一時停止中のステイタスを切り替えてください。
- [オプション] 必要に応じて、バナー固有のアトリビューションパラメータを追加します。例:広告名。
-
アトリビューションリンクを新規ユーザー獲得タイプのURLからリターゲティングURLへ変更するには、カスタムの
is_retargeting=true
パラメーターを追加します。 - [保存して閉じる] をクリックします。
バナークリエイティブの設定
スマートバナーのクリエイティブを作成する方法:
- バナー設定ページにて、[クリエイティブをデザインする] をクリックしてクリエイティブ設定ページを開きます。
- [クリエイティブテンプレート] をクリックし、希望のテンプレートにカーソルを合わせ、[作成する] をクリックしクリエイティブの構築ページを開きます。
- クリエイティブの構築設定ページでは、他のクリエイティブテンプレートを試すことができます。
- すべてのテキストと画像を独自のものに変更します。
- 全ての画像は次のフォーマットのいずれかにしてください:.png、.jpeg、.jpg
また URLには、ファイル拡張子が含まれている必要があります。
有効なURL: https://example.com/my_image.png
無効なURL: https://example.com/my_image
使用する画像の全てのツールチップを確認し、推奨事項を確認してください。 - [クリエイティブを構築する] をクリックします。
4. テスト
クリエイティブの準備ができたら、本番環境でアクティブにする前に テストを実施してください。
スマートバナーのクリエイティブをテストする方法:
前提条件:スマートバナーのコードスニペットがWebサイトに実装されていることを確認してください。
- クリエイティブのテスト ページにて、スマートバナーSDKが実装されているWebページへのリンクを入力します (次のタブを参照) 。
- [生成する] をクリックします。
- 生成されたリンクをコピーし、テスト端末に送信するか、QRコードをテスト端末でスキャンします。 リンクまたはQRコードはWebページに遷移し、クリエイティブのバナーが表示されます。
- [クリエイティブの編集] をクリックして、クリエイティブ設定に戻るか、[完了] をクリックして保存します。
AppsFlyerは、広告主がWebサイトに実装するスマートバナーSDKを提供します。SDKの目的は、スマートバナーを動的に表示するために必要な全てのデータを取得することです。スマートバナーSDKは適切なアトリビューションリンクも自動的に作成するため、手動で作成する必要はありません。
したがって、モバイルバナーを表示するすべてのページからスマートバナーSDKにアクセスできる必要があります 。
スマートバナーSDKは、Website workplaceから取得できる一意のWeb keyを使用して認証します。
コード
注意
2020年1月1日から、スマートバナー用の新しいSDKが提供されています。
新しいAppsFlyer Web SDKを使用すると、スマートバナーとピープルベースドアトリビューションの両方を使用できます。以下のSDKコードは、2つの例を示しています。
- スマートバナーのみにWeb SDKを使用する
- スマートバナーとピープルベースドアトリビューション両方にWeb SDKを使用する
モバイルバナーを表示するすべてのページの<head>タグにこのコードを含めます。
スマートバナー専用のAppsFlyer Web SDKのみ
- スクリプトの YOUR_WEB_KEY のプレースホルダーを自分の Web keyに置き換えます。Web keyは、新しいWebsite workplaceを作成する際に生成されます。
- 以下コードをWebサイトのheadタグに貼り付けます。必ず、headタグの上部近くに貼り付けてください。
<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","banners",{banners: {key: "YOUR_WEB_KEY"}});
AF('banners', 'showBanner');
</script>
スマートバナーとピープルベースドアトリビューション向けAppsFlyer Web SDK
- スクリプトの YOUR_WEB_KEY のプレースホルダーを自分の Web keyに置き換えます。Web keyは、新しいWebsite workplaceを作成する際に生成されます。
- スクリプトのYOUR_PBA_KEYプレースホルダーをWeb dev keyに置き換えます。Web dev keyはブランドバンドルを作成した時に生成されます。
- 以下コードをWebサイトのheadタグに貼り付けます。必ず、headタグの上部近くに貼り付けてください。
<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba,banners",{pba: {webAppId: "YOUR_PBA_KEY"}, banners: {key: "YOUR_WEB_KEY"}});
AF('banners', 'showBanner');
</script>
<script>
!function(e,n,t){{!function(e,n,t,r,a){{
var s=(e[n]=e[n]||{{}})[t]=function(){(s._q=s._q||[]).push(Array.prototype.slice.call(arguments))};
s.webkey=a;
for(var i=0;i<r.length;i++)
s[r[i]]=function(n)
{{return function()
{{var e=Array.prototype.slice.call(arguments);
return e.unshift(n),(s._q=s._q||[]).push(e),s}}}}
(r[i])}}(e,"AF","Banner",["showBanner","hideBanner","disableBanners","disableTracking","setAdditionalParams"],t),
function(e,n,t){var r=e.createElement("script");
r.type="text/javascript",r.async=!0,r.src=n+(t?"?webkey="+t:"");
var a=e.getElementsByTagName("script")[0];
a.parentNode.insertBefore(r,a)}(n,"https://cdn.appsflyer.com/web-sdk/banner/latest/sdk.min.js",t)}}(window,document,"YOUR-BANNER-KEY");
window.AF.Banner.showBanner();
</script>
タグマネージャーを使用してSDKを追加する
タグマネージャーを使用して、スマートバナーSDKをWebサイトに追加できます。
- GTMで、新しいタグを作成します。
- タグに名前を付け、タグ設定 をクリックして、カスタム HTMLを選択します。
- HTMLボックスに、SDKコードを貼り付けます。コードのYOUR-BANNER-KEYを実際のバナーキーに置き換えます。
- [トリガー] をクリックし、画面の右上隅にあるプラスアイコンをクリックして新しいトリガーを作成します。
- トリガーに名前を付け、[トリガー構成] をクリックして、ページビューを選択します。
- バナーをすべてのページに表示する場合は、All Page Viewsを選択します。選択したページにバナーを表示する場合は、 Some Page Views を選択し、タグをトリガーする条件を定義します。トリガーの詳細については、GTMのドキュメントをご覧ください。
- 右上隅にある [保存] をクリックします。
- タグの設定画面に戻ります。すべてが設定されていることを確認し、右上隅の [保存] をクリックします。
- GTMコンテナーを公開します。
ステップ1:Adobe Experience Cloudでプロパティを作成する
スマートバナーSDKをホストするプロパティ(タグ)を作成します。
- Adobe Experience Cloud > Launch へ移動
- Adobe Experience Cloud Launch の下にある Go to Launch をクリックします 。
- [新しいプロパティ] をクリックします。
- プロパティに名前を付けます。
- Platform の下にある、 Web を選択します。
- ウェブサイトのドメインを入力してください。
- [保存]をクリックします。
ステップ2:Adobe Launch PropoertyにスマートバナーSDKを追加する
スマートバナーSDKをタグに追加します。
- My web property ページにて、Rules タブを選択します。
- ルールに名前を付けます。Load スマートバナーの使用を推奨します。
- IF セクションの EVENTS 下で、 + Add をクリックします。
- Event Type にある、Core - DOM Ready を選択します
- 変更を保持 をクリックします。
- THEN セクションの アクション にある、 + Add をクリックします。
- Action Type > Custome Code へ移動
- JavaScript を選択 > Open Editor で、<script>タグなしで スマートバナー SDKコードを貼り付けます。
- 変更を保持 をクリックして、コードエディターを閉じます。
- [保存]をクリックします。
ステップ3:Adobe LaunchタグをWebサイトに追加する
Adobe LaunchタグをWebサイトに追加します。タグは、スマートバナーWeb SDKをロードします。
- My web property ページで、 Environments タブを選択します。
- 公開する環境(開発または本番)を含む行を見つけます。
- INSTALL ヘッダーに含まれる、関連する行のボックスアイコンをクリックします。これは通常、production environmentです。
- Adobe Launch 環境の公開に関するセクションを参照してください。
- Web Install Instructions ダイアログボックス:
- スクリプトコードsnippetをコピーします。
- ダイアログボックスを閉じます。
- コードスニペットを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 をクリックします。
- [保存]をクリックします。
- Development セクション:
- 新しく作成されたライブラリの横にある [アクション]メニュー(3つのドット)をクリックし、Build for Developers を選択します。
- アクションメニューをもう一度クリックし、Submit for Approval を選択します。
- Submitted セクション:
- アクションメニュ―をクリックし、Build for Staging を選択します。
- アクションメニューをもう一度クリックし、Approve for Publishing を選択します。
- Approved セクションにて、アクションメニューをクリックし、Build & Publish to Production を選択します。
これでプロセスは完了です。
これで、ウェブサイトがモバイルで読み込まれると、バナーのアクティブなクリエイティブが表示されます。特定のページにのみ、またはユーザーのアクションに従ってバナーを表示するには、 Adobe Launch rulesを参照してください。
SDKの機能
Showbanner
目的:
以下で提供されるバナーキーに従ってスマートバナーの表示を開始します。
パラメーター(オプション):
- bannerContainerQuery
これが渡された場合、SDKはこのクエリでページ内の要素を見つけようとし、バナー配置のエントリポイントとして扱います。それ以外の場合、 document.body が使用されます。 -
additionalParams
これが渡されると、これらのパラメーターはクエリURLとしてバナーURLに追加されます。
例:
AF('banners', 'showBanner', { bannerContainerQuery: "#container-id",
additionalParams: { p1: "v1", p2: "v2"...}});
showBanner({ bannerContainerQuery: "#container-id",
additionalParams: { p1: "v1", p2: "v2"...}});
hideBanner
目的
ページに表示されたバナーをプログラムで削除します(例:X秒間表示した後)。
AF('banners', 'hideBanner')
disableBanners(非推奨)
目的
この機能は、古いスマートバナー SDKでのみ使用でき、今後廃止される予定です。
Web SDKによるバナーの表示およびAppsFlyerサーバーとの通信を無効にします。
disableTracking(非推奨)
目的
この機能は、古いスマートバナー SDKでのみ使用でき、今後廃止される予定です。
Web SDKを無効にし、ブラウザから収集された情報のトレースを削除します(例:ローカルストレージ、Cookieなど)。
setAdditionalParams(非推奨)
目的
この機能は、古いスマートバナー SDKでのみ使用でき、今後廃止される予定です。
showBanner
を呼び出す前に additionalParams を OneLinkに設定します。パラメーターは、バナーの後ろのOneLink URLに追加されます。
パラメーター名
-
Params
既存のアトリビューションリンクパラメーターを上書きできるキー/値パラメーターのマップ(pid 値以外)。
使用例:
特定のパラメーターを使用してランディングページを区別したい。そのためには、バナーの背後にあるOneLinkに追加のパラメーターを追加できます。ユーザーがバナーをクリックしてアプリをインストールすると、OneLinkのパラメーターがのローデータに表示されます。以下のコード例では、af_sub1 パラメーターを使用しています。
// showBanner() を呼び出す前にこのメソッドを呼び出します
setAdditionalParameters( 'af_sub': 'custom_paramter_value')
最終的なOneLinkの形式は次のとおりです: subdomain.onelink.me/onelink-id?pid=af_banner & c = campaign & af_sub1 = custom_paramter_value
サブドメインとOneLink IDは、 OneLinkテンプレートから取得されます。
例: ab12.onelink.me/xyz1?pid=af_banner & c = summer_campaign & af_sub1 = uk_landing_page
任意の有効なパラメーターを使用できます。アトリビューションリンクパラメーターの詳細については、 こちらを参照してください。pid および c パラメーターは、バナーのアトリビューションリンクに既に存在するため、上書きしないでください。
getAdditionalParams(非推奨)
目的
この機能は、古いスマートバナー SDKでのみ使用でき、今後廃止される予定です。
現在の additionalParams オブジェクトを取得します。