PBA Web SDK 実装ガイド

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Inject SDK
  var o = document.createElement("script"),
      p = document.getElementsByTagName("script")[0];
  o.async = 1;
  o.src = "https://websdk.appsflyersdk.com?" + "st=pba&af_id=WEB_DEV_KEY";
  p.parentNode.insertBefore(o, p);
</script>

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Inject SDK
  var o = document.createElement("script"),
      p = document.getElementsByTagName("script")[0];
  o.async = 1;
  o.src = "https://websdk.appsflyersdk.com?" + "st=pba,banners&af_id=WEB_DEV_KEY";
  p.parentNode.insertBefore(o, p);
  AF('banners', 'showBanner');
</script>

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["pba"]
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["banners", "pba"]
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

考慮事項と必要なアクション

はじめる前に

• マーケターにブランドバンドルが作成済みであることを確認してください。 
• 詳細なガイダンスについては、PBA 導入ガイドを参照してください。
• 注意：すでにstandalone Smart Banners web SDKを導入している場合は、それを削除し、Smart BannersとPeople-based Attributionの両方に対応するWeb SDKへ置き換えてください。standalone Web SDK for PBAを単純に追加するだけでは対応しないでください。 

以下を実施してください：

• Web SDKのWeb Dev Keyを入手してください。  注意：これは、アプリのSDK実装時に使用するDev Keyとは異なります。
  •  Web Dev Key の取得方法： 
    1. AppsFlyerの管理画面上、上部メニューからマイアプリタブを選択します。
    2. ［ブランドバンドルを表示］をクリックします。
    3. 必要なWeb Dev Keyをコピーしてください。(WEB_DEV_KEY)
• Smart Bannersを実装する場合は、Smart Banner keyも取得します。 
  • Smart Banner Keyを取得するには：
    1. AppsFlyer のサイドメニューから、Engage>Web-to-app>Smart Bannersを選択してください。
    2. 必要な Smart Banner Key をコピーしてください。 
• Webサイト上で head タグにスクリプトを追加する権限が必要です。
• Googleタグマネージャーを使用する場合は、ウェブサイトに統合する必要があります。

以下のいずれかの方法でWeb SDKの実装を進めてください。  

インストールしたら、AppsFlyer Web SDKが訪問者のブラウザーによって呼び出され、メッセージが送信されていることを確認してください。これは、ブラウザで報告されたメッセージネットワーク接続を調べることによって行います。

SDKが読み込まれていることを確認するには：

1. ウェブサイトに移動してください。

2. デベロッパーコンソールを開きます。

   

3. (A)［Network］ タブへ移動してください。  
4. ページを更新（リロード）します。
5. (B) wa.appsflyer で絞り込みます。
6. (C) events メッセージを選択してください。 
7. (D)ヘッダータブで、以下のことを確認してください。
   • Request URL が wa.appsflyer.com/events であること。
   • site_id query parameter= WEB_DEV_KEY.
   • (E) ステータスコードが200であること。
8. site_id の値が、ブランドバンドル設定の WEB_DEV_KEY の値と同じであることを確認してください。
   1. AppsFlyerの管理画面上では、サイドメニューから設定 > ブランドバンドルを選択してください。
   2. [Web dev key] をクリックすると、キーがコピーされます。
   3. キーを任意の場所（新しいブラウザやノートパッド）に貼り付け、キーを表示します。
   4. site_idとWEB_DEV_KEYが一致していることを確認してください。 
9. SDKが一度だけ読み込まれるようにしてください。何度かSDKをロードすると、SDKの機能が停止する場合があります。

Web SDKは訪問者のイベントデータをAppsFlyerに送信します。このセクションでは、イベント送信の制御、停止、開始の方法について説明します。 

注意：

