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

推奨

開発者

最終更新: 2022年08月12日 03:03

概要：スマートバナー 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>タグにこのコードを含めます。

スマートバナー専用の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)

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

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