［Beta機能］AppsFlyer 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>

すべてのページで以下を実施します：

1. 手順2のスニペット内にある WEB_DEV_KEY を、ご利用のWeb SDK IDに置き換えます（必要に応じて YOUR_BANNER_KEY も置き換えます）。
2. スニペットをWebサイトの タグ上部付近に貼り付けます。

SDKがページごとに1回のみ読み込まれるように設定し、GTMの優先度設定を利用して、ページ読み込み直後に実行されるようにしてください。

1. Google Tag Managerを開きます。
2. AppsFlyer Web SDK用の新しいタグを作成します。
3. タグタイプで「Custom HTML」を選択します。
4. タグ名をわかりやすい名前に設定します。
5. 「Tag Configuration」に、手順2のスニペットを貼り付けます。
6. 保存をクリックします。
7. トリガーを追加する：
   • すべてのページで実行する場合：
     1. [トリガーの追加] をクリックします。
     2. [すべてのページ] を選択してください。
     3. 保存をクリックします。
     4. タグ名を入力し、［保存］をクリックします。
   • 特定ページのみで実行する場合：
     1. ［タグを保存］ をクリックします。
     2. GTMメイン画面で「トリガー」を選択し、「New（新規作成）」をクリックします。
     3. ペンのアイコンをクリックしてください。
     4. トリガータイプとして「ページビュー（Page View）」を選択します。
     5. [Some Page Views]（一部ページビュー）を選択します。
     6. 必要に応じてページ条件とトリガー条件を設定します。
     7. 保存をクリックします。
     8. 作成したトリガーをAppsFlyer Web SDKタグに関連付ける
        1. GTMのメイン画面で「Tags」を選択します。
        2. 以前に作成したタグを選択してください。
        3. トリガーパネル内のペンアイコンをクリックします。
        4. 前に作成したページビュートリガーを選択してください。
        5. 保存をクリックします。

Adobe Experience Cloudでプロパティを作成する

1. Adobe Experience Cloud > Launch へ移動してください。
2. Adobe Experience Cloud Launch の下にある Go to Launch をクリックします 。
3. [New Property]（新しいプロパティ）をクリックします。
4. プロパティに名前を付けてください。
5. Platform の下にある、 Web を選択します。
6. Webサイトのドメインを入力してください。
7. 保存をクリックします。

Adobe Launchプロパティにスニペットを追加する

1. My web property ページで、Rulesタブを選択します。
2. ルールに名前を付けます。推奨名：Load web SDK
3. If セクションで、Eventsの下にある +Add をクリックしてください。
   • Event Type にある Core - DOM Ready を選択します
   • Keep Changes（変更を保存）をクリックします。
4. Then セクションで、Actions の下にある +Add をクリックしてください。
   • アクションの種類でカスタムコードを選択します。
   • 「JavaScript」>「エディタを開く」を選択し、手順2のスニペットを貼り付けます（ラッパー行は含めないでください）。
   • [Keep Changes]（変更を保存）をクリックして、コードエディターを閉じます。
5. 保存をクリックします。

Adobe LaunchタグをWebサイトに追加する

1. [My web property] ページで、[Environments] タブを選択します。
2. 公開したい環境（developmentまたはproduction）の行を探します。
3. 「Install」列の該当行にあるボックスアイコンをクリックします。
4. 「Web Install Instructions」ダイアログで、スクリプトコードスニペットをコピーし、ダイアログを閉じます。
5. コピーしたコードスニペットをWebサイトの <head> セクションに貼り付けます。

Adobe Launch環境を公開する

1. [My web property] ページで、[Publishing] タブに移動します。
2. [Development]セクションの、[Add New Library] をクリックします。
   • ライブラリに名前を付けて、環境を選択します。
   • Resource Changes の下にある Add a Resource をクリックしてください。
   • Rules > Load web SDK > Latest > Select & Create a New Revision をクリックします。
   • 保存をクリックします。
3. Developmentのセクションで実施する操作：
   • 新しく作成したライブラリ横のアクションメニュー（3点アイコン）をクリックし、「Build for Development」を選択します。
   • 再度アクションメニューをクリックし、「Submit for Approval」を選択します。
