CTA 组件使用

概述

CTA 组件使用的操作说明。

开始之前

[!IMPORTANT]
使用有权访问本功能的账号。按下方步骤准备对应的业务数据或配置资料。

操作说明

CTA 是“行动引导”组件。它可以在用户下载、试用、咨询、观看内容等关键动作前，先提示用户、收集信息或完成身份验证；条件满足后，再继续执行下载、打开页面或其他后续动作。

例如：用户点击“下载方案”后，先填写姓名和手机号，提交成功后才打开文件；或者先关注公众号，再填写表单，完成后才允许下载。

一个 CTA 组件可以被多个内容重复使用。修改 CTA 前，要先确认它被哪些内容引用，避免一次修改影响多篇文章、多个产品或多个微页面。

适用场景

• 下载白皮书、方案、产品资料前收集线索；
• 申请试用、预约演示或提交咨询前收集联系方式；
• 查看视频、文章或其他受限内容前进行身份验证；
• 需要先关注公众号，再填写表单后继续操作；
• 在官网等外部页面中复用营销通的留资流程。

创建 CTA 组件

1. 进入内容中心 > CTA 组件。
2. 点击新建 CTA 组件。
3. 填写组件名称，建议包含使用场景，例如“白皮书下载前留资”。
4. 设置用户需要完成的动作：提示说明、信息填写、身份验证或组合验证。
5. 设置完成后的后续动作，例如打开文件、跳转页面、继续播放或进入下一步。
6. 保存后先使用测试账号验证完整流程。

[!NOTE]
CTA 的名称应让运营人员一眼看懂用途，不建议只使用“CTA-01”“下载验证”等无法区分业务场景的名称。

将 CTA 应用到内容中

CTA 可以应用在以下位置：

基本操作步骤：

1. 打开需要配置的微页面、文章、公司产品或名片。
2. 找到下载、试用、咨询或其他目标动作。
3. 选择已经创建的 CTA 组件。
4. 确认 CTA 完成后要执行的动作。
5. 保存并预览，分别测试未完成验证和已完成验证的用户路径。

组合验证的使用建议

组合验证适用于确实需要多个前置条件的场景，例如“先关注公众号，再填写表单”。设置时应：

• 在提示文案中说清楚用户要完成什么；
• 只收集后续业务确实需要的信息；
• 说明提交信息的用途；
• 测试中断、重复提交和已完成验证后的访问路径；
• 避免设置过多步骤，降低用户完成率。

修改和复用 CTA 时的注意事项

• 一个 CTA 被多个内容引用时，修改会影响所有引用它的内容；
• 如果只是某一篇内容需要不同规则，建议新建 CTA，不要直接修改公共 CTA；
• 调整表单字段或后续动作后，要重新测试下载、跳转和数据写入；
• 已经用于正式推广的 CTA，不要随意删除或更换关键动作；
• 运营人员应记录 CTA 的使用场景和负责人，便于后续维护。

官网接入 CTA SDK

CTA SDK 适用于官网或其他外部系统中的“下载”“申请试用”“咨询”等按钮。它不是普通运营人员在微页面编辑器中的操作，而是由开发人员完成：

1. 运营人员在营销通中创建并确认 CTA 组件；
2. 将 CTA 编号、触发按钮、完成后的后续动作交给开发人员；
3. 开发人员在官网中引入官网 SDK 和 CTA SDK；
4. 开发人员将官网按钮与 CTA 触发动作绑定；
5. 测试留资、验证完成、失败提示和后续跳转；
6. 运营人员验收线索是否正确进入 CRM。

[!IMPORTANT]
不要把示例代码直接复制到正式官网使用。SDK 版本、CTA 编号、官网 SDK、域名和接口配置需要由开发人员按实际环境确认。

相关内容：

• 微页面 HTML 组件编写规则
• 外部内容对接

CTA 组件功能说明

概览

Call-to-Action（CTA）“呼吁行动”，旨在引导用户执行特定的操作，例如了解更多、联系客服、申请试用、下载文件等。CTA 通过吸引用户的注意力和提供明确的指导，帮助企业实现其营销目标，如获取更多潜客线索、增加销售额、提高转化率等。营销通中可以设置用户信息验证、引导及信息收集组件，可以挂载在营销通生成内容上，也通过 SDK 方式对接到第三方系统的内容中，用户在进入页面、或者点击某按钮后，弹出引导内容，也可以配置需要进行留咨或授权身份后才能进行下一步动作，比如点击下载按钮后，需要客户提交表单后才能下载。同时支持组合型验证，如需要先关注公众号，并且再提交表单后才能下载文件。一个 CTA 组件，可以被多个内容应用  。

1 新建 CTA 组件

2 CTA 组件详情

3 CTA 组件应用

1 微页面全局应用

2 微页面文件下载列表应用

3 微页面按钮及图片点击后动作

4 文章中应用

5 产品中应用

6 名片中应用

7 SDK 应用

使用场景：

主要用于官网中收集客户信息

1. 在客户需要下载文件、看视频、看文章等场景下，需要留咨后才能继续完成动作

//ctaSDK使用依赖官网sdk，请先完成官网sdk引入
window.addEventListener('load',function () {
    var cta = FsYxt.CtaSDK({
        // 需要更换营销通中配置的ctaId
        ctaId: "bf8567cc59b34692ace3456c2a993d2114",
        autoExecuteOnReady: false,
        hideEntryBtn: true,
    })

    //cta 初始化成功回调
    cta.onReady(function () {
        console.log('cta onReady');
        //需要更换自己的触发按钮动作
        var button = document.getElementById('button');
        if (button) {
            console.log('cta onReady button');
            button.addEventListener('click', function () {
                cta.start();
            });
        }
    })

    //执行完成所有行为回调
    cta.onActionComplete(function () {
        console.log('cta action complete');
        //需要执行自己的后动作，比如下载文件
        window.location.href = '文件下载地址';
    });
    //执行失败回调
    cta.onError(function () {
        console.log('cta error');
    });
})

