概要 :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を実装することが可能です。次のセクションの指示に従ってください。

前提条件

  • 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 websdkが訪問者のブラウザーによって呼び出され、メッセージが送信されていることを確認してください。これは、ブラウザで報告されたメッセージネットワーク接続を調べることによって行います。

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

  1. ウェブサイトに移動してください。
  2. ブラウザのデベロッパーコンソールを開いてください。 WebSDK.jpg
  3. (A) Network タブへ移動してください。 
  4. ページを更新(リロード)します。
  5. (B)appsflyerでフィルターしてください。
  6. (C)message eventを選択してください。 
  7. (D)ヘッダータブで、以下のことを確認してください。
    • Request URL  が wa.appsflyer.com/messageであること。
    • site_idがparameter= WEB_DEV_KEYをクエリしていること。
    • ステータスコードが200であること。
  8. SDKが一度だけ読み込まれるようにしてください。何度かSDKをロードすると、SDKの機能が停止する場合があります。

イベント記録の原則

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

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

コンバージョンイベント

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

スタンダードイベント

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

イベントの計測

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

カスタマーユーザーID(CUID)を使用したユーザーの識別

  • AppsFlyerでは、お客様が割り当てた一意のCUIDを使用してWebユーザーを識別します。通常、CUIDはお客様側のバックエンドサーバーによって管理されています。
  • モバイルアプリで使用しているものと同じCUIDの値を使用してください。そうすることで、複数のプラットフォームを跨いだユーザー行動の全体像が把握できるようになります。モバイルSDKにおける機能は setCustomerUserIdです。 (iOSAndroid、 Unity)
  • Web SDKで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 いいえ

イベントグループ

フォーマット:String

例:Important / Normal / NewYear Promoなど

eventLabel いいえ

データラベリングは、product_idの受け渡し、A/Bテストなどフレキシブルに使用できます。
このデータはローデータレポートで取得可能です。

  • イベントラベルパラメーターは、オブジェクトではなく文字列を設定できます。主要なパラメーター値を複数受け入れるモバイルSDKのイベント値パラメーターとは異なります。
  • リッチアプリ内イベントを送信するのではなく、ラベル付けの目的でこのパラメーターを使用します。

フォーマット:String

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', eventLabel: 'shoes', eventRevenue: 12, eventValue: {{"key1": 123, "key2": "name"}}}});

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

オンラインストア

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

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

ニュースサイト

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

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

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

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

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

  1. Webサイトを開いてください。
  2. ブラウザー開発者ツールを開きます。
  3. ネットワークタブに切り替えます。
  4. イベントを発火させます。
  5. message でフィルタリングしてください。
    pba_af_event.png
  6. destination 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 -->
        <!-- 他には、ローカルストレージかクッキーよりデータを取得できます。
データがサブスクリプションプロセスで設定される場合などが対象となります。
        -->
        <script>window.onload = function(){
            AF('pba', 'event', {eventType: 'EVENT', eventCategory: 'conversion',eventName: 'subscription', eventLabel: 'newsletters'});
        }
        </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',eventCategory: 'conversion', 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の仕様について:iOS, Android, Unity)

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

リリースノート

Web SDKリリースノート
日付  バージョン 注:
 2020-04-16 1.0 ユニークなCUIDを送信する際に使用するのが、 IDENTIFY のイベントから customerUserId() のfunctionに置き換えられます。

廃止通知

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

廃止通知日

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

非推奨方法: customUserid のイベントパラメータ内でカスタマーユーザーID(CUID)を送信するときに、eventType " IDENTIFY " に設定すること。

現在のメソッド: setCustomerUserId() のfunctionを使用してCUIDを送信してください。

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