4. Submittedのセクションで実施する操作：
   • アクションメニューをクリックし、「Build for Staging」を選択します。
   • 再度アクションメニューをクリックし、「Approve for Publishing」を選択します。
5. Approvedのセクションで実施する操作：
   • アクションメニューをクリックし、「Build & Publish to Production」を選択します。

イベントはWeb計測の基本要素であり、ビジネス上価値のある特定のユーザーアクションを表します。これらのユーザー行動を計測するには、各イベントのロジックとパラメータを定義し、収益情報やカスタムメタデータなどの適切なイベントパラメータをAppsFlyerプラットフォームへ送信する必要があります。

購入イベントと関連収益を含むイベント例

AF('pba', 'event', {eventType: 'EVENT', eventName: 'purchase', eventRevenue: 12, eventValue: {"key1": 123, "key2": "name"}});

これは、Thank Youページや確認ページなど、リダイレクトで完了するコンバージョンを計測する際の一般的な実装方法です。

このトリガーは、ネイティブJavaScriptでwindowロードメソッドを追加する方法、またはGoogle Tag Managerでページビュートリガーを設定する方法のいずれかで実装できます。

window.onload = function(){
  AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category': 'holiday_promotion'}, eventName: 'subscription'});
}

<html>
<head>
    <script>
        // Google Tag Manager loads the Web SDK
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXX');
    </script>
    <script>
        function getResponseFromServer() {
            return JSON.stringify({ action: 'subscribe', category: 'site actions', label: userEmail })
        }
        localStorage.setItem('data', JSON.stringify({ action: 'subscribe', category: 'site actions', label: 'user@email.com' }));
    </script>
</head>
<body>
    <h1>Thank You for Subscribing to Our Newsletter</h1>
</body>
</html>

ページを再読み込みせずに発生するアクション（ボタンクリック、ダウンロード、カート追加など）を計測する場合に使用します。

通常、このような操作は、ネイティブHTML要素にクリックリスナーを紐づける方法、またはGoogle Tag Managerの変数を使って特定の要素IDやCSSセレクタを識別・計測する方法で処理します。

<html>
<head>
    <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>
    <button id='checkout'>Checkout</button>
</body>
</html>

<html>
<head>
    <script>
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXX');
    </script>
</head>
<body>
    <h1>Shopping Cart</h1>
    <button id='checkout'>Checkout</button>
</body>
</html>

データの正確性と正常な送信を担保するため、以下の技術要件を確認してください。

• 読み込み順序：イベント呼び出しが行われる前に、Web SDKの関数タグがページスコープ内で完全に読み込まれていることを確認してください。
• データ形式：イベント値には特殊文字を含めないでください。たとえば、収益には通貨記号を含めず、数値で指定してください（$10.50 ではなく 10.50 を使用します）。
• 文字数制限：event_value の文字列は簡潔にしてください。4000文字を超える値は切り捨てられます。

これらの例で提供されているコードは参照専用です。このコードをそのまま使用しないでください。このコードの使用方法が不明な場合は、Web開発者に相談してください。

前提条件：イベント送信前にWeb SDKがページ上で読み込まれていること。SDKを再度読み込まないでください。

ユーザーシナリオ：

• ユーザーがWebサイトでサインアップします。
• Webサイト側のコードがユーザー情報を取得し、サーバーへ送信します。
• サーバーがユーザーに対して一意のCUIDを生成します。
• サインアップ後のThank Youページで、新しいCUIDをサーバーに問い合わせます。
• サーバーからのレスポンスを使用し、Web SDKの setCustomerUserId() メソッドでAppsFlyerのCUIDを設定します。

サインアップフォームの例

以下は、シンプルなサインアップフォームのコード例です。フォーム送信時にメールアドレスを localStorage に保存します。ユーザーがThank Youページに到達すると、そのメールアドレスがサーバーへ送信され、該当メールアドレスに対応する一意のCUIDを取得します。

<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>
        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>

Thank Youページの例