2. 官网全局的申请试用，咨询按钮等，点击后出现留咨表单，引导客户留咨

//ctaSDK使用依赖官网sdk，请先完成官网sdk引入

window.addEventListener('load',function () {
    var cta = FsYxt.CtaSDK({
        // 需要更换营销通中配置的ctaId
        ctaId: "bf8567cc59b34692ace3456c2a9913d2114",
        autoExecuteOnReady: false,
        hideEntryBtn: true,
    })
})

附录：CTA SDK 技术文档

• 简介
• 安装
• 快速开始
• API 参考
• 使用示例
• 常见问题

简介

CTA (Call To Action) SDK 是一个用于在网页中嵌入引导组件的 JavaScript SDK。

安装

1. 在 HTML 文件中引入 SDK：

//ctaSDK使用依赖官网sdk，请先完成官网sdk引入
(function () {
  var s = document.createElement("script");
  s.type = "text/javascript";
  s.charset = "utf-8";
  s.src = "https://www.fxiaoke.com/ec/h5-landing/release/ctaSDK-1.0.0.js?id=" + Math.random();
  document.getElementsByTagName("head")[0].appendChild(s);
})();

2. 确保全局变量 FsYxt 可用，SDK 会挂载在该对象下。

快速开始

基本使用示例：

const cta = FsYxt.CtaSDK({
    ctaId: "your-cta-id"
});

// 监听准备就绪事件
cta.onReady(() => {
    console.log('CTA 组件已准备就绪');
});

// 监听错误事件
cta.onError((error) => {
    console.log('发生错误：', error);
});

API 参考

构造函数选项

FsYxt.CtaSDK(options)

样式配置选项

actionStyle 对象包含以下配置项：

实例方法

onReady(callback)
监听组件准备就绪事件

cta.onReady(() => {
    console.log('组件已就绪');
});

onError(callback)
监听错误事件

cta.onError((error) => {
    console.log('发生错误：', error);
});

start()
手动触发 CTA 引导组件

cta.start();

onActionComplete(callback)
监听引导完成事件

cta.onActionComplete(() => {
    console.log('引导完成');
});

onActionStep(callback)
监听引导步骤事件

cta.onActionStep((step) => {
    console.log('当前步骤：', step);
});

destroy()
销毁 CTA 实例

cta.destroy();

使用示例

基础用法

const cta = FsYxt.CtaSDK({
    ctaId: "your-cta-id"
});

自定义按钮触发和样式

const cta = FsYxt.CtaSDK({
    ctaId: "your-cta-id",
    autoExecuteOnReady: false,
    hideEntryBtn: true,
    actionStyle: {
        position: 'bottom-right',
        maskOpacity: 0.8,
        width: '500px',
        borderRadius: '16px'
    }
});

cta.onReady(() => {
    const button = document.getElementById('custom-button');
    button.addEventListener('click', () => {
        cta.start();
    });
});

完整的生命周期管理

const cta = FsYxt.CtaSDK({
    ctaId: "your-cta-id",
    marketingEventId: "your-marketing-event-id"
});

cta.onReady(() => {
    console.log('CTA 已就绪');
});

cta.onActionStep((step) => {
    console.log('当前步骤：', step);
});

cta.onActionComplete(() => {
    console.log('引导完成');
    // 执行后续操作
});

cta.onError((error) => {
    console.log('发生错误：', error);
});

// 不再需要时销毁实例
// cta.destroy();

多实例使用

// 第一个实例
const cta1 = FsYxt.CtaSDK({
    ctaId: "first-cta-id"
});

// 第二个实例
const cta2 = FsYxt.CtaSDK({
    ctaId: "second-cta-id",
    autoExecuteOnReady: false
});

常见问题

Q1: 如何在页面加载完成后初始化多个 CTA？
使用 window.addEventListener('load', ...) 而不是 window.onload：

window.addEventListener('load', () => {
    FsYxt.CtaSDK({
        ctaId: "first-cta-id"
    });
});

window.addEventListener('load', () => {
    FsYxt.CtaSDK({
        ctaId: "second-cta-id"
    });
});

Q2: 如何确保 CTA 组件在特定条件下才执行？
使用 autoExecuteOnReady: false 并手动控制启动时机：

const cta = FsYxt.CtaSDK({
    ctaId: "your-cta-id",
    autoExecuteOnReady: false
});

cta.onReady(() => {
    // 检查条件
    if (yourCondition) {
        cta.start();
    }
});

Q3: 如何处理错误情况？
始终添加错误处理回调：

cta.onError((error) => {
    console.error('CTA 错误：', error);
    // 实现错误恢复逻辑
});

Q4: 如何在单页面应用（SPA）中使用？
在路由变化时记得销毁不需要的实例：

// 组件卸载时
componentWillUnmount() {
    if (this.cta) {
        this.cta.destroy();
    }
}

预期结果与验证

完成上述操作后，在对应页面检查处理结果，并与本步骤的目标核对。

常见问题与故障排除

无法继续操作时，先核对上文说明的条件和输入信息；遇到权限提示时，请管理员确认访问权限。