@absmartly/vue2-sdk 中文文档教程

Question

A/B Smartly Vue2 SDK

A/B Smartly - Vue2 SDK

Compatibility

A/B Smartly Vue2 SDK 是 A/B Smartly JavaScript SDK

它需要 Vue2 版本 2.6.0+，并受 IE 10+ 和所有其他主要浏览器的支持。

注意：IE 10 本身不支持 Promises。 如果你的目标是 IE 10，你必须包含像 es6-promise 或 rsvp。

Installation

npm

npm install @absmartly/vue2-sdk --save

Directly in the browser

您可以通过 unpkg.com 在您的 HTML 代码中直接包含优化的预构建包。

只需将以下代码添加到您的 head 部分即可包含最新发布的版本。

    <script src="https://unpkg.com/@absmartly/vue2-sdk"></script>

Getting Started

在尝试以下代码之前，请按照安装 说明进行操作：

Import the SDK into your project

const absmartly = require('@absmartly/vue2-sdk');
// OR with ES6 modules:
import absmartly from '@absmartly/vue2-sdk';

Basic initialization

此示例假定已在 A/B Smartly Web 控制台中创建了一个 Api 密钥、一个应用程序和一个环境。

Vue2 SDK 是我们 Javascript SDK 的精简包装器。 请查看 A/B Smartly Javascript SDK 文档，了解有关用于初始化的其他选项的详细信息。

// somewhere in your application initialization code, before mounting your Vue application
Vue.use(absmartly.ABSmartlyVue, {
    sdkOptions: {
        endpoint: 'https://sandbox-api.absmartly.com/v1',
        apiKey: ABSMARTLY_API_KEY,
        environment: "production",
        application: "website",
    },
    context: {
        units: {
            session_id: '5ebf06d8cb5d8137290c4abb64155584fbdb64d8',
        },
    },
    attributes: {
        user_agent: navigator.userAgent
    },
    overrides: {
        exp_test_development: 1
    }
});

这使得 $absmartly 扩展在每个 Vue 实例中都可用。

Initializing with pre-fetched Context data

在使用 A/B Smartly 进行全栈实验时，我们建议只在服务器端创建一次上下文。 创建上下文涉及到 A/B Smartly 事件收集器的往返。 我们可以通过发送嵌入在第一个文档中的服务器端数据来避免在客户端重复往返，例如，通过在模板上渲染它。 然后我们可以直接用它在客户端初始化A/B Smartly上下文。 Vue2 SDK 也支持这种优化的用法。

在此示例中，我们假设变量 prefectedContextData 包含先前注入的预取数据。

// somewhere in your application initialization code, before mounting your Vue application
Vue.use(absmartly.ABSmartlyVue, {
    sdkOptions: {
        endpoint: 'https://sandbox-api.absmartly.com/v1',
        apiKey: ABSMARTLY_API_KEY,
        environment: "production",
        application: "website"",
    },
    context: {
        units: {
            session_id: '5ebf06d8cb5d8137290c4abb64155584fbdb64d8',
        },
    },
    attributes: {
        user_agent: navigator.userAgent
    },
    data: prefetchedContext, // assuming prefectedContext has been inject
});

Selecting a treatment

选择治疗的首选方法是使用 Treatment 组件，每个治疗都有一个命名和作用域的插槽。

插槽选择规则如下：

• 如果上下文未就绪：

  • If the loading slot exists, select it
  • Otherwise, select the default slot

• 否则，如果上下文已就绪：

  • If a slot with the treatment alias (A, B, C, …) exists, select it
  • Otherwise, if a slot with the treatment index exists, select it
  • Otherwise, select the default

• 如果所选插槽不存在，则不会呈现任何内容

使用处理别名

<treatment name="exp_test_experiment">
    <template #A>
        <my-button></my-button>
    </template>
    <template #B="{ config }">
        <my-button :color="config.color"></my-button>
    </template>
    <template #loading>
        <my-spinner></my-spinner>
    </template>
</treatment>

的示例： 使用处理索引的

<treatment name="exp_test_experiment">
    <template #0>
        <my-button></my-button>
    </template>
    <template #1="{ config }">
        <my-button :color="config.color"></my-button>
    </template>
    <template #2="{ config }">
        <my-other-button :color="config.color"></my-other-button>
    </template>
    <template #loading>
        <my-spinner></my-spinner>
    </template>
</treatment>

示例： 使用只有 default 插槽：

<treatment name="exp_test_experiment">
    <template #default="{ config, treatment, ready }">
        <template v-if="ready">
            <my-button v-if="treatment == 0"></my-button>
            <my-button v-else-if="treatment == 1" :color="config.color"></my-button>
            <my-other-button v-else-if="treatment == 2" :color="config.color"></my-other-button>
        </template>
        <template v-else><my-spinner></my-spinner></template>
    </template>
</treatment>

作用域插槽属性包含有关 A/B Smartly 上下文和所选处理的信息：

{
  "treatment": 1,
  "config": {
    "color": "red"
  },
  "ready": true,
  "failed": false
}

如果实验未运行，或者上下文创建失败，插槽将使用以下属性：

{
  "treatment": 0,
  "config": {},
  "ready": true,
  "failed": false
}

Setting context attributes

可以在脚本中设置属性。

this.$absmartly.attribute('user_agent', navigator.userAgent);

this.$absmartly.attributes({
    customer_age: 'new_customer',
});

或者直接在模板中使用 Treatment 组件的 attributes 属性。

<treatment name="exp_test_experiment" :attributes="{customer_age: 'returning'}">
    <template #default="{ config, treatment, ready }">
        <template v-if="ready">
            <my-button v-if="treatment == 0"></my-button>
            <my-button v-else-if="treatment == 1" :color="config.color"></my-button>
            <my-other-button v-else-if="treatment == 2" :color="config.color"></my-other-button>
        </template>
        <template v-else><my-spinner></my-spinner></template>
    </template>
</treatment>

Tracking a goal achievement

目标是在 A/B Smartly 网络控制台中创建的。

this.$absmartly.track("payment", 1000);

Finalizing

finalize() 方法将确保所有事件都已发布到 A/B Smartly 收集器，如 publish()，并且还将“密封”上下文，抛出一个如果调用任何可以生成事件的方法，则出错。

await this.$absmartly.finalize().then(() => {
    window.location = "https://www.absmartly.com"
})

Further info

详情请参考A/B Smartly JavaScript SDK。

About A/B Smartly

A/B Smartly 是一流的本地全堆栈实验平台的领先提供商，面向希望在开发过程中尽快自信地部署功能的工程和产品团队他们。 A/B Smartly 的实时分析可帮助工程和产品团队确保新功能将改善客户体验，而不会破坏或降低性能和/或业务指标。

Have a look at our growing list of clients and SDKs:

• JavaScript SDK
• Vue2 SDK
• PHP SDK