高效设计企业营销系统的3种方案复盘

嗨, 大家好, 我是徐小夕, 之前分享了很多可视化低代码相关的技术实践和开源项目, 今天继续和大家分享一下如何通过可视化搭建技术设计高效的企业营销配置系统.

背景

随着技术的飞速发展和行业高内聚的竞争内卷, 企业数字化转型更加迫在眉睫. 很多传统企业为了提高盈利能力, 在流量,转化和口碑上投入了巨大的成本, 比如:

• 招募(或扩大)优质销售团队

• 广告投放(为了更多的流量和转化)

• 系统搭建(更高效的管理企业进销存)

• 策略运营分析(更精准的投流获客和产品品牌力打造)

• 其他企业策略目标

为了让不同能力团队共享信息, 我们需要利用信息化技术来设计一套“粘合剂”, 让“企业发动机”高效运转. 这个“粘合剂” 就是我们说的数字(智)化营销系统. 它不会侵入到企业的具体业务中, 而是通过连接企业数字资产, 实现对外品宣,获客和需求反馈. 更多充当的是门户和反馈系统的作用.

设计实现方案

为了实现营销数字化系统, 我们一般会采用三种方案:

• 传统业务开发型

• 配置化营销中心

• 可视化营销搭建平台

1. 传统业务开发型

早期我们更多的企业营销宣传页面大多采用这种模式, 面向营销活动或者业务活动设计针对性的页面. 但是随着企业规模的壮大和活动需求规模化之后, 普通页面开发意味着人力成本的线性增加, 我们需要通过“堆人”来实现业务需求.

从前端技术侧, 为了进一步提高研发效率, 前端程序员不得不去思考如何复用的问题. 但是实际情况却不容乐观. 从我个人研发经验的角度, 对定制型营销场景开发我们可以采用如下措施提高研发效率:

1.1 搭建营销组件库 / 业务sdk抽象

我们可以在开发之初就定好一个可扩展的技术方案, 针对活动/营销页面 以组件化的方式开发, 然后将业务功能沉淀为可复用的技术资产. 我们可以用vue / react等技术框架来搭建组件库工程, 这块我之前写过一篇 从零搭建前端组件库系统 的工程, 大家感兴趣可以参考一下.

更近一步的, 任何页面都离不开通用能力和埋点监控, 如下:

这些 工具函数 和 业务sdk 未来会在不用需求页面中反复使用, 所以我们也可以更进一步的封装和抽象.

1.2 搭建通用脚手架, 实现基础工程和业务方案的复用(配置化)

通用脚手架可以让前端团队更高效的复用技术资产, 比如不同技术同事开发不同的需求时, 我们能使用前人积累的技术实践, 省去了前期的调研和试错成本. 一个成熟的前端脚手架包括:

• 基础的项目工程配置

• 路由配置(baseUrl, public, outPut等)

• 分包策略

• 模块加载器Loader(比如对svg, png, pdf, excel, css等处理)

• 代码插件(代码压缩, 分割, 按需打包, hot reload等)

• 服务proxy支持

• 微前端配置等

当然我们还可以参考市面上比较成熟的前端工程解决方案, 比如 umi, vite等.

1.3 建立可配置的模版库

虽然我们用定制代码的方案无法很轻易的实现类似配置平台或者搭建平台的高可配性, 但是我们仍然可以设计一种伪配置化方案. 类似下面的配置:

{
  "title": "第3期企业数字化宣讲",
  "layout": {
    "header": [],
    "main": [],
    "footer": []
  },
  "share_icon": "微信分享icon",
  "share_desc": "Dooring,  让页面制作更简单",
  "track": true // 是否启用埋点
  "api_path": "https://xxxx.com"
}

然后在页面中设计一套模版引擎, 来动态读取json配置, 需要自定义的部分即可自定义开发. 我们通过这种方式, 就可以用一套基础模式, 快速生成自定义的页面模版, 从而提高页面搭建效率.

在接下来分享的方案中我会介绍具体的实现思路.

2. 配置化营销中心

相信大部分互联网企业都做过类似配置化平台的项目, 营销板块也不例外. 当然要做配置化平台, 需要产品, 运营和技术的通力协作, 也就意味着要脱离技术多方决策. 这要求产品和运营需要对整体业务做一个通用性的抽象, 并通过技术人员转化为可实现并被需求方低成本理解的配置平台.

对于配置系统方案, 我之前写过一篇文章《基于react/vue搭建一个通用的表单管理配置平台》, 大家感兴趣可以参考一下, 本质上也是将抽象业务做统一封装, 从而在技术层面实现按需渲染(配置式渲染):

具体展现形式如下:

关于动态配置表单的渲染模式, 我之前也提供了一种实现方案, 这也是目前大部分动态表单实现的一种模式(标准化SDL输出):

// 基础模版数据
const tpl = [
  {
    label: '文本框',
    placeholder: '请输入内容',
    type: 'text',
    value: '',
    index: uuid(5)
  },
  {
    label: '单选框',
    type: 'radio',
    option: [{label: '男', value: 0}, {label: '女', value: 1}],
    index: uuid(5)
  },
  {
    label: '复选框',
    type: 'checkbox',
    option: [{label: '男', value: 0}, {label: '女', value: 1}],
    index: uuid(5)
  },
  {
    label: '多行文本',
    placeholder: '请输入内容',
    type: 'textarea',
    index: uuid(5)
  },
  {
    label: '选择框',
    placeholder: '请选择',
    type: 'select',
    option: [{label: '中国', value: 0}, {label: '俄罗斯', value: 1}],
    index: uuid(5)
  },
  {
    label: '文件上传',
    type: 'upload',
    index: uuid(5)
  }
]

// 模版渲染组件
const tplMap = {
  text: {
    component: (props) => {
      const { placeholder, label } = props
      return {label}:

    }   },   textarea: {     component: (props) => {       const { placeholder, label } = props       return {label}:

    }   },   radio: {     component: (props) => {       const { option, label } = props       return                {label}:                                {                   option && option.map((item, i) => {                     return                        { item.label }                                        })                 }                      

    }   },   checkbox: {     component: (props) => {       const { option, label } = props       return                {label}:                                                   {                     option && option.map(item => {                       return                                                                 { item.label }                                                                                 })                   }                                       

    }   },   select: {     component: (props) => {       const { placeholder, option, label } = props       return                {label}:                                {                   option && option.map(item => {                     return {item.label}                   })                 }                      

    }   },   upload: {     component: (props) => {       return                {props.label}:                              

+