• SDK初期状態設定：Webページの初回読み込み時にSDKがイベント送信を開始するか、明示的なコマンドがあるまで待機するかを決定します。この設定はWebスニペット内に含まれます。
• 明示的コントロールイベント送信の停止または開始に使用します。たとえば、データのオプトイン/オプトアウトバナー（いわゆるcookie consent banner）を実装する場合は、イベント送信の開始・停止コマンドをそのバナーの制御に組み込んでください。明示的なコントロールははSDKの初期状態設定より優先され、以下の特性を持つ永続的なファーストパーティCookieを使用します。
  • Webサイトのドメイン上に設定される
  • Web SDKで設定された期間、またはブラウザにより決定される期間で失効する。Cookie失効後、Web SDKは初期状態設定に戻ります。
  • Web SDKのCookieは、ブラウザ固有のCookie設定に干渉せず、常にその設定に従います。
     

SDK初期状態設定

明示的コントロール

ウェブサイトで厳格なセキュリティ要件またはデータプライバシー要件が求められる場合は、以下の仕組みを使用して、Web SDKがあなたの環境およびデータとどのように連携するかを設定してください。

コンテンツ・セキュリティ・ポリシー（CSP）

ウェブサイトでJavaScriptをCSPによって保護する必要がある場合、Web SDKはCSPの構成に応じて2つの方法をサポートしています。

• selfを使用すたCSP：script-srcの許可リストに https://websdk.appsflyersdk.com を追加してください。これは、スタンダードWeb SDKとアドバンスSDK検証の両方で機能します。
• nonceを使用したCSP：ポリシーで script-src 'nonce-...' を使用している場合は、アドバンスSDK検証のnonce拡張版を利用できます。これにより、検証プロセスで必要となる3つのscriptタグすべてにnonceが引き渡されます。{{CSP_NONCE}}は、サーバー側でリクエストごとに生成されるnonce値に置き換えてください。

以下の表は、どのCSPポリシーがnonce拡張版と互換性があるかを示しています。

CSP nonce対応のアドバンスSDK検証用スニペット

<script nonce="{{CSP_NONCE}}">
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config — nonce forwarded to the injected SDK <script> tag
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["pba"],
    nonce: "{{CSP_NONCE}}"
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.nonce = "{{CSP_NONCE}}";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

<script nonce="{{CSP_NONCE}}">
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config — nonce forwarded to the injected SDK <script> tag
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["banners", "pba"],
    nonce: "{{CSP_NONCE}}"
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.nonce = "{{CSP_NONCE}}";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

クエリパラメータにAppsFlyerへ記録したくないデータが含まれている場合、AppsFlyerプラットフォームに対して一部またはすべてのクエリパラメータを破棄するよう指示できます。これにより、それらはraw dataやレポートでは利用できなくなります。 

この方法は、URL、referrer、header_refererに関連して実装できます。

クエリ破棄のオプション

• ユーザーイベントはSDKによって記録され、SDKはイベントをAppsFlyerに送信します。
• マーケティング担当者が設定したコンバージョンイベントリストを使用して、AppsFlyerはイベントをスタンダードイベントとコンバージョンイベントに分割します。
• コンバージョンイベントデータはPBAの管理画面でも利用できます。
• コンバージョンおよびスタンダードイベントデータは、 ローデータレポート 内で利用できます。

コンバージョンイベント

• コンバージョンイベントはマーケティング施策やビジネス成果に関するインサイトを提供します。具体的には、購入、ダウンロード、サインアップ、サブスクリプション登録などが含まれます。
• ユーザーをWebサイトに導いたメディアソースにコンバージョンイベントを紐付けることが、Web SDKにより可能になります。
• 紐付けるメディアソースを特定することで、さまざまなメディアソースによってもたらされるユーザーの質を計測および区別できるようになります。
• コンバージョンイベントでは、収益の計測やROIの計算も可能になります。
• 特定のメディアソースの予算をそのメディアソースのユーザーによる収益と比較するために使用してください。

スタンダードイベント

• スタンダードイベントは、コンバージョンにつながるユーザージャーニーとファネルを評価するのに役立ちます。
• さらに、ユーザーアクティビティを計測し、エンゲージメントの高いユーザーが多いメディアソースをハイライトすることができます。
• ユーザーアクティビティを計測することで、リエンゲージメントキャンペーンを実施するべきユーザーの選定にも活用できます。

