概要:スマートバナー SDKをWebサイトに追加して、Webサイト訪問者をモバイルアプリユーザーに変換しましょう。
関連記事
スマートバナーを活用するための全体像については、以下の記事をご覧ください。
- スマートバナー—モバイルWebからアプリへの誘導(マーケター向け)
- マーケター向けスマートバナーのWebサイトへの実装
- ディベロッパー向けのスマートバナーWebサイトのコード実装 [本記事]
- モバイルWebからアプリへの計測ソリューション
- スマートバナーとPBAの連携
概要
AppsFlyerは、広告主がWebサイトに実装するスマートバナーSDKを提供します。SDKの目的は、スマートバナーを動的に表示するために必要な全てのデータを取得することです。スマートバナーSDKは適切なアトリビューションリンクも自動的に作成するため、手動で作成する必要はありません。
したがって、モバイルバナーを表示するすべてのページからスマートバナーSDKにアクセスできる必要があります 。
スマートバナーSDKは、Website Workplaceから取得できる一意のWeb keyを使用して認証します。
コード
注意
2020年1月1日以降、スマートバナー用のSDKを使用すると、スマートバナーとピープルベースドアトリビューションの両方をWebサイト上で使用できます。以下のSDKスニペットには、2つの例が含まれています。
既にスタンドアロンのPBA Web SDKを使用している場合は、それを削除して、スマートバナーとピープルベースドアトリビューションの両方を含む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"}});
// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements.This can be changed if you want some website components to be on top of the banner.
AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});
</script>
スマートバナーとピープルベースドアトリビューション向けAppsFlyer Web SDK
- スクリプトの YOUR_WEB_KEY のプレースホルダーを自分の Web keyに置き換えます。Web keyは、新しいWebsite Workplaceを作成する際に生成されます。
- スクリプトのYOUR_PBA_KEYプレースホルダーをWeb Devキーに置き換えます。Web Devキーはブランドバンドルを作成した時に生成されます。
- 以下コードを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"}});
// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements.This can be changed if you want some website components to be on top of the banner.
AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});
</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");
// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements.This can be changed if you want some website components to be on top of the banner.
showBanner({ bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"...}});
</script>
SDKの機能
showBanner
目的:
以下で提供されるバナーキーに従ってスマートバナーの表示を開始します。
注意: ブラウザからではなく、アプリ内でバナーページをロードするために、ラッパー / ハイブリッドアプリでスマートバナーを実装する場合には、このファンクションは使用しないでください。
もし showBanner
をラッパー / ハイブリッドアプリに使用する場合には、モバイルアプリのロードには hideBanner
を使用してください。
パラメーター(オプション):
- bannerContainerQuery
これが渡された場合、SDKはこのクエリでページ内の要素を見つけようとし、バナー配置のエントリポイントとして扱います。それ以外の場合、document.body が使用されます。 -
bannerzIndex
スマートバナーはデフォルトで最大 z-index値に設定されているため、Webサイトの要素によって非表示になりません。これは、一部のWebサイトコンポーネントをバナーの上に置きたい場合に変更できます。 -
追加パラメータ
渡されると、これらのパラメーター (deep_link_value など) がクエリパラメーターとして OneLink URL に追加されます。
例:
AF('banners', 'showBanner', { bannerContainerQuery: "#container-id",
bannerZIndex: 1000,
additionalParams: { p1: "v1", p2: "v2"...}});
showBanner({ bannerContainerQuery: "#container-id",
bannerZIndex: 1000,
additionalParams: { p1: "v1", p2: "v2"...}});
updateParams
目的
バナーが表示された後、プログラムで最大 10 個のパラメーター (deep_link_valueなど) をCTA(ダウンロード)ボタンに割り当てられた OneLink URL に追加します。
インプットは、パラメータキーと値を持つオブジェクトです。
- キーに空の値を設定することはできません。
- 次のようにキーの名前を指定することはできません:undefined、null、NaN、arg
-
無効な文字:
- Key: /, \, *, !, @, #, ?, $, %, ^, &, ~, `, =, +, ', ", ;, :, >, <
- Value = \, ;, $, >, <, ^, #, `
例
AF ("banners", "updateParams", {p1: "v1", p2: "v2"...})
注意事項
- パラメータは OneLink URL にクエリパラメータとして追加されます。
- updateParams を使用してパラメータを追加する場合、インプレッションURLはクリックURLとは異なります。
- 追加されたパラメーターが元のOneLink URLのパラメーターを置き換えることはありません。追加するパラメータがすでに OneLink URL にある場合は、変更されません。
- updateParams が複数回呼び出された場合、最後の呼び出しのパラメーターだけが URLに追加されます。
- このメソッドは、非推奨のスマートバナーWeb SDKでは機能しません。
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テンプレートから取得されます。
For example: ab12.onelink.me/xyz1?pid=af_banner&c=summer_campaign&af_sub1=uk_landing_page.
任意の有効なパラメーターを使用できます。アトリビューションリンクパラメーターの詳細については、 こちらを参照してください。pid および c パラメーターは、バナーのアトリビューションリンクに既に存在するため、上書きしないでください。
getAdditionalParams(非推奨)
目的
この機能は、古いスマートバナー SDKでのみ使用でき、今後廃止される予定です。
現在の additionalParams オブジェクトを取得します。
特性と制限
特性 | 備考 |
---|---|
シングル ページ アプリケーション (SPA) |
スマートバナーは、ユーザーがページ間を移動した場合でも、デフォルトでは一度だけ表示されます。 ユーザーがページ間を移動するときにバナーを表示するには、ページをリロードせず、スマートバナーのデフォルトロジックをトリガーしないナビゲーション全てで手動で |