メインコンテンツまでスキップ

自動収集

最終更新 2026/10/03

1. HTML要素のクリックイベントの監視​

ページ上の要素のクリックイベントを追跡したい場合は、trackLinkを使用してHTML要素を一括で監視できます：

ta.trackLink(
  {
    tag: ["a", "button"], //HTMLタグ
    class: ["class1", "class2"], //カスタムのClass名
    id: ["id1", "id2"] //カスタムのID名
  }, //監視する要素のルール
  "click", //追跡するイベントの名前
  {
    production: "製品名",
    name: "要素の識別名"
  } //イベントのプロパティ
);

  • 1つ目のパラメータは監視する要素で、型はJSONオブジェクトです。HTMLタグ、Class、idに基づいて、監視するページ要素を追跡できます。ルールを満たす要素については、イベントリスナーによって要素のクリックイベントを監視し、監視対象の要素がクリックされるとイベントを1件送信します。イベント名とイベントプロパティには、後続の2つのパラメータの値が使用されます

  • 2つ目のパラメータはイベントの名前で、string型です。必ず指定してください

  • 3つ目のパラメータはイベントのプロパティで、型はJSONオブジェクトです。送信するプロパティがない場合は、空のJSONを渡すことができます

  • イベントプロパティ'name'は要素の識別子です。3つ目のパラメータでイベントプロパティ'name'を設定していない場合は、監視対象の要素の属性値を要素の識別子として使用します。値の優先順位は次のとおりです：

    1.要素のカスタム属性'td-name'の値

    2.要素のinnerHTML

    3.要素のvalue

    4.いずれも取得できない場合は'未获取标识'を渡します。

trackLinkは、呼び出された時点でルールに合致する要素にイベントリスナーを設定します。インターフェースの呼び出し後に要素の識別子が変わったり、ルールに合致する要素が新たに生成されたりしても、リスナーが送信するイベントはそれに応じて変わりません。新しく生成された要素を監視する必要がある場合は、要素の生成後にtrackLinkを呼び出してください。

2. ページの表示・非表示イベント​

  • 有効化の方法

    • v1.6.0から、ta_page_showとta_page_hideイベントが追加されました。
    • SDKはデフォルトではこれらのイベントを収集しません。SDK初期化時のconfigで設定できます。
    var config = {
        appId: 'xxx',
        serverUrl: 'xxx',
        autoTrack: {
             //ta_page_showイベントを有効にする
             pageShow: true,
             //ta_page_hideイベントを有効にする
             pageHide: true,
             properties: { // 自動収集のカスタムプロパティ
                 staticKey: 'staticValue'
             }, 
             callback: (eventType) => { // 自動収集のコールバック
                  if (eventType === 'pageShow') {
                      return { appShowKey: 'appShowValue' };
                  } else if (eventType === 'pageHide') {
                      return { appHideKey: 'appHideValue' };
                  } else {
                      return {};
                  }
             }
        }
    };
    • v2.1.2から、ページの表示・非表示イベントで、自動収集のカスタムプロパティと自動収集のコールバックに対応しました。
    • ta_page_hideイベントは、ページが今回表示されてから閉じられるまでの時間をプロパティ#durationに格納します。
    • 最初のta_page_showにユーザー関連の情報を含める必要がある場合は、初期化時に渡すことができます。
    var config = {
        appId: 'appId',
        serverUrl: 'serverUrl',
        send_method: 'ajax',
        accountId: 'xx',//アカウントIDを設定
        distinctId: 'xx',//ゲストIDを設定
        superProperties: {//静的共通プロパティを設定
            super1: 'xx',
            super2: 'xx'
        }
    };

3. ページ閲覧イベント​

AEは、ページ閲覧イベントを自動収集するインターフェースを提供しています。以下のコードを使用するだけで、JS SDKがユーザーのページ閲覧イベントを自動的にアップロードします。イベント名はta_pageviewです：

ta.quick("autoTrack");

v1.6.0から、カスタムプロパティに対応しました。

ta.quick('autoTrack', {
    name: 'test_name',
    time: new Date(),
    pro: [1, 2, 3, 4],
})

このインターフェースを呼び出すと、ページ閲覧イベントがすぐに1回送信されます

2.4.0から、シングルページの自動ページ閲覧イベントに対応しました。有効にする方法は次のとおりです：

var config = {
    appId: 'xxx',
    serverUrl: 'xxx',
    autoTrack: {
         //ta_page_showイベントを有効にする
         pageShow: true,
         //ta_page_hideイベントを有効にする
         pageHide: true,
         //ta_pageviewイベントを有効にする
         pageView: true,
         properties: { // 自動収集のカスタムプロパティ
             staticKey: 'staticValue'
         }, 
         callback: (eventType) => { // 自動収集のコールバック
              if (eventType === 'pageShow') {
                  return { appShowKey: 'appShowValue' };
              } else if (eventType === 'pageHide') {
                  return { appHideKey: 'appHideValue' };
              }else if (eventType === 'pageView') {
                  return { pageViewKey: 'pageViewValue' };
              }else {
                  return {};
              }
         }
    }
};

4. 要素クリックイベント​

2.5.0から、pageClickパラメータを設定することで要素クリックイベントを自動収集できます。イベント名はta_page_clickです。

var config = {
    appId: 'xxx',
    serverUrl: 'xxx',
    autoTrack: {
         //ta_page_showイベントを有効にする
         pageShow: true,
         //ta_page_hideイベントを有効にする
         pageHide: true,
         //ta_pageviewイベントを有効にする
         pageView: true,
         //要素クリックイベントを有効にする
         pageClick:true
    }
};
  • pageClick：trueを設定すると、デフォルトでonclickまたはtd-track-idが設定されたすべての要素のクリックイベントが収集されます。サンプルコードは次のとおりです：
<button onclick="testFun()" td-track-id="buttonId">テストボタン</button>
注記

注意：Vueプロジェクトの要素にはonclick属性がないため、td-track-idを使用して収集対象を絞り込む必要があります

td-track-idを設定すると、クリックイベントの送信時に#element_idが自動的に付与されます。

  • 要素のクリックイベントを無視したい場合は、td-track-ignoreまたはtd-track-ignore="true"で無視できます。サンプルコードは次のとおりです：
    <button onclick="testFun()" td-track-ignore >テストボタン</button>
注記

注意：Reactプロジェクトでは、td-track-ignore="true"を使用して無視する必要があります

このページは役に立ちましたか？
このページの内容