このコードではFetch APIを使用します。ユーザーが入力したメールアドレスをサーバーへ送信します。サインアップ時にサーバー側で一意のCUIDを持つユーザーが作成される前提で、メールアドレスをサーバーへ送信すると、一意のCUIDが返されます。サーバーから返された一意のCUIDが、setCustomerUserId メソッドに渡される値になります。

<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>
        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>

1. サインアップページを設定します。

   以下のコード例は、シンプルなサインアップフォームです。フォーム送信時にメールアドレスを localStorage に保存します。ユーザーがThank Youページに到達すると、そのメールアドレスがサーバーへ送信され、該当メールアドレスに対応する一意のCUIDを取得します。

   <html>
   <head>
       <script>
           (function (w, d, s, l, i) {
               w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
               var f = d.getElementsByTagName(s)[0], j = d.createElement(s),
                   dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true;
               j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
               f.parentNode.insertBefore(j, f);
           })(window, document, 'script', 'dataLayer', 'GTM-5VJ6C7R');
           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>

2. サインアップしたユーザー向けのThank Youページを設定します。以下のコードは、GTMトリガーを含むThank Youページの例です。サインアップフォームでユーザーが入力したメールアドレスをサーバーへ送信します。サインアップ時にサーバー側で一意のCUIDを持つユーザーが作成される前提で、メールアドレスをサーバーへ送信すると、一意のCUIDが返されます。サーバーから返された一意のCUIDは、setCustomerUserId() メソッドを使用して送信されます。

   <script>
       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>

3. Thank Youページの読み込み後にサブスクリプションをアトリビューションするため、新しいタグを追加します。

   

4. タグにわかりやすい名前を付け、タグタイプとして「Custom HTML」を選択します。

   

   <script>
       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>

5. テキストエリア下部の「Advanced Settings」を展開し、続いて「Tag Sequencing」を開きます。タグの実行後にコンバージョンが発火するよう設定されていることを確認してください。

   

6. コンバージョンタグをいつ発火させるかを指定するため、コンバージョンタグにトリガーを設定します（以下の例では、「Thank you」ページの読み込み時に発火します）。

   

計測は以下2つの方法で制御できます。

SDKの初期状態設定（スニペット内）

Webページ初回読み込み時に、SDKがイベント送信を開始するか、明示的な指示があるまで待機するかを定義します。この設定はWebスニペット内で指定します。

• イベント送信を有効化：{pba: {webAppId: "...", measurementStatus:true}}
• イベント送信を無効化：{pba: {webAppId: "...", measurementStatus:false}}

明示的な制御

明示的な制御は初期状態設定より優先され、永続的なファーストパーティCookieを使用します：

• Webサイトドメイン上に設定されます。
• Cookieの有効期限は、Web SDKまたはブラウザ設定に従います。
• 常にブラウザのCookie設定の影響を受けます。

コマンド

• イベント送信を開始する（オプトイン）：window.AF_SDK.PLUGINS.PBA.enableMeasurement()
• イベント送信を停止する（オプトアウト）：window.AF_SDK.PLUGINS.PBA.disableMeasurement()

Webサイトで厳格なセキュリティ要件やデータプライバシー要件が求められる場合は、以下の仕組みを使用して、Web SDKが環境やデータとどのように連携するかを制御できます。

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

WebサイトでCSPによるJavaScript保護を適用している場合、Web SDKはCSP設定および手順2で選択したスニペットに応じて、2種類の方法をサポートします。

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

以下の表は、nonce対応版スニペットと互換性のあるCSPポリシーを示しています。

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

<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>

クエリパラメータを破棄する

URLクエリパラメータに機密情報が含まれる場合、AppsFlyerに対してクエリパラメータ（URL、referrer、header_referer）を破棄するよう指示できます。

• すべてのクエリパラメータを破棄する場合：af_url=trueを追加
• 特定のパラメータのみを破棄する場合：af_url_mask=paramを使用（複数のパラメータを指定する場合は;で区切る)

例：

• 元のURL：param1=value1&param2=value2&param3=value3&af_url_mask=param2;param3
• 結果：param1=value1&af_url_mask=param2;param3