ディベロッパー向けスマートバナーのWebサイトへの実装

概要:スマートバナー SDKをWebサイトに追加して、Webサイト訪問者をモバイルアプリユーザーに変換しましょう。

 関連記事

スマートバナーを活用するための全体像については、以下の記事をご覧ください。

概要

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>タグにこのコードを含めます。

SDKスニペット 古いSDKスニペット - 非推奨

スマートバナー専用のAppsFlyer Web SDKのみ

  1. スクリプトの YOUR_WEB_KEY のプレースホルダーを自分の Web keyに置き換えます。Web keyは、新しいWebsite Workplaceを作成する際に生成されます。
  2. 以下コードを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

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

SDKの機能

showBanner

目的:

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

注意: ブラウザからではなく、アプリ内でバナーページをロードするために、ラッパー / ハイブリッドアプリでスマートバナーを実装する場合には、このファンクションは使用しないでください。
もし showBanner をラッパー / ハイブリッドアプリに使用する場合には、モバイルアプリのロードには hideBanner を使用してください。

パラメーター(オプション):

  • bannerContainerQuery
    これが渡された場合、SDKはこのクエリでページ内の要素を見つけようとし、バナー配置のエントリポイントとして扱います。それ以外の場合、document.body が使用されます。
  • bannerzIndex
    スマートバナーはデフォルトで最大 z-index値に設定されているため、Webサイトの要素によって非表示になりません。これは、一部のWebサイトコンポーネントをバナーの上に置きたい場合に変更できます。
  • 追加パラメータ
    渡されると、これらのパラメーター (deep_link_value など) がクエリパラメーターとして OneLink URL に追加されます。


例:

新しいSDK 古いSDK(非推奨)
AF('banners', '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)

スマートバナーは、ユーザーがページ間を移動した場合でも、デフォルトでは一度だけ表示されます。

ユーザーがページ間を移動するときにバナーを表示するには、ページをリロードせず、スマートバナーのデフォルトロジックをトリガーしないナビゲーション全てで手動で hideBanner と showBanner を呼び出す必要があります。