@elastic/behavioral-analytics-javascript-tracker

Javascript 跟踪器

安装

您可以使用 npm 或纱线安装跟踪器 :

yarn add @elastic/behavioral-analytics-javascript-tracker
## OR
npm install @elastic/behavioral-analytics-javascript-tracker

使用量

导入应用程序中的跟踪器 .

import {
  createTracker,
  trackPageView,
  trackSearch,
  trackSearchClick,
} from "@elastic/behavioral-analytics-javascript-tracker";

初始化跟踪器

使用情况 createTracker 用您的 DSN 初始化跟踪器的方法。 您可以在 Collection > 整合下的行为分析 UI 中找到您的 DSN 。 然后您就可以使用跟踪器将事件发送到行为分析中.

import {
  createTracker,
  trackPageView,
  trackEvent,
} from "@elastic/behavioral-analytics-javascript-tracker";

createTracker({
  endpoint: "https://my-endpoint-url",
  collectionName: "website",
  apiKey: "<api-key>",
});

脚印

何时 createTracker 追踪器会在浏览器饼干中存储两个指纹:

• User Token - 用户独有的标识符. 储存在 EA_UID 饼干 默认 时间长度自用户首次访问该网站起为24小时.
• 会话托肯 - 会话的独特标识符 。 储存在 EA_SID 饼干 时间长度自用户最后一次访问该网站起为30分钟.

这些指纹用于在整个会话中识别用户.

更改用户键和时间长度

您可以通过在 token 财务报告和审定财务报表 lifetime 参数 createTracker 方法.

您也可以通过在 session.lifetime 参数 createTracker 方法.

createTracker({
  user: {
    token: () => "my-user-token", // can be a string too
    lifetime: 24 * 60 * 60 * 1000, // 24 hours
  },
  session: {
    lifetime: 30 * 60 * 1000, // 30 minutes
  },
  }
});

采用抽样

你并不总是希望所有的会话 被发送到你的弹性集群。 您可以通过添加引入基于会话的抽样 sampling 参数 createTracker 方法.

如果采样被设定为 1( 默认) , 所有会话都会发送事件 。 如果采样设定为 0, 则不会发送事件 .

createTracker({
  // ... tracker settings
  sampling: 0.3, // 30% of sessions will send events to the server
});

与搜索用户界面( TODO) 整合

如果您使用 搜索用户界面,可以使用 AnalyticsPlugin 锁定自动跟踪搜索事件 。 有关 AnalyticsPlugin 这里。 。 。 .

import AnalyticsPlugin from "@elastic/search-ui-analytics-plugin";
import { getTracker } from "@elastic/behavioral-analytics-javascript-tracker";

const searchUIConfig = {
  ...
  plugins: [AnalyticsPlugin({
    client: getTracker()
  })],
  ...
}

发送页面视图事件

然后可以使用跟踪器跟踪页面视图.

// track a page view

const SearchPage = (props) => {
  useEffect(() => {
    trackPageView({
      // optional
      document: {
        id: "search-page",
        index: "pages",
      },
    });
  }, []);

  return (
    <div>
      <h1>Search Page</h1>
    </div>
  );
};

调度搜索事件

这些事件被用来跟踪用户的搜索行为. 你可以通过呼叫 trackSearch 方法.

下面是用户搜索查询,假设搜索API时如何发送搜索事件的例子.

import { trackSearch } from "@elastic/behavioral-analytics-javascript-tracker";

const getSearchResults = async (query: string) => {
  const results = await api.getSearchResults(query);
  trackSearch({
    search: {
      query: query,
      results: {
        // optional
        items: [],
        total_results: results.totalResults,
      },
    },
  });
};

完整的属性列表可以传递给 trackSearch 方法如下:

trackSearch({
  search: {
    query: "laptop",
    filters: [
      // optional
      { field: "brand", value: ["apple"] },
    ],
    page: {
      //optional
      current: 1,
      size: 10,
    },
    results: {
      // optional
      items: [
        {
          document: {
            id: "123",
            index: "products",
          },
          page: {
            url: "http://my-website.com/products/123",
          },
        },
      ],
      total_results: 100,
    },
    sort: {
      name: "relevance",
    },
    search_application: "website",
  },
});