イベントの計測

ランディングページが読み込まれたときやユーザーがWebサイト上で何らかの操作したときなど、特定の条件が満たされたときにWeb SDKをトリガーしてイベントを記録してください。計測イベントの例を参照してください。

• Webユーザーは、割り当てた一意のCUIDを使用してAppsFlyer上で識別されます。通常、CUIDはお客様側のバックエンドサーバーで管理されます。 
• モバイル環境で使用しているものと同じCUID値を使用してください。これにより、複数のプラットフォームをまたいだユーザー行動を包括的に把握できます。モバイルSDKの関数はsetCustomerUserIdです。（iOS, Android, Unity）
• Web SDKでCUIDを設定するには：
  • CUIDにアクセスできるようになった最も早い時点で設定してください。多くの場合、ユーザーがログインまたはサインアップして識別された後になります。
  • 以下の例のように、setCustomerUserId() を設定するJavaScript呼び出しを実行してください。
    注意：　CUIDが数値であっても、文字列として送信してください。引用符で囲んでください。
• Web S2Sを実装する場合は、バックエンドでCUIDをWeb Visitor IDに紐付けた際に、PBAへ通知する必要が生じる可能性がある点を考慮してください。
• CUIDには、 直接識別できる個人情報(電話番号や電子メールアドレスなど)は含めないでください。

例：CUIDの設定

// Associate all current user web events to distinct ID 663274 
AF('pba', 'setCustomerUserId' , '663274')

イベントの例

// purchase event of shoes with associated revenue
AF('pba', 'event', {eventType: 'EVENT', eventName: 'purchase', eventRevenue: 12, eventValue: {"key1": 123, "key2": "name"}});

送信するイベントは、Webサービスの性質によって異なります。たとえば、オンラインストアのアプリで必要となるイベント群は、ニュースメディアのアプリとは異なります。以下のシナリオを参考に、どのようなイベントを、どのタイミングで送信すべきかを把握してください。

オンラインストア

オンラインストアを運営しているとします。記録したいスタンダードイベントの例は以下のとおりです。 

• 検索：スタンダードイベント
• カート追加：スタンダードイベント
• カート削除：スタンダードイベント
• 購入：コンバージョンイベント

ニュースサイト

ニュースサイトを運営しているとします。記録したいイベントは次のとおりです:

• サインアップ - コンバージョンイベント
• 定期購読の登録 - コンバージョンイベント

このパートはWeb開発者向けです。

PBAのWeb SDK実装テスト：テストイベントをリアルタイムで表示します。

イベントがAppsFlyerへ送信されているかの確認：

1. Webサイトを開いてください。
2. ブラウザー開発者ツールを開きます。
   • Chromeでのデベロッパーコンソールの開き方
   • Safariでのデベロッパーコンソールの開き方
3. Networkタブに切り替えてください。
4. イベントを発火させます。

5. message で絞り込んでください。

   

6. wa.appsflyer.com で始まるネットワークリクエストを探してください（以下スクリーンショットを参照してください）。
7. 以下を確認してください。
   1. ステータスコードが200であること
   2. Request Payload がイベントのパラメーターと一致していること

ここで示すコードは、あくまで説明用です。そのまま使用しないでください。 

• 前提条件:前提条件：イベント送信時点で、ページ上ですでにWeb SDKが読み込まれていること。
• 以下のシナリオ例では、次の場合にイベントを記録するコードを示します。 
  • ランディングページが読み込まれる時：
  • ユーザーがWebサイト上で行動した時：

<html>
    <head>
        <!-- Assume that the server returns a response with details about the newly subscribed user -->
        <!-- Alternatively, you can extract data from localStorage or cookies,
            in case data was set in either of them during the subscription process
        -->
        <script>window.onload = function(){
            AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category': 'holiday_promotion', eventValue: {'label' : 'newspaper'}, eventName: 'subscription',}); } </script> </head> <body> <h1>Thank You for Subscribing to Our Newsletter</h1> </body> </html>

<html>
<head>
    <!-- Assume that data about products in the shopping cart
    is stored in localStorage -->
    <script>
        window.onload = function () {
            document.getElementById('checkout').addEventListener('click', function () {
                AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'checkout'});
            });
        }
    </script>
