添加匿名使用报告

将匿名使用跟踪添加到您的插件中，以便将描述您的插件如何被使用的报告事件发送到由您的 Grafana 服务器管理员配置的跟踪系统。

事件报告

在本节中，我们将展示如何跟踪查询编辑器的使用数据并从分析服务接收报告。

示例查询编辑器

假设您有一个类似于以下示例的 QueryEditor。它有一个 CodeEditor 字段，您可以在其中编写查询，以及一个查询类型选择器，以便您可以选择期望返回的查询结果类型

import React, { ReactElement } from 'react';
import { InlineFieldRow, InlineField, Select, CodeEditor } from '@grafana/ui';
import type { EditorProps } from './types';

export function QueryEditor(props: EditorProps): ReactElement {
  const { datasource, query, onChange, onRunQuery } = props;
  const queryType = { value: query.value ?? 'timeseries' };
  const queryTypes = [
    {
      label: 'Timeseries',
      value: 'timeseries',
    },
    {
      label: 'Table',
      value: 'table',
    },
  ];

  const onChangeQueryType = (type: string) => {
    onChange({
      ...query,
      queryType: type,
    });
    runQuery();
  };

  const onChangeRawQuery = (rawQuery: string) => {
    onChange({
      ...query,
      rawQuery: type,
    });
    runQuery();
  };

  return (
    <>
      <div>
        <CodeEditor
          height="200px"
          showLineNumbers={true}
          language="sql"
          onBlur={onChangeRawQuery}
          value={query.rawQuery}
        />
      </div>
      <InlineFieldRow>
        <InlineField label="Query type" grow>
          <Select options={queryTypes} onChange={onChangeQueryType} value={queryType} />
        </InlineField>
      </InlineFieldRow>
    </>
  );
}

使用 usePluginInteractionReporter 跟踪使用情况

假设您想跟踪时间序列查询和表查询之间的使用情况。

您需要做的是将 usePluginInteractionReporter 添加到获取一个接受两个参数的报告函数

• 必需：一个以 grafana_plugin_ 开头的事件名称。它用于识别所进行的交互。
• 可选：附加上下文数据。在我们的例子中，这是查询类型。

import React, { ReactElement } from 'react';
import { InlineFieldRow, InlineField, Select, CodeEditor } from '@grafana/ui';
import { usePluginInteractionReporter } from '@grafana/runtime';
import type { EditorProps } from './types';

export function QueryEditor(props: EditorProps): ReactElement {
  const { datasource, query, onChange, onRunQuery } = props;

  const report = usePluginInteractionReporter(); //  get the report function

  const queryType = { value: query.value ?? 'timeseries' };
  const queryTypes = [
    {
      label: 'Timeseries',
      value: 'timeseries',
    },
    {
      label: 'Table',
      value: 'table',
    },
  ];

  const onChangeQueryType = (type: string) => {
    onChange({
      ...query,
      queryType: type,
    });
    runQuery();
  };

  const onChangeRawQuery = (rawQuery: string) => {
    onChange({
      ...query,
      rawQuery: type,
    });

    //  send this report with two arguments
    report('grafana_plugin_executed_query', {
      query_type: queryType.value,
    });

    runQuery();
  };

  return (
    <>
      <div>
        <CodeEditor
          height="200px"
          showLineNumbers={true}
          language="sql"
          onBlur={onChangeRawQuery}
          value={query.rawQuery}
        />
      </div>
      <InlineFieldRow>
        <InlineField label="Query type" grow>
          <Select options={queryTypes} onChange={onChangeQueryType} value={queryType} />
        </InlineField>
      </InlineFieldRow>
    </>
  );
}

来自分析服务的返回数据

当您使用 usePluginInteractionReporter 时，返回给您的报告函数会自动将关于您正在跟踪的插件的相关上下文数据附加到事件上。

在我们的例子中，以下信息被发送到由 Grafana 服务器管理员配置的分析服务

{
  type: 'interaction',
  payload: {
    interactionName: 'grafana_plugin_executed_query',
    grafana_version: '9.2.1',
    plugin_type: 'datasource',
    plugin_version: '1.0.0',
    plugin_id: 'grafana-example-datasource',
    plugin_name: 'Example',
    datasource_uid: 'qeSI8VV7z', // will only be added for datasources
    query_type: 'timeseries'
  }
}