调度搜索点击事件

这些事件用于跟踪用户的搜索点击行为. 以追踪用户在进行搜索后点击的内容。 你可以通过呼叫 trackSearchClick 方法.

以下是用户点击搜索结果时如何发送搜索点击事件的例子,用于假设搜索API.

import { trackSearchClick } from "@elastic/behavioral-analytics-javascript-tracker";

trackSearchClick({
  // document that they clicked on
  document: { id: "123", index: "products" },
  // the query and results that they used to find this document
  search: {
    query: "laptop",
    filters: [
      { field: "brand", value: ["apple"] },
      { field: "price", value: ["1000-2000"] },
    ],
    page: {
      current: 1,
      size: 10,
    },
    results: {
      items: [
        {
          document: {
            id: "123",
            index: "products",
          },
          page: {
            url: "http://my-website.com/products/123",
          },
        },
      ],
      total_results: 100,
    },
    sort: {
      name: "relevance",
    },
    search_application: "website",
  },
});

共同问题

当我试图发出一个事件, 我得到以下错误: behavioral Analytics: Tracker not initialized.

这意味着追踪器还没有被初始化. 您需要初始化跟踪器才能发送事件 。 你可以打给 createTracker 方法.

API 方法

createTracker

以给定的配置初始化跟踪器。 在使用跟踪器之前,必须使用这种方法.

import { createTracker } from "@elastic/behavioral-analytics-javascript-tracker";

createTracker({
  endpoint: "https://my-analytics-dsn.elastic.co",
  collectionName: "website",
  apiKey: "<api-key>",
});

示例

createTracker({});

参数

跟踪选项

追踪器的选项 .

trackPageView

跟踪页面视图事件.

trackPageView();

示例

import { trackPageView } from "@elastic/behavioral-analytics-javascript-tracker";

trackPageView({
  document: {
    id: "123",
    index: "products",
  },
});

参数

trackSearch

跟踪自定义事件.

trackSearch(
  properties: SearchEventInputProperties
)

示例

import { trackSearch } from "@elastic/behavioral-analytics-javascript-tracker";

trackSearch({
  search: {
    query: "laptop",
    filters: [
      { field: "brand", value: ["apple"] },
      { field: "price", value: ["1000-2000"] },
    ],
    page: {
      current: 1,
      size: 10,
    },
    results: {
      items: [
        {
          document: {
            id: "123",
            index: "products",
          },
          page: {
            url: "http://my-website.com/products/123",
          },
        },
      ],
      total_results: 100,
    },
    sort: {
      name: "relevance",
    },
    search_application: "website",
  },
});

trackSearchClick

跟踪与搜索事件有关的点击。 使用的实例是用户点击搜索查询的结果.

肯定有一个 document 或者说 page 属性。 最佳两种.

trackSearchClick(
  properties: SearchClickEventInputProperties
)

示例

import { trackSearchClick } from "@elastic/behavioral-analytics-javascript-tracker";

trackSearchClick({
  document: {
    id: "123",
    index: "products",
  },
  page: {
    url: "http://my-website.com/products/123",
    title: "My Product",
  },
  search: {
    query: "laptop",
    filters: [
      { field: "brand", value: ["apple"] },
      { field: "price", value: ["1000-2000"] },
    ],
    page: {
      current: 1,
      size: 10,
    },
    results: {
      items: [
        {
          document: {
            id: "123",
            index: "products",
          },
          page: {
            url: "http://my-website.com/products/123",
          },
        },
      ],
      total_results: 100,
    },
    sort: {
      name: "relevance",
    },
    search_application: "website",
  },
});

参数

getTracker

返回跟踪器实例 。 用于与搜索用户界面分析插件集成时有用 .

import { getTracker } from "@elastic/behavioral-analytics-javascript-tracker";

const tracker = getTracker();