概要 :AppsFlyerのWeb SDKは、Webサイト上でのユーザー行動を記録するための軽量なJavaScriptタグです。これを使用して、Webサイトへの訪問、イベント、コンバージョン、収益などのユーザーアクションを記録し、計測します。

5107_Infographic_Web_S2S_759x270_option1.jpg

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を実装する場合:

  • ページの読み込みごとに、1回だけSDKが読み込まれるようにしてください。
  • GTMの優先度設定を使用してページが読み込まれると すぐにSDKを読み込むように設定してください。

スマートバナーと一緒に、もしくはスマートバナーなしでWeb SDKを実装することが可能です。次の関連するセクションの指示に従ってください。

実装の必須要件

  • 訪問の計測
  • イベントの計測
  • 顧客ユーザーID (CUID) の設定:CUIDをお持ちでない場合、代替案について担当CSMまでお問合せください。 

テストツールを使用して実装を検証してください

はじめる前に

次を実行してください

  • Web SDKのWeb Dev Keyを入手してください。 注意:これは、アプリのSDK実装時に使用するDev Keyとは異なります。
    • Web Dev Keyを取得するには:  
      1. AppsFlyerの管理画面で、[My Apps] のタブに移動します。
      2. [ブランドバンドルを表示]をクリックします。
      3. 必要なWeb Dev Keyをコピーします。
  • スマートバナーも実装する場合は、スマートバナーキーも取得してください。 
    • スマートバナーKeyを取得するには:
      1. AppsFlyerの管理画面内で、[エンゲージメント&ディープリンク] > [スマートバナー] へアクセスしてください。
      2. 必要な スマートバナーKey をコピーしてください。
  • Webサイトのheadタグにスクリプトを追加できる権限が必要です。
  • Googleタグマネージャーを使用する場合は、ウェブサイトに統合する必要があります。

次のオプションのいずれかを使用して、Web SDKの実装を進めてください。 

Native  Google Tag Manager  Adobe Launch Tag Manager 

JavaScriptコードスニペット

以下のいずれかの方法を使用して、Web SDKを実装してください。 

スマートバナーなしでWeb SDKを実装するには:

  1. Webサイトのすべてのページで、以下の手順を繰り返してください。
  2. 次のコードスニペットで、前提条件の箇所で指定されたキーを使用して WEB_DEV_KEY を書き換えてください。
  3. 以下のコードスニペットを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を実装するには:

  1. Webサイトのすべてのページで、以下の手順を繰り返してください。
  2. 次のコードスニペットで、前提条件の箇所で指定されたキーを使用して、 WEB_DEV_KEY YOUR_BANNER_KEY を書き換えてください。
  3. このコードスニペットを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>

SDKの動作確認

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

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

  1. ウェブサイトに移動してください。
  2. デベロッパーコンソールを開きます。

    WebSDK_us-en.jpg

  3. (A) [Network] タブへ移動してください。 
  4. ページを更新(リロード)します。
  5. (B) wa.appsflyer で絞り込みます。
  6. (C) events メッセージを選択してください。 
  7. (D)ヘッダータブで、以下のことを確認してください。
    • Request URL が wa.appsflyer.com/eventsであること。
    • site_idが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の機能が停止する場合があります。

オプトイン/オプトアウトのイベント送信

5578-VistiorPrivacyOptIn_us-en.png

Web SDKはWebサイト訪問者のイベントデータをAppsFlyerへ送信します。このセクションのガイドに沿って、イベント送信の制御、停止、開始を行なうことが可能です。

特記事項:

  • SDK初期状態の設定:SDKがWebページを初期読み込みジにイベントを送信するか、またはイベントの送信を開始する明示的なコマンドがあるまで待機するかを決定します。この設定はWebスニペットに含まれています。
  • 明示的なコントロール:イベント送信を停止または開始するために使用します。例えば、データのオプトイン/オプトアウトバナー(別名Cookie同意バナー)を実装する場合、明示的なコマンドをバナーのコントロールに実装して、イベント送信を開始および停止します。明示的なコントロールはSDK初期状態の設定よりも優先され、次の特性を持つ永続的なファーストパーティCookieを使用します。
    • Webサイトのドメイン上に設定してください。
    • Web SDKによって設定された期間、またはブラウザによって決定された期間が過ぎると期限切れになります。Cookieの有効期限が切れると、Web SDKは初期状態の設定に戻ります。
    • Web SDK Cookieは、ブラウザ固有のCookie設定と干渉せず、常にブラウザ固有の設定が適用されます。
設定 必要なスニペット

[デフォルト] イベントを送信する

Web SDKスニペットに次の変更を加えます。必要に応じて、measurementStatus パラメーターを追加します。

measurementStatus=true に設定します。

