概要:Web SDKを使用してAppsFlyerをWebサイトに実装し、サイトトラフィック、イベント、コンバージョン、収益などを計測しましょう。
Web SDKの利用・実装ガイド
- Web SDK JavaScriptタグ:
- 複数のプラットフォームをまたいだユーザージャーニーを分析するためのPeople-Based Attribution(PBA)ソリューションの一部です。
- Webサイトでのユーザーの訪問とアクションをAppsFlyerプラットフォームに記録します。
- Webサイト向けのプラグインモジュールです。プログラミングは不要で、Webサイトへの訪問ユーザーのOSとブラウザにも依存しません。
- サイズ:40-60Kb程度です。
- AppsFlyerのアプリ向けSDKとともにWeb SDKを実装して、モバイルアプリおよびWeb環境全体でのユーザー行動を記録してマッピングしましょう。
- Web サイトの外部で発生したイベントも、Webのサーバー間イベント API (Web S2S) を使用して記録できます。
Web SDKのWebサイトへの実装
インストールと実装
考慮事項と必要なアクション
実装チェックリスト |
---|
ユーザーの訪問とイベントが確実に記録されるようにするには、Web SDKをWebサイトの全ページに設置する必要があります。 |
ヘッドタグの上部近くにコードスニペットを貼り付けて、ページスコープでできるだけ早くロードするようにしてください。 |
Googleタグマネージャー(GTM)を使用してSDKを実装する場合:
|
スマートバナーと一緒に、もしくはスマートバナーなしでWeb SDKを実装することができます。次の関連するセクションの指示に従ってください。 |
実装の必須要件
テストツールを使用して実装を検証してください |
はじめる前に
- マーケティング担当者がブランドバンドルを作成したことを確認します。
- さらに詳細を確認するには、PBAオンボーディングガイドをご覧ください。
- 考慮事項: 既にスタンドアロンのSmart Banners Web SDKを実装している場合はSmart Banner専用の実装スクリプトを取り除き、Smart BannersとPeople-based Attributionの両方に対応したWeb SDKに変更してください。
次の手順を実行します:
- Web SDKのWeb Dev Keyを入手してください。 注意:これは、アプリのSDK実装時に使用するDev Keyとは異なります。
-
Web Dev Keyを取得するには:
- AppsFlyerの管理画面で、[My Apps] のタブに移動します。
- [ブランドバンドルを表示]をクリックします。
- 必要なWeb Dev Key (WEB_DEV_KEY) をコピーしてください。
-
Web Dev Keyを取得するには:
- スマートバナーも実装する場合は、スマートバナーキーも取得してください。
-
スマートバナーKeyを取得するには:
- AppsFlyerの管理画面内で、[エンゲージメント&ディープリンク] > [スマートバナー] へアクセスしてください。
- 必要な スマートバナーKey をコピーしてください。
-
スマートバナーKeyを取得するには:
- Webサイトのheadタグにスクリプトを追加できる権限が必要です。
- Googleタグマネージャーを使用する場合は、ウェブサイトに統合する必要があります。
次のオプションのいずれかを使用して、Web SDKの実装を進めてください。
JavaScriptコードスニペット
以下のいずれかの方法を使用して、Web SDKを実装してください。
スマートバナーなしでWeb SDKを実装するには:
- Webサイトのすべてのページで、以下の手順を繰り返してください。
- 次のコードスニペットで、前提条件の箇所で指定されたキーを使用して
WEB_DEV_KEY
を書き換えてください。 - 以下のコードスニペットを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",{pba: {webAppId: "WEB_DEV_KEY"}})
</script>
スマートバナーと一緒にWeb SDKを実装するには:
- Webサイトのすべてのページで、以下の手順を繰り返してください。
- 次のコードスニペットで、前提条件の箇所で指定されたキーを使用して、
WEB_DEV_KEY
とYOUR_BANNER_KEY
を書き換えてください。 - このコードスニペットを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: "WEB_DEV_KEY"}, banners: {key: "YOUR_BANNER_KEY"}});
AF('banners', 'showBanner');
</script>
Googleタグマネージャー(GTM)でWeb SDKを実装するには:
- Googleタグマネージャーに移動してください。
- AppsFlyer Web SDK用に、新しいタグを作成してください。
- カスタム HTML のタグタイプを選択してください。
- タグに名前を付けます。
- 以下を実行してください。
- スマートバナー無しでWeb SDKを実装する場合:
- 次のコードスニペットを Tag Configuration のウィンドウに貼り付けてください。
- コード スニペット内の、
WEB_DEV_KEY
を前提条件の箇所で指定されたキーに書き換えてください。
<!-- AppsFlyer web SDK --> <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",{pba: {webAppId: "WEB_DEV_KEY"}}) </script>
- Web SDKをスマートバナーと一緒に実装する場合:
- 次のコードスニペットを Tag Configuration のウィンドウに貼り付けてください。
- コードスニペット内で、前提条件の箇所で指定されたキーを使用して、
WEB_DEV_KEY
とYOUR_BANNER_KEY
を書き換えてください。<!-- AppsFlyer web SDK -->
<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: "WEB_DEV_KEY"}, banners: {key: "YOUR_BANNER_KEY"}}); AF('banners', 'showBanner'); </script>
- スマートバナー無しでWeb SDKを実装する場合:
- 保存をクリックします。
- 以下を実行してください。
- Adobe Experience Cloudでプロパティを作成してください。
- Adobe LaunchのプロパティにWeb SDKを追加してください。
- Adobe LaunchのタグをWebサイトに追加してください。
- Adobe Launch 環境を公開してください。
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サイトに追加してください。
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 rulesを参照してください。
SDKの動作確認
インストールしたら、AppsFlyer Web SDKが訪問者のブラウザーによって呼び出され、メッセージが送信されていることを確認してください。これは、ブラウザで報告されたメッセージネットワーク接続を調べることによって行います。
SDKが読み込まれていることを確認するには:
- ウェブサイトに移動してください。
- デベロッパーコンソールを開きます。
- (A) [Network] タブへ移動してください。
- ページを更新(リロード)します。
- (B) wa.appsflyer で絞り込みます。
- (C) events メッセージを選択してください。
- (D)ヘッダータブで、以下のことを確認してください。
- Request URL が wa.appsflyer.com/events であること。
- site_idがparameter=
WEB_DEV_KEY
をクエリしていること。 - (E) ステータスコードが200であること。
- site_id の値が、ブランドバンドル設定の
WEB_DEV_KEY
の値と同じであることを確認します。- AppsFlyerにて、[設定] > [ブランドバンドル] を開きます。
- [Web dev key] をクリックすると、キーがコピーされます。
- キーを任意の場所(新しいブラウザやノートパッド)に貼り付け、キーを表示します。
- site_id と
WEB_DEV_KEY
が一致していることを確認します。
- SDKが一度だけ読み込まれるようにしてください。何度かSDKをロードすると、SDKの機能が停止する場合があります。
オプトイン/オプトアウトのイベント送信
Web SDKはWebサイト訪問者のイベントデータをAppsFlyerへ送信します。このセクションのガイドに沿って、イベント送信の制御、停止、開始を行なうことが可能です。
特記事項:
- SDK初期状態の設定:SDKがWebページを初期読み込みジにイベントを送信するか、またはイベントの送信を開始する明示的なコマンドがあるまで待機するかを決定します。この設定はWebスニペットに含まれています。
-
明示的なコントロール:イベント送信を停止または開始するために使用します。例えば、データのオプトイン/オプトアウトバナー(別名Cookie同意バナー)を実装する場合、明示的なコマンドをバナーのコントロールに実装して、イベント送信を開始および停止します。明示的なコントロールは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)ポリシーの導入
ウェブマスターの中には、JavascriptをCSPで保護することを要求する人もいます。そのためには、以下のようないくつかのCSPメカニズムを使用することができます。
- self を使用したCSP
- nonce を使用したCSP:自分で生成したランダムなnonce値を使用して、nonceコマンドをscriptタグに追加します。
<script nonce="random value generated by you"> !function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){ .... </script>
クエリパラメータの破棄
AppsFlyerに記録させたくないデータがクエリパラメータに含まれている場合、AppsFlyerプラットフォームに一部またはすべてのクエリパラメータを破棄するよう指示することができます。そうすることで、ローデータやレポートに含めないようにできます。
urls, referrers, header_referer に関連して説明したメソッドを実装することができます。
クエリの破棄オプション
計測方法 | 説明 |
---|---|
すべてのクエリパラメータの破棄 |
af_url=true を url に追加します。 |
特定のクエリ・パラメータの破棄 |
クエリパラメータマスクを設定することで、どのパラメータを廃棄するかを指定します。 例: マスク付きのURL:
破棄後のURL:
|
イベント記録の原則
コンバージョンとスタンダードイベント
- ユーザーイベントはSDKによって記録され、SDKはイベントをAppsFlyerに送信します。
- マーケティング担当者が設定したコンバージョンイベントリストを使用して、AppsFlyerはイベントをスタンダードイベントとコンバージョンイベントに分割します。
- コンバージョンイベントデータはPBAの管理画面でも利用できます。
- コンバージョンおよびスタンダードイベントデータは、 ローデータレポート 内で利用できます。
コンバージョンイベント
- コンバージョンイベントを計測すると、マーケティングに活用できる情報を得ることができます。具体的には、購入・ダウンロード・サインアップ・サブスクリプション等のイベントを指します。
- ユーザーをWebサイトに導いたメディアソースにコンバージョンイベントを紐付けることが、Web SDKにより可能になります。
- 紐付けるメディアソースを特定することで、さまざまなメディアソースによってもたらされるユーザーの質を計測および区別できるようになります。
- コンバージョンイベントでは、収益の計測やROIの計算も可能になります。
- 特定のメディアソースの予算をそのメディアソースのユーザーによる収益と比較するために使用してください。
スタンダードイベント
- スタンダードイベントは、コンバージョンにつながるユーザージャーニーとファネルを評価するのに役立ちます。
- さらに、ユーザーアクティビティを計測し、エンゲージメントの高いユーザーが多いメディアソースをハイライトすることができます。
- ユーザーアクティビティを計測することで、リエンゲージメントキャンペーンを実施するべきユーザーの選定にも活用できます。
イベントの計測
ランディングページが読み込まれたときやユーザーがWebサイト上で何らかの操作したときなど、特定の条件が満たされたときにWeb SDKをトリガーしてイベントを記録してください。計測イベントの例を参照してください。
カスタマーユーザーID(CUID)を使用したユーザーの識別
- AppsFlyerでは、お客様が割り当てた一意のCUIDを使用してWebユーザーを識別します。通常、CUIDはお客様側のバックエンドサーバーによって管理されています。
- モバイルアプリで使用しているものと同じCUIDの値を使用してください。そうすることで、複数のプラットフォームを跨いだユーザー行動の全体像が把握できるようになります。モバイルSDKにおける機能は setCustomerUserId です。 (iOS / Android / Unity)。
-
Web SDKでCUIDを設定するには:
- CUID にアクセスできる最初の時点で CUID を設定します。ほとんどの場合、これはログインまたはサインアップによって、ユーザーを識別できるまで待つ必要があることを意味します。
-
次の例に示すように、JavaScriptを発火させて setCustomerUserId() を呼び出してください。
注意!数値であっても、CUIDは文字列 (string) として送信してください。引用符で囲むようにしてください。
- Web S2Sを実装する場合は、バックエンドでCUIDをWeb visitor IDに関連付けるときにPBAに通知する必要がある場合があることを考慮してください。
- CUIDには、 直接識別できる個人情報(電話番号や電子メールアドレスなど)は含めないでください。
// Associate all current user web events to distinct ID 663274
AF('pba', 'setCustomerUserId' , '663274')
Web SDKのイベントパラメータ
パラメータ名 | 必須 | 説明 |
---|---|---|
eventType | はい |
eventType フォーマット:String このパラメーターには常にEVENTを入力してください。 例:eventType: "EVENT" |
eventName | はい |
Event Name フォーマット:String 例:Purchase(購入), Subscription(定期購読)など |
いいえ |
このパラメーターは非推奨で、廃止日以降(今後発表予定)に削除されます。代わりに、eventValueパラメーターを使用してください。 |
|
|
いいえ |
このパラメーターは非推奨で、廃止日以降(今後発表予定)に削除されます。代わりに、eventValueパラメーターを使用してください。 |
eventRevenue | いいえ |
収益がコンバージョンイベントに紐付けされます。 フォーマット:Float |
eventRevenueCurrency | いいえ |
収益の通貨単位
フォーマット:String |
Event Value | いいえ |
イベントを説明する、イベントパラメータの一覧。このパラメーターを使用して、製品、アイテム価格などの情報をリッチアプリ内イベントで送信してください。
フォーマット: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サービスの性質によって異なります。たとえば、オンラインストアのサービスには、オンラインニュースサービスとは異なる特定のイベントが必要です。以下のシナリオを参照し、どのようなイベントをいつ送信する必要があるのかをご確認ください。
オンラインストア
あなたがオンラインストアを運営しているとしたときに、スタンダードイベントとして計測したいものには以下のようなものがあるでしょう:
- 検索:スタンダードイベント
- カート追加:スタンダードイベント
- カート削除:スタンダードイベント
- 購入:コンバージョンイベント
ニュースサイト
ニュースサイトを運営しているとします。計測したいイベントには次のものがあります。
- サインアップ - コンバージョンイベント
- 定期購読の登録 - コンバージョンイベント
イベントが送信されているかの確認
この章は、ウェブ開発者向けとなります。
PBAのWeb SDK実装テスト:テストイベントをリアルタイムで表示します。
イベントがAppsFlyerへ送信されているかの確認:
- Webサイトを開いてください。
- ブラウザー開発者ツールを開きます。
- Networkタブに切り替えてください。
- イベントを発火させます。
- message で絞り込んでください。
- wa.appsflyer.com で始まるネットワークリクエストを探してください(以下スクリーンショットを参照してください)。
- 以下を確認してください。
- ステータスコードが200であること。
- 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ページが含まれており、Webページはイベントを送信するためにWeb SDKをロードする必要があります。
- ユーザーがリダイレクトされた後にページが読み込まれると、ウィンドウロードメソッドが、AF() APIメソッドを呼び出して、定期購読 (サブスクリプション) のイベントをAppsFlyerに送信します。
ユーザーのウェブサイト上の行動を計測
- ECサイトを運営していて、購入イベントを計測したい場合。
- ユーザーが購入ボタンをクリックすると、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にイベントを送信します。
ランディングページのロード時のイベント計測
- メルマガの定期購読登録ページがあり、その登録数を計測したい場合は、
- 定期購読登録完了後、ユーザーがサンキューページにリダイレクトされるように設定します。
- サンキューページの作成
<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>
上記のコードにより、GTMがロードされ、Web SDKもロードします。そのほかに2つのアクションがこのスクリプトで実行されます。1つ目は、ユーザー情報をサーバーから取得するfunctionです。もう1つは、データをローカルストレージに設定します。GTMはfunctionとlocalStorageの両方にアクセスでき、GTMを使用してfunctionを呼び出し、localStorageにアクセスすることも可能です。
- サブスクリプションを計測するために、サンキューページがロード後に発火するタグを追加します。
- タグに名前をつけ、タグタイプは Custom HTML を選択してください。
- 次のコードを Custom HTMLに設定します。
<script> AF('pba', 'event', {eventType: 'EVENT',
eventValue: {'category' : 'holiday_promotion'}
, eventName: 'subscription'}); </script> -
Advanced Settings の中の Tag Sequencing を開き、タグが発火した後にのみコンバージョンタグが発火するように設定してください。
- コンバージョンタグを発火させるために、トリガーを設定してください。この例では、「Thank You」ページが読み込まれた時にトリガーが発火します。
ユーザーのウェブサイト上の行動を計測
- ECサイトを運営していて、購入イベントを計測したい場合。
- ユーザーが購入ボタンをクリックすると、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 をクリックして、f 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がページによって既にロードされていることを前提としています。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.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",{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が発番されます。
サインアップ完了後のサンキューページの設定
<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.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",{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のメソッドで渡される値です。
-
サインアップ(登録)ページの設定
<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>上記はシンプルな登録フォームのコードになります。フォームが送られると、メールアドレスがローカルストレージに保存されます。ユーザーがサンキューページにくると、ユーザーのメールアドレスがサーバーに送られ、それに紐づくユニークなCUIDを取得することができます。
-
サインアップ完了後のサンキューページの設定
(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",{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トリガーがあるサンキューページです。
サインアップした際に、サーバーがユニークなCUIDを作成することを想定の上、ユニークなCUIDを取得するためにメールアドレスをサーバーへ送信します。
サーバーは、setCustomerUserId() メソッドを使ってユニークなCUIDを返します。
この手順を繰り返して、トリガーとタブを作成してください。 - 定期購読を計測するために、サンキューページがロードされた後に発火するタグを追加してください。
- タグに名前をつけ、タグタイプは “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 を開き、タグが発火した後にのみコンバージョンタグが発火するように設定してください。
- いつコンバージョンタグを発火させるかを示すために、コンバージョンタグ用のトリガーを設定します(下記の例では、サンキューページがロードしたときとなります)。
setCustomerUserIdのfunctionは、ユーザーのログインとサインアップの後など、ユーザーフローのどの段階でも送信できます。AppsFlyerは、最新のCUIDを使用して、過去または未来のタッチポイントとイベントのユーザー情報を更新します。
モバイルアプリの setCustomerUserd 関数で実行したのと同じCUID値を使用してください(モバイルの setCustomerUserId を参照してください:iOS、Android、Unity)
追加情報
Web SDKクッキー
以下の表に記載されているクッキーは、お客様のウェブサイト上でWeb SDKが設定または使用するものです。
表の中では以下のような略語が使われています。
- AMP: Accelerated Mobile Pages
- CDN: コンテンツ・デリバリー・ネットワーク (Content Delivery Network)
- 3PC: サードパーティークッキー
クッキー名 | ドメイン | ライフスパン | 基準 | 詳細 |
---|---|---|---|---|
afUserId | お客様のウェブサイトのドメイン | 395日 | non-AMP | ウェブのロードイベントやナビゲーションイベントでのユーザーの識別 |
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によるサービスページの場合 |
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 |
|
廃止通知
- 廃止の通知は、機能またはメソッドのサポートを停止するというAppsFlyerからの事前連絡になります。この機能またはメソッドは、サポート終了日までは機能し続けます。
- この廃止の通知を、コードを変更する機会と見なしてご活用ください。
廃止通知日 |
サポート終了日 | 詳細 |
---|---|---|
2020-04-16 | 未定 |
非推奨のメソッド:eventType を "IDENTIFY" に設定し、顧客ユーザーID (CUIDD) をイベントパラメータ customUserId で送信する方法。 現在のメソッド:setCustomerUserId() 関数を使用してCUIDを送信する方法。 |