サイト訪問の計測
Web SDKの利用・実装ガイド
- Web SDK JavaScriptタグは、以下の特徴を持ちます：
- 複数のプラットフォームをまたいだユーザージャーニーを分析する、People-Based Attribution（PBA）ソリューションの一部です。
- Webサイト上でのユーザーの訪問および行動をAppsFlyerプラットフォームに送信します。
- プログラミング不要で導入できるWebサイト用プラグインモジュールです。 It is agnostic to the website visitor's operating system and browser.
- サイズ：40 - 60KB
- モバイルアプリとWeb環境をまたいだユーザー行動を記録・紐付けるために、AppsFlyerモバイルSDKとあわせてWeb SDKを実装してください。
- Webサイト外で発生するイベントは、Web server-to-server events API（Web S2S）を使用して記録できます。
コードスニペットの選択
統合タイプとセキュリティ要件に一致するスニペットを選択してください。以下の項目が選択可能です：
- スタンダードWeb SDK：標準的な実装です。
- アドバンスSDK検証：Web Web SDKにサプライチェーン保護を追加する強化版インテグレーションです。 CDNの侵害、DNSハイジャック、中間者攻撃（MITM）に対する追加のセキュリティレイヤーを提供します。
【重要】
スタンダードWeb SDKからアドバンスSDK検証へ移行する場合は、既存のスニペットを新しいものに置き換えてください。既存のスニペットの上に新しいスニペットを追加しないでください。
スタンダードWeb SDK
このスニペットを使用して、スタンダードWeb SDK連携を導入します。 SDKを読み込みたいすべてのページのタグの上部付近に貼り付けてください。
Smart Banners なし
<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>Smart Banners あり
<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>アドバンスSDK検証
アドバンスSDK検証は、Web SDKにサプライチェーン保護を追加する仕組みです。これにより、ユーザーのブラウザ上で実行されるコードが、AppsFlyerによって提供されたものと完全に一致していることが保証されます。 SDKのソースコード自体はスタンダードインテグレーションと同一であり、異なるのは配信および検証の仕組みのみです。
アドバンスSDK検証の特徴は以下の通りです：
- CDNの侵害、DNSハイジャック、中間者攻撃（MITM）に対する追加のセキュリティレイヤーを提供
- SDKの読み込み時間が約250ms増加
Advanced SDK Verification is optional. The standard integration remains fully supported and is the market standard for third-party analytics pixels. 標準インテグレーションはサードパーティ分析ピクセルにおける一般的な実装方法であり、アドバンスSDK検証はそれに対して追加の保護レイヤーを提供します。
なお、ウェブサイトでnonceを用いたContent Security Policy（CSP）を適用している場合は、「プライバシー管理」セクションのCSPに関する項目をご参照ください。
Smart Banners なし
<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>Smart Banners あり
<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>Web SDKのWebサイトへの実装
インストールと実装
考慮事項と必要なアクション
| 実装チェックリスト |
|---|
| 訪問とイベントを記録できるようにするため、Web SDKはWebサイト内のすべてのページにインストールする必要があります。 |
| 上記で選択したスニペットコードを、ページスコープ内でできるだけ早く読み込まれるように配置してください。そのため、head タグのなるべく上部にコードを配置します。 |
|
Googleタグマネージャー(GTM)を使用してSDKを実装する場合：
|
| Web SDKは、Smart Banners あり／なしのいずれでも実装できます。以降の該当セクションの手順に従ってください。 |
|
実装の必須要件
テストツールを使用して実装を検証してください |
Before you start:
以下を実施してください：
- Web SDKのWeb Dev Keyを入手してください。 This is not the same key used by mobile apps.
-
Web Dev Key の取得方法：
- AppsFlyerの管理画面上、上部メニューからマイアプリタブを選択します。
- ［ブランドバンドルを表示］をクリックします。
- 必要なWeb Dev Keyをコピーしてください。 (WEB_DEV_KEY)
-
Web Dev Key の取得方法：
- Smart Bannersを実装する場合は、Smart Banner keyも取得します。
-
Smart Banner Keyを取得するには：
- AppsFlyer のサイドメニューから、Engage>Web-to-app>Smart Bannersを選択してください。
- 必要な Smart Banner Key をコピーしてください。
-
Smart Banner Keyを取得するには：
- Webサイト上で head タグにスクリプトを追加する権限が必要です。
- Googleタグマネージャーを使用する場合は、ウェブサイトに統合する必要があります。
概要：概要：Web SDKを使用してAppsFlyerをWebサイトに実装し、サイトトラフィック、イベント、コンバージョン、収益などを計測しましょう。
Native
JavaScriptコードスニペット
以下のいずれかの方法を使用して、Web SDKを実装してください。
Smart BannerなしでWeb SDKを実装するには：
- 以下の手順を、Webサイト上のすべてのページで繰り返してください。
- 以下のコードスニペット内の
WEB_DEV_KEYを、事前準備で取得したキーに置き換えてください。 - 上記で選択したコードスニペットをウェブサイトのheadタグに貼り付けてください。 head タグのなるべく上部に配置してください。
Smart Bannerと一緒にWeb SDKを実装するには：
- ウェブサイトのすべてのページで以下の手順を繰り返してください。
-
上記で選択したコードスニペット内で、
WEB_DEV_KEYとYOUR_BANNER_KEYを前提条件で指定されたキーを使用して置き換えてください。 - このコードスニペットをウェブサイトのheadタグに貼り付けてください。 head タグのなるべく上部に配置してください。
ネイティブイベント計測 タグマネージャー経由イベント計測
Googleタグマネージャー（GTM）でWeb SDKを実装するには：
- Googleタグマネージャーに移動してください。
-
AppsFlyer Web SDK用に、新しいタグを作成してください。
- カスタム HTML のタグタイプを選択してください。
- タグに名前を付けます。
- 次のいずれかを実行してください：
- 保存をクリックしてください。
- 次のいずれかを実行してください：
-
すべてのページにトリガーを追加するには：
-
[トリガーの追加] をクリックします。
- [すべてのページ] を選択してください。
- 保存をクリックしてください。
- タグ名を入力し、保存をクリックしてください。
これで手順は完了です。
-
-
特定のページにトリガーを追加するには：
- ［タグを保存］ をクリックします。
- In the GTM main window, select Triggers.
- ペンのアイコンをクリックしてください。
-
［Page View］（ページビュー）のトリガータイプを選択してください。
- [Some Page Views]（一部ページビュー）を選択します。
- 必要に応じてページとトリガーの条件を設定してください。
- 保存をクリックしてください。
- そのトリガーをAppsFlyer Web SDKタグに関連付けてください。設定方法：
- GTMのメインウィンドウで[タグ]を選択してください。
- 以前に作成したタグを選択してください。
- トリガーパネルで、ペンのアイコンをクリックしてください。
-
前に作成したページビュートリガーを選択してください。
- 保存をクリックしてください。
-
すべてのページにトリガーを追加するには：
Native Google Tag Manager Adobe Launch Tag Manager
- Adobe Experience Cloudでプロパティを作成してください。
- Adobe LaunchのプロパティにWeb SDKを追加してください。
- Adobe LaunchのタグをWebサイトに追加してください。
- https://support.appsflyer.com/hc/article_attachments/44570452615441
Adobe Experience Cloudでプロパティを作成してください。
- Adobe Experience Cloud > Launch へ移動
- [Adobe Experience Cloud Launch] の下にある [Go to Launch] をクリックします。
- [New Property]（新しいプロパティ）をクリックします。
- プロパティに名前を付けてください。
- Platform の下にある、 Web を選択します。
- ウェブサイトのドメインを入力してください。
- 保存をクリックしてください。
Adobe LaunchのプロパティにWeb SDKを追加してください。
- My web property ページで、[Rules] タブを選択します。
- ルールに名前を付けます。使用することを推奨し、 Load web SDK 。
- [IF] セクションのEVENTS 下にある [+Add] をクリックします。
- [Event Type] にある [Core - DOM Ready] を選択します
- [Keep Changes]（変更を保存）をクリックします。
-
THEN セクションの Actionsにある、+Add をクリックします。
- [Action Type] > [Custome Code] をクリックします。
- [JavaScript] > [Open Editor] を選択し、<script> タグなしでWeb SDK スニペットを貼り付けます。
- [Keep Changes]（変更を保存）をクリックして、コードエディターを閉じます。
- 保存をクリックしてください。
Adobe LaunchのタグをWebサイトに追加してください。
- [My web property] ページで、[Environments] タブを選択します。
- 公開する環境（開発または本番）を含む行を見つけます。
- INSTALL ヘッダーに含まれる、関連する行のボックスアイコンをクリックします。 これは通常、実稼働環境です。
- Adobe Launch 環境の公開に関するセクションを参照してください。
-
Web Install Instructions のダイアログボックスにて、次の手順を行います。
- スクリプトコードsnippetをコピーします。
- ダイアログボックスを閉じます。
- コードスニペットをWebサイトの <head> タグの中に貼り付けます。
Adobe Launch環境を公開してください。
- [My web property] ページで、[Publishing] タブに移動します。
- [Development]セクションの、[Add New Library] をクリックします。
- ライブラリに名前を付けて、環境を選択します。
- [RESOURCE CHANGES] にある、[Add a Resource]（リソースの追加）をクリックします。
- Rules > Load web SDK > Latest > Select & Create a New Revision をクリックします。
- 保存をクリックしてください。
- [Development] セクションにて、次を実行します。
- 新しく作成されたライブラリの横にあるアクションメニュー（3つのドット）をクリックし、[Build for Developers] を選択します。
- アクションメニューをもう一度クリックし、[Submit for Approval] を選択します。
- [Submitted] セクションにて、次を実行します。
- アクションメニューをクリックし、[Build for Staging] を選択します。
- アクションメニューをもう一度クリックし、[Approve for Publishing] を選択します。
- [Approved] セクションにて、次を実行します。
- アクションメニューをクリックし、[Build & Publish to Production] を選択します。
- これでプロセスは完了です。
ウェブサイトがモバイル端末で読み込まれると、アクティブなクリエイティブがバナーに表示されます。特定のページやユーザーアクションに応じてバナーを表示するには、Adobe Launchルールを参照してください。
SDKの動作確認
インストールしたら、AppsFlyer Web SDKが訪問者のブラウザーによって呼び出され、メッセージが送信されていることを確認してください。これは、ブラウザで報告されたメッセージネットワーク接続を調べることによって行います。
SDKが読み込まれていることを確認するには：
- ウェブサイトに移動してください。
-
ブラウザー開発者ツールを開きます。
- (A)［Network］ タブへ移動してください。
- ページを更新（リロード）します。
- (B) wa. appsflyer で絞り込みます。
- (C) events メッセージを選択してください。
- (D)ヘッダータブで、以下のことを確認してください。
- Request URL が wa.appsflyer.com/events であること。
- site_id query parameter=
WEB_DEV_KEY. - GTMのメイン画面で、トリガーを選択し、［New］（新規作成）をクリックしてください。
- site_id の値が、ブランドバンドル設定の
WEB_DEV_KEYの値と同じであることを確認してください。- AppsFlyerの管理画面上では、サイドメニューから設定 > ブランドバンドルを選択してください。
- [Web dev key] をクリックすると、キーがコピーされます。
- キーを任意の場所（新しいブラウザやノートパッド）に貼り付け、キーを表示します。
- site_idと
WEB_DEV_KEYが一致していることを確認してください。
- 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スニペットに次の変更を加えます。 必要に応じて、measurementStatus パラメーターを追加してください： measurementStatus=true に設定します。
|
|
イベントを送信しない
|
Web SDKスニペットに次の変更を加えます。必要に応じて、measurementStatus パラメーターを追加してください： Set measurementStatus=false |
明示的コントロール
| 任意 | コマンド |
|---|---|
| イベント送信開始 (オプトイン) | window.AF_SDK.PLUGINS.PBA.enableMeasurement() |
| イベント送信停止 (オプトアウト) | window.AF_SDK.PLUGINS.PBA.disableMeasurement() |
コンテンツ・セキュリティ・ポリシー（CSP）ポリシーの導入
ウェブサイトで厳格なセキュリティ要件またはデータプライバシー要件が求められる場合は、以下の仕組みを使用して、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拡張版と互換性があるかを示しています。
| ポリシー | 作業 | 備考 |
|---|---|---|
script-src 'self' |
いいえ | 外部CDNオリジンが許可されておらず、インラインスクリプトもブロックされます。 |
script-src 'self' https://websdk.appsflyersdk.com |
Partial | ローダーおよびSDKは許可されますが、インラインのセットアップスクリプトは引き続きブロックされます。 |
script-src 'nonce-...' https://websdk.appsflyersdk.com |
はい | nonceによってインラインスクリプトとローダーが許可され、SDKタグにはローダー経由でnonceが引き渡されます。 |
script-src 'nonce-...' 'strict-dynamic' |
はい（推奨） | nonceによってインラインスクリプトとローダーが許可され、strict-dynamic により動的に挿入されるSDKタグにも信頼が引き継がれます。許可リストにCDNオリジンを追加する必要はありません。 |
CSP nonce対応のアドバンスSDK検証用スニペット
Smart Banners なし
<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>Smart Banners あり
<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に関連して実装できます。
クエリ破棄のオプション
| メソッド | 説明 |
|---|---|
| すべてのクエリパラメータの破棄 | URLにaf_url=trueを追加します |
| 特定のクエリ・パラメータの破棄 |
Query param maskを設定することで、どのパラメータを破棄するか指定できます。 param がパラメータ名として、af_url_mask=param を設定します。 例： マスク付きのURL：
破棄後のURL：
|
イベント記録の原則
コンバージョンとスタンダードイベント
- ユーザーイベントはSDKによって記録され、SDKはイベントをAppsFlyerに送信します。
- マーケティング担当者が設定したコンバージョンイベントリストを使用して、AppsFlyerはイベントをスタンダードイベントとコンバージョンイベントに分割します。
- コンバージョンイベントデータはPBAの管理画面でも利用できます。
- コンバージョンおよびスタンダードイベントデータは、 ローデータレポート 内で利用できます。
コンバージョンイベント
- コンバージョンイベントはマーケティング施策やビジネス成果に関するインサイトを提供します。具体的には、購入、ダウンロード、サインアップ、サブスクリプション登録などが含まれます。
- PBA attributes conversion events to the media source that drove the user to visit the website.
- 紐付けるメディアソースを特定することで、さまざまなメディアソースによってもたらされるユーザーの質を計測および区別できるようになります。
- コンバージョンイベントでは、収益の計測やROIの計算も可能になります。
- 特定のメディアソースの予算をそのメディアソースのユーザーによる収益と比較するために使用してください。
スタンダードイベント
- Standard events are used to validate the user journey and funnels that lead to conversions.
- さらに、ユーザーアクティビティを計測し、エンゲージメントの高いユーザーが多いメディアソースをハイライトすることができます。
- ユーザーアクティビティを計測することで、リエンゲージメントキャンペーンを実施するべきユーザーの選定にも活用できます。
イベントの計測
ランディングページが読み込まれたときやユーザーがWebサイト上で何らかの操作したときなど、特定の条件が満たされたときにWeb SDKをトリガーしてイベントを記録してください。計測イベントの例を参照してください。
カスタマーユーザーID（CUID）を使用したユーザーの識別
- Webユーザーは、割り当てた一意のCUIDを使用してAppsFlyer上で識別されます。通常、CUIDはお客様側のバックエンドサーバーで管理されます。
- モバイル環境で使用しているものと同じCUID値を使用してください。これにより、複数のプラットフォームをまたいだユーザー行動を包括的に把握できます。モバイルSDKの関数はsetCustomerUserIdです。 （iOS, Android, Unity）
-
Web SDKでCUIDを設定するには：
- CUIDにアクセスできるようになった最も早い時点で設定してください。多くの場合、ユーザーがログインまたはサインアップして識別された後になります。
-
以下の例のように、setCustomerUserId() を設定するJavaScript呼び出しを実行してください。
Note! Send the CUID as a string even if it is a number. 引用符で囲んでください。
- Web S2Sを実装する場合は、バックエンドでCUIDをWeb Visitor IDに紐付けた際に、PBAへ通知する必要が生じる可能性がある点を考慮してください。
- CUIDには、 直接識別できる個人情報(電話番号や電子メールアドレスなど)は含めないでください。
例：CUIDの設定
// Associate all current user web events to distinct ID 663274
AF('pba', 'setCustomerUserId' , '663274')
Web SDKのイベントパラメータ
| パラメーター名 | 必須 | 説明 |
|---|---|---|
| eventType | はい |
イベントタイプ 形式：文字列 このパラメーターには常にEVENTを入力してください。 例: eventType:"EVENT" |
| eventName | はい |
イベント名 形式：文字列 例：Purchase, Subscription |
| いいえ | このパラメータは非推奨であり、後日案内される日付にシステムから削除されます。代わりに eventValue パラメータを使用してください。 | |
|
|
いいえ | このパラメータは非推奨であり、後日案内される日付にシステムから削除されます。代わりに eventValue パラメータを使用してください。 |
| eventRevenue | いいえ |
Conversion eventに紐づく収益 形式：Float |
| eventRevenueCurrency | いいえ |
収益通貨
形式：文字列 |
| eventValue | いいえ |
イベントを説明する、イベントパラメータの一覧。このパラメーターを使用して、製品、アイテム価格などの情報をリッチアプリ内イベントで送信してください。
形式：JSON
例：青色で単価が3.99ドルの、商品(sku)" ABC123"を送信するには
制限：1000文字まで。これを超えると切り捨てられます。 |
イベント計測シナリオ
イベントの例
// 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へ送信されているかの確認：
- Webサイトを開いてください。
- デベロッパーコンソールを開きます。
- Networkタブに切り替えてください。
- イベントを発火させます。
-
Filter by message.
- wa.appsflyer.com で始まるネットワークリクエストを探してください（以下スクリーンショットを参照してください）。
- 以下を確認してください。
- ステータスコードが200であること
- Request Payload がイベントのパラメーターと一致していること
例
イベントの計測
ここで示すコードは、あくまで説明用です。そのまま使用しないでください。
- ユーザーをWebサイトに導いたメディアソースにコンバージョンイベントを紐付けることが、Web SDKにより可能になります。
- 以下のシナリオ例では、次の場合にイベントを記録するコードを示します。
- ランディングページが読み込まれる時：
- users interact with the website.
Native event recording
ランディングページのロード時のイベント計測
- You have a subscription page for newsletters and want to record subscriptions.
- 登録完了したユーザーを、予め作成したサンキューページにリダイレクトさせることも可能です。
<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ページです。イベントを送信するには、そのWebページでWeb SDKが読み込まれている必要があります。
- ユーザーがリダイレクトされた後にページが読み込まれると、ウィンドウロードメソッドが、AF() APIメソッドを呼び出して、定期購読 (サブスクリプション) のイベントをAppsFlyerに送信します。
Recording events when users interact with the website
- You have an eCommerce website and want to record checkout events.
- ユーザーが購入ボタンをクリックすると、WebSDKがイベントをAppsFlyerに送信します。
<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>上記のコードは基本的なHTMLページです。 イベントを送信するには、そのWebページでWeb SDKが読み込まれている必要があります。
- ページが読み込まれると、クリックリスナーとチェックアウトボタンが紐づきます。
- ユーザーが購入ボタンをクリックすると、コールバック関数が次のことを実行します：
- localStorageからデータを取得します。
- AF() メソッドを呼び出してデータを渡します。
- AF() メソッドは、AppsFlyerにイベントを送信します。
Tag Manager event recording
ランディングページのロード時のイベント計測
- You have a subscription page for newsletters and want to record successful subscriptions.
- You set up a thank you page to which users are redirected after successfully subscribing.
-
Set up a thank you page
<html> <head> <script> // Google Tag Manager loads the Web SDK <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> <script> // Assume that the server returns a response with details about the newly subscribed user function getResponseFromServer() { return JSON.stringify({ action: 'subscribe', category: 'site actions', label: userEmail }) } //Alternatively, you can extract data from localStorage or cookies, //in case data was set in either of them during the subscription process 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>The preceding code loads GTM which in turn loads the Web SDK. そのほかに2つのアクションがこのスクリプトで実行されます。 One is a function that gets a response from the server with user details. もう1つは、データをローカルストレージに設定します。 GTM has access to both function and localStorage. GTMはfunctionとlocalStorageの両方にアクセスでき、GTMを使用してfunctionを呼び出し、localStorageにアクセスすることも可能です。
-
Add a new tag for attributing subscriptions after the thank you page loads
- タグに名前をつけ、タグタイプは Custom HTML を選択してください。
-
次のコードを Custom HTMLに設定します。
<script> AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'subscription'}); </script> -
Advanced Settingsの中のTag Sequencingを開き、タグが発火した後にのみコンバージョンタグが発火するように設定してください。
-
コンバージョンタグを発火させるために、トリガーを設定してください。この例では、サンキューページが読み込まれた時にトリガーが発火します。
Recording events when users interact with the website
- You have an eCommerce website and want to record checkout events.
- ユーザーが購入ボタンをクリックすると、WebSDKがイベントをAppsFlyerに送信します。
-
チェックアウトページの設定
<html> <head> <script> // Google Tag Manager loads the Web SDK <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> <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>上記のコードは、GTMを使ってWeb SDKをロードします。 残りのHTMLはショッピングカートページの内容を単にコピーしているだけです。 Checkoutボタンの箇所に、id='checkout'の記載があることに注意してください。 GTMでボタンのクリックを取得したい場合にはこの設定が必須となります。
- GTMで、Variables をクリックし、Configure をクリックして、Built-In VariablesのリストにあるClick Element をチェックしてください。
- 新しい変数 (variable) を作成して、名前をつけてください。 タイプはAll Elements(全ての要素) を選択します。
- トリガー設定で Some Clicks を選択し、#checkout の CSS Selector に一致する Click Element を選択します。
-
チェックアウトアクションに対して新しいタグを作成してください。 タイプはカスタムHTML、トリガーはチェックアウトトリガーにしてください。
<script> AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'checkout'}); </script>
- イベントが発生する前に、Web SDKのfunctionsタグがロードされていることを確認してください。
- イベントの値で特殊文字・記号を送信しないようにしてください（例：通貨マークなど）
- 値は半角50文字以下に設定してください。
サインアップ後のカスタマーユーザーIDの設定
これらの例で示しているコードは、あくまで参考用です。このコードをそのまま使用しないでください。コードの使い方がわからない場合は、Web開発者に相談してください。
前提条件:前提条件：イベント送信時点で、ページ上ですでにWeb SDKが読み込まれていること。
ユーザーシナリオ：
- A user signs up to your website.
- Webサイトのコードがユーザー情報を収集し、サーバーに送信します。
- サーバーは、ユーザー対してユニークなCUIDを付与します。
- サインアップ完了後のサンキューページにおいて、新しくCUIDをサーバーから取得します。
- サーバーのレスポンスを使用して、Web SDKの setCustomerUserId() のメソッドを使用してAppsFlyerのCUIDを設定してください。
Native
サインアップ(登録)ページの設定
<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>上記のコードはシンプルなサインアップフォームです。フォームが送られると、メールアドレスがローカルストレージに保存されます。ユーザーがサンクスページに到達すると、そのメールアドレスがサーバーへ送信され、そのメールアドレスに対応する一意のCUIDが生成されます。
Set up a thank you page for users who sign up:
<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>このコードはfetch APIを使用しています。ユーザーが入力したメールアドレスをサーバーに送信します。サーバーがサインアップ時に一意のCUIDを生成すると仮定すると、メールアドレスをサーバーへ送信する目的は、その一意のCUIDを受け取ることにあります。サーバーは一意のCUIDを返し、そのCUIDがsetCustomerUserId メソッドに渡される値になります。
ネイティブ Googleタグマネージャー
-
サインアップ(登録)ページの設定
<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-5VJ6C7R'); // This function stores the user email to be sent to the server after the user reaches the thank you page // the response from the server is a unique CUID that should be used in 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>上記はシンプルな登録フォームのコードになります。フォームが送信されると、メールアドレスが localStorage に保存されます。ユーザーがサンクスページに到達すると、そのメールアドレスがサーバーへ送信され、そのメールアドレスに対応する一意のCUIDが取得されます。
-
Set up a thank you page for users who sign up:
(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>上記のコードは、サインアップフォームでユーザーが入力したメールアドレスをサーバーへ送信するGTMトリガーを持つサンクスページです。Assuming that on signup, the server creates a user with a unique CUID.
サインアップした際に、サーバーがユニークなCUIDを作成することを想定の上、
ユニークなCUIDを取得するためにメールアドレスをサーバーへ送信します。
サーバーは、setCustomerUserId() メソッドを使ってユニークなCUIDを返します。
この手順を繰り返して、トリガーとタブを作成してください。 - Add a new tag, for attributing subscriptions, after the thank you page loads.
-
タグに名前をつけ、タグタイプは “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> -
Advanced Settings を展開し、その下の Tag Sequencing を開いて、タグ実行後にコンバージョンが発火するよう設定されていることを確認してください。
-
コンバージョンタグをいつ発火させるかを示すため、コンバージョンタグ用のトリガーを設定します（以下の例では、「Thank you」ページの読み込み時 に発火します）。
setCustomerUserIdのfunctionは、ユーザーのログインとサインアップの後など、ユーザーフローのどの段階でも送信できます。 AppsFlyerは、最新のCUIDを使用して、過去または未来のタッチポイントとイベントのユーザー情報を更新します。
モバイルアプリの setCustomerUserd 関数で実行したのと同じCUID値を使用してください（モバイルの setCustomerUserId を参照してください：iOS、Android、Unity）
追加情報
Web SDK cookies
以下の表に記載されたCookieは、Web SDKによってWebサイト上で設定または使用されます。
表の中では以下のような略語が使われています。
- AMP：Accelerated Mobile Pages
- CDN：コンテンツ・デリバリー・ネットワーク (Content Delivery Network)
- 3PC：サードパーティCookie
| Cookie名 | ドメイン | Lifespan | 使用条件 | 詳細 |
|---|---|---|---|---|
| afUserId | お客様のウェブサイトのドメイン | 395日 | non-AMP | Webページの読み込みおよびナビゲーションイベントの文脈でユーザーを識別します |
| AF_SYNC | お客様のウェブサイトのドメイン | 1週間 | non-AMP |
|
| af_id | appsflyer.com | 395日 | 3PCが許可されている場合はnon-AMP | アプリ起動およびナビゲーションイベントの文脈でユーザーを識別します |
| af_id | onelink.me | 395日 | 3PCが許可されている場合はnon-AMP | バナー経由のエンゲージメント、またはOneLink経由のエンゲージメント（またはその両方）をアプリ起動イベントに紐付けます |
| amp-afUserid | AMP CDN もしくは あなたのウェブサイトのドメイン | 1年 | AMPで配信されるページ | |
| AF_DEFAULT_MEASUREMENT_STATUS | お客様のウェブサイトのドメイン | 395日 | PBAの同意状態を保存します。ユーザーの同意が得られるまでSDKの動作を停止します。デフォルトでは設定されず、同意管理（consent gating）を構成した場合のみ使用されます | non-AMP |
Web SDKリリースノート
| 日付 | バージョン | 備考 |
|---|---|---|
| 2021-07-01 | 1.0 | クエリパラメータの破棄 |
| 2021-06-01 | 1.0 | コンテンツ・セキュリティ・ポリシー（CSP）の導入 |
| 2020-08-31 | 1.0 | オプトイン / オプトアウト機能の追加 |
| 2020-04-16 | 1.0 | customerUserId() 関数は、一意のCUIDを送信するための IDENTIFY イベントを置き換えます。 |
| 2020-07-30 | 1.0 |
|
Deprecations
- 廃止の通知は、機能またはメソッドのサポートを停止するというAppsFlyerからの事前連絡になります。この機能またはメソッドは、サポート終了日までは機能し続けます。
- この廃止の通知を、コードを変更する機会と見なしてご活用ください。
| 廃止通知日 | サポート終了日 | 詳細 |
|---|---|---|
| 2020-04-16 | 廃止通知 |
非推奨のメソッド：eventTypeを "IDENTIFY" に設定して、顧客ユーザーID (CUID) をイベントパラメータ customUserid で送信しないでください。 現在のメソッド： setCustomerUserId() 関数を使用してCUIDを送信してください。 |