</head>
<body>
    <h1>Shopping Cart</h1>
    <h2>Shirt</h2>
    <p>
        <ul>
            <li>Color: Blue</li>
            <li>Quantity: 2</li>
            <li>Price: $20</li>
        </ul>
    </p>
    <h2>Pants</h2>
    <p>
        <ul>
            <li>Color: Black</li>
            <li>Quantity: 3</li>
            <li>Price: $15</li>
        </ul>
    </p>
    <button id='checkout'>Checkout</button>
</body>
</html>

• イベントが発生する前に、Web SDKのfunctionsタグがロードされていることを確認してください。
• イベントの値で特殊文字・記号を送信しないようにしてください（例：通貨マークなど）
• 値は半角50文字以下に設定してください。

これらの例で示しているコードは、あくまで参考用です。このコードをそのまま使用しないでください。コードの使い方がわからない場合は、Web開発者に相談してください。

前提条件:どちらの例も、イベントが送信される前にWeb SDKがページによって既にロードされていることを前提としています。Web SDKを再度読み込まないでください。

ユーザーシナリオ：

• ユーザーがウェブサイトでサインアップを完了しました。
• Webサイトのコードがユーザー情報を収集し、サーバーに送信します。
• サーバーは、ユーザー対してユニークなCUIDを付与します。
• サインアップ完了後のサンキューページにおいて、新しくCUIDをサーバーから取得します。
• サーバーのレスポンスを使用して、Web SDKの setCustomerUserId() のメソッドを使用してAppsFlyerのCUIDを設定してください。

<html>
<head>
    <!-- The Web SDK script loads first -->
    <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.appsflyersdk.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",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        };
    // This function stores the user email sent to the server after the user reaches the thank you page
    // The response from the server is a unique CUID that should be set using the web SDK setCustomerUserId method
        function storeUserEmail (){
            var userEmail = document.getElementById('email').value;
            localStorage.setItem('user_email', userEmail);
        }
    </script>
</head>
<body>
    <h1>Sign Up</h1>
    <form onsubmit="storeUserEmail()" action="/signup" method="post">
        <div><label>Name</label>
            <input type="text" name="name" id="name"></div>
        <br />
        <div> <label>Email</label>
            <input type="email" name="email" id="email"></div>
        <br />
        <input type="submit" id="submit">
    </form>
</body>
</html>

<html>
<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.appsflyersdk.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",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        // Using the fetch API to send the user email to the server
        // and get the unique user id in return	
        window.onload = function () {
            var userEmail = localStorage.getItem('user_email');
            fetch('users/' + userEmail).then(function (res) {
                   res.text().then(function (id) {
                    console.log(id);
                    AF('pba', 'setCustomerUserId', id);
                });
            });
        }  </script> 
     </head> 
     <body> 
        <h1>Thank You for Signing Up!</h1> 
     </body> 
</html>

setCustomerUserIdのfunctionは、ユーザーのログインとサインアップの後など、ユーザーフローのどの段階でも送信できます。AppsFlyerは、最新のCUIDを使用して、過去または未来のタッチポイントとイベントのユーザー情報を更新します。

モバイルアプリの setCustomerUserd 関数で実行したのと同じCUID値を使用してください（モバイルの setCustomerUserId を参照してください：iOS、Android、Unity）

以下の表に記載されたCookieは、Web SDKによってWebサイト上で設定または使用されます。 

表の中では以下のような略語が使われています。

• AMP：Accelerated Mobile Pages 
• CDN：コンテンツ・デリバリー・ネットワーク (Content Delivery Network)
• 3PC：サードパーティCookie

• 廃止の通知は、機能またはメソッドのサポートを停止するというAppsFlyerからの事前連絡になります。この機能またはメソッドは、サポート終了日までは機能し続けます。
• この廃止の通知を、コードを変更する機会と見なしてご活用ください。