スマートバナー V2

概要

AppsFlyerは、広告主がWebサイトに実装するスマートバナーSDKを提供します。SDKの目的は、スマートバナーを動的に表示するために必要な全てのデータを取得することです。スマートバナーSDKは適切なアトリビューションリンクも自動的に作成するため、手動で作成する必要はありません。

したがって、バナーを表示するすべてのページからスマートバナーSDKにアクセスできる必要があります 。スマートバナーSDKは、Website Workplaceから取得できる一意のWeb keyを使用して認証します。

実装

Smart banners only

  1. スクリプトの YOUR_WEB_KEY のプレースホルダーを自分の Web keyに置き換えます。Web keyは、新しいWebsite Workplaceを作成する際に生成されます。
  2. 次のコードスニペットをウェブサイトの 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');
</script>

ℹ️

注意

The showBanner メソッドは、インストールコードの最後にあり、より多くのパラメータを取得することができます。[詳細はこちら]

Smart banners and People-Based Attribution

  1. スクリプトの YOUR_WEB_KEY のプレースホルダーを自分の Web keyに置き換えます。Web keyは、新しいWebsite Workplaceを作成する際に生成されます。
  2. スクリプトのYOUR_PBA_KEYプレースホルダーをWeb Devキーに置き換えます。Web dev keyはAppsFlyer管理画面でブランドバンドルを作成した時に生成されます。
  3. 以下コードを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>

スマートバナーのフォント制御

スマートバナーに、ウェブサイトの他の部分と同じフォントを使用することで、ブランドの一貫したまとまりのあるビジュアル・アイデンティティを実現します。

スマートバナーのデフォルトフォントを変更するためには、CSSに以下のルールを追加する必要があります。

[data-af-custom-fonts="af-creatives-text"] {
    font-family: PUT-YOUR-CUSTOM-FONT-HERE !important;
}

例:

[data-af-custom-fonts="af-creatives-text"] {
    font-family: museo-sans !important;
}

🚧

  • The !important is required
  • フォントがすでにWebサイトに読み込まれていることを確認してください。
  • カスタムフォントは、ウェブサイト上のすべてのバナーに適用されます。
  • If the font doesn't display correctly, resave your banner in the creative editor

SDKの機能

showBanner

メソッドのシグネチャ

AF('banners', 'showBanner', { bannerContainerQuery: String,
              bannerZIndex: Integer,              
              additionalParams: <Key, Value Dictionary>);

詳細
以下で提供されるバナーキーに従ってスマートバナーの表示を開始します。

ℹ️

注意

Wrapper / ハイブリッドアプリにスマートバナーを実装して、(ブラウザからではなく)アプリからバナーページを読み込む場合は、この関数を使用しないでください。 showBanner メソッドによりアプリ内にアプリインストールバナーが表示されます。Wrapper / ハイブリッドアプリで showBanner を使用する場合は、 hideBanner を代わりに使用してください。

引数の入力

タイプ名前詳細
StringbannerContainerQuery渡された場合、SDはこのクエリを使用してページ内のelementを見つけようとし、それをバナー配置のエントリポイントとして扱います。もしくは document.body を使用します。
IntegerbannerZIndexスマートバナーはデフォルトで最大z-index値に設定されているため、Webサイトのelementによって非表示にされることはありません。これは、一部のWebサイトコンポーネントをバナーの上に配置したい場合は変更できます。
<Key, Value Dictionary>additionalParams渡された場合、これらのキーと値(例: deep_link_value: apples)がクエリパラメータとしてOneLink URLに追加されます。

使用例

  • OneLink URL にパラメーターを追加する
AF('banners', 'showBanner', { additionalParams: { deep_link_value: "apples", deep_link_sub1: "22", af_adset: "my_adset"}});
  • このバナーの Z-index とその配置の container ID を設定します。
AF('banners', 'showBanner', { bannerContainerQuery: "#my-container-id"
                              bannerZIndex: 999});

updateParams

メソッドのシグネチャ

AF('banners', 'updateParams', { <Key, Value Dictionary> });

詳細
バナー表示後、CTAボタンに割り当てられたOneLink URLに最大10個のパラメータ(例: deep_link_value)をプログラムにより追加します。

インプットは、パラメータキーと値を持つオブジェクトです。

キーに空の値を設定することはできません。
次のようにキーの名前を指定することはできません:undefined、null、NaN、arg
無効な文字:
Key: /, \, *, !, @, #, ?, $, %, ^, &, ~, ``, =, +, ', ", ;, :, >, <
Value = \, ;, $, >, <, ^, #, ``

  • パラメーターは、クエリパラメーターとして OneLink URL に追加されます。
  • updateParams を使用してパラメータを追加する場合インプレッションURLはクリックURLとは異なります。
  • 追加されたパラメーターが元のOneLink URLのパラメーターを置き換えることはありません。追加するパラメータがすでに OneLink URL にある場合は、変更されません。
  • updateParams が複数回呼び出された場合、最後の呼び出しのパラメーターだけが URLに追加されます。

引数の入力

タイプ名前詳細
<Key, Value Dictionary>N/AThese keys and values (for example, deep_link_value: apples)がクエリパラメータとしてOneLink URLに追加されます。

使用例

  • OneLink URL にパラメーターを追加する
AF('banners', 'updateParams', { deep_link_value: "new_param", deep_link_sub4: "gg_77", af_ad: "new_ad_param"});

hideBanner

メソッドのシグネチャ

AF('banners', 'hideBanner');

詳細

表示されたバナーをプログラムから削除します(例:特定のユーザー入力後)。

引数の入力

None

使用例

  • Hide banner
AF('banners', 'hideBanner');