{pba: {webAppId: "********-****-****-*****************", measurementStatus:true}

イベントを送信しない

 

Web SDKスニペットに次の変更を加えます。必要に応じて、measurementStatus パラメーターを追加します。

Set measurementStatus=false

{pba: {webAppId: "********-****-****-*****************", measurementStatus:false}

SDK初期状態設定
オプション コマンド
イベント送信開始 (オプトイン) window.AF_SDK.PLUGINS.PBA.enableMeasurement()
イベント送信停止 (オプトアウト) window.AF_SDK.PLUGINS.PBA.disableMeasurement()
明示的コントロール

イベント記録の原則

コンバージョンとスタンダードイベント

  • ユーザーイベントは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には、 直接識別できる個人情報(電話番号や電子メールアドレスなど)は含めないでください。
例: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(定期購読)など

eventCategory いいえ

このパラメーターは非推奨で、廃止日以降(今後発表予定)に削除されます。代わりに、eventValueパラメーターを使用してください。

eventLabel

 

いいえ

このパラメーターは非推奨で、廃止日以降(今後発表予定)に削除されます。代わりに、eventValueパラメーターを使用してください。

eventRevenue いいえ

収益がコンバージョンイベントに紐付けされます。

フォーマット:Float

eventRevenueCurrency いいえ

収益の通貨単位

  • 3文字の ISO 4217 通貨コード
  • デフォルト設定:USD

フォーマット:String

Event Value いいえ
イベントを説明する、イベントパラメータの一覧。このパラメーターを使用して、製品、アイテム価格などの情報をリッチアプリ内イベントで送信してください。
フォーマット:JSON

例: 青色で単価が3.99ドルの、商品(sku)" ABC123"を送信するには

{"sku": "ABC123", “color": "blue", "unit_price":3.99,"currency": "USD"} 

制限: 最大1000文字まで。これを超えないようにしてください。超過したものは切り捨てられます。

イベント計測シナリオ

イベントの例

// 関連する収益を含む靴の購入イベント
AF('pba', 'event', {eventType: 'EVENT', eventName: 'purchase', eventValue {'label' : 'shoes'}, eventRevenue: 12, eventValue: {"key1": 123, "key2": "name"}});

送信するイベントは、Webサービスの性質によって異なります。たとえば、オンラインストアのサービスには、オンラインニュースサービスとは異なる特定のイベントが必要です。以下のシナリオを参照し、どのようなイベントをいつ送信する必要があるのかをご確認ください。

オンラインストア

あなたがオンラインストアを運営しているとしたときに、スタンダードイベントとして計測したいものには以下のようなものがあるでしょう:

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

ニュースサイト

ニュースサイトを運営しているとします。計測したいイベントには次のものがあります。

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

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

この章は、ウェブ開発者向けとなります。

PBAのWeb SDK実装テスト:テストイベントをリアルタイムで表示する

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

  1. Webサイトを開いてください。
  2. ブラウザー開発者ツールを開きます。
  3. ネットワークタブに切り替えます。
  4. イベントを発火させます。
  5. message でフィルタリングしてください。
    pba_af_event.png
  6. wa.appsflyer.com で始まるネットワークリクエストを探してください(以下スクリーンショットを参照してください)。
  7. 以下を確認してください。
    1. ステータスコードが200であること。
    2. Request Payload がイベントのパラメーターと一致していること。

イベントの計測

これらの提供されているコードは例示のみを目的としているので、このコードをそのまま使用しないでください。 

  • 前提条件:イベントが送信されるまでに、Web SDKがページで既にロードされている必要があります。
  • サンプルシナリオには、以下のような場合にイベントを計測するためのコードが含まれています。
    • ランディングページが読み込まれる時:
    • ユーザーがWebサイト上で行動した時:
ネイティブイベント計測 タグマネージャー経由イベント計測

ランディングページのロード時のイベント計測

  • メルマガの定期購読登録のページがあり、その登録数を計測したい場合。
  • 登録完了したユーザーを、予め作成したサンキューページにリダイレクトさせることも可能です。
<html>
    <head>
        <!-- サーバーが新しくサブスクライブしたユーザーに関する詳細を含む応答を返すと想定します -->
        <!--または、localstorageまたはcookieからデータを抽出することもできます
            サブスクリプションプロセス中にデータがいずれかに設定された場合
        -->
        <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>
    <!-- ショッピングカート内の製品に関するデータが
    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にイベントを送信します。
  • イベントが発生する前に、Web SDKのfunctionsタグがロードされていることを確認してください。
  • イベントの値で特殊文字・記号を送信しないようにしてください(例:通貨マークなど)
  • 値は半角50文字以下に設定してください。

サインアップ後のカスタマーユーザーIDの設定

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

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

ユーザーシナリオ:

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

サインアップ(登録)ページの設定

<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のメソッドで渡される値です。

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

モバイルアプリの setCustomerUserd 関数で実行したのと同じCUID値を使用します(モバイルの setCustomerUserId を参照してください:iOSAndroid、Unity

リリースノートと廃止通知

リリースノート

Web SDKリリースノート
日付  バージョン 注:
2020-04-16 1.0 customerUserId() 関数は、一意のCUIDを送信するための IDENTIFY イベントを置き換えます。
2020-07-30 1.0
  • イベントを送信するための明示的な開始/停止コントロール
  • デフォルトの初期状態の変更

廃止通知

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

廃止通知日

サポート終了日 詳細
2020-04-16 未定

非推奨のメソッド:eventType を "IDENTIFY" に設定し、顧客ユーザーID (CUIDD) をイベントパラメータ customUserid で送信する方法。

現在のメソッド:setCustomerUserId() 関数を使用してCUIDを送信する方法。

この記事は役に立ちましたか?