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

狗飘逸
狗飘逸 2023-11-16 09:27:18 53015
分类专栏： 资讯

背景

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

  • 招募(或扩大)优质销售团队
  • 广告投放(为了更多的流量和转化)
  • 系统搭建(更高效的管理企业进销存)
  • 策略运营分析(更精准的投流获客和产品品牌力打造)
  • 其他企业策略目标
图片

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

图片

设计实现方案

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

  • 传统业务开发型
  • 配置化营销中心
  • 可视化营销搭建平台

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 <div className={styles.fieldOption}><span className={styles.fieldLabel}>{label}:</span><Input placeholder={placeholder} /></div>
    }
  },
  textarea: {
    component: (props) => {
      const { placeholder, label } = props
      return <div className={styles.fieldOption}><span className={styles.fieldLabel}>{label}:</span><TextArea placeholder={placeholder} /></div>
    }
  },
  radio: {
    component: (props) => {
      const { option, label } = props
      return <div className={styles.fieldOption}>
              <span className={styles.fieldLabel}>{label}:</span>
              <Radio.Group>
                {
                  option && option.map((item, i) => {
                    return <Radio style={radioStyle} value={item.value} key={item.label}>
                      { item.label }
                    </Radio>
                  })
                }
            </Radio.Group>
        </div>
    }
  },
  checkbox: {
    component: (props) => {
      const { option, label } = props
      return <div className={styles.fieldOption}>
              <span className={styles.fieldLabel}>{label}:</span>
              <Checkbox.Group>
                <Row>
                  {
                    option && option.map(item => {
                      return <Col span={16} key={item.label}>
                              <Checkbox value={item.value} style={{ lineHeight: '32px' }}>
                                { item.label }
                              </Checkbox>
                            </Col>
                    })
                  }
                </Row>
            </Checkbox.Group>
        </div>
    }
  },
  select: {
    component: (props) => {
      const { placeholder, option, label } = props
      return <div className={styles.fieldOption}>
              <span className={styles.fieldLabel}>{label}:</span>
              <Select placeholder={placeholder} style={{width: '100%'}}>
                {
                  option && option.map(item => {
                    return <Option value={item.value} key={item.label}>{item.label}</Option>
                  })
                }
            </Select>
        </div>
    }
  },
  upload: {
    component: (props) => {
      return <div className={styles.fieldOption}>
              <span className={styles.fieldLabel}>{props.label}:</span>
              <Upload
              listType="picture-card"
              className="avatar-uploader"
              showUploadList={false}
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            >
              <div>+</div>
            </Upload>
        </div>
    }
  }
}

export {
  tpl,
  tplMap
}

当然市场上也有比较成熟的开源方案, 比如 family, XRender等.

3. 可视化营销搭建平台

以上我们可以看到, 从定制化代码到配置化方案, 技术架构有了渐进式升级, 接下来继续分享一种更低成本的方案: 可视化搭建平台.

图片

可视化搭建平台是一种建立在底层通用规则之上的通过拖拽+配置化来实现页面生产能力的一种高效率解决方案. 它主要解决的问题如下:

  • 企业数据孤岛(应用间数据共享,互通困难)
  • 企业定制化需求日益增加(不同行业赋能不同的应用场景, 千“客”千面)
  • IT人才供不应求
  • 沟通成本,研发成本, 研发周期吃紧
  • 产品迭代和响应性迟缓
图片

所以我们迫切需要诸如低代码/零代码这样的方案, 来解决上述问题. 目前国内有上千家企业在接触或者落地低代码/零代码方案, 我之前也开源了一个解决方案H5-Dooring, 用来解决页面生产效能的问题:

图片

当然设计可视化搭建系统需要考虑更多系统化问题, 比如:

  • 如何满足更多的定制需求
  • 如何对接企业数据源
  • 如何跨场景, 跨多端
  • 如何出高质量可维护的代码
  • 如何保证线上页面运行稳定和页面监控/阈值预警

当然并不是每家企业都有极高的要求, 所以我们需要针对企业实际需求和未来需求, 制定更合理的可视化解决方案. 关于可视化平台的实现方案我之前也写了很多文章和开源方案, 这里就不一一介绍了, 感兴趣的朋友可以参考一下.

  • H5-Dooring
  • H5-Stream
  • V6.Dooring

如何利用DooringSaas快速落地营销配置方案

上面介绍了3种技术设计方案, 接下来我就以一个具体的案例, 来分享一下高效营销落地方案.

图片

转盘抽奖营销页面是我们比较熟悉的一种运营手段, 传统开发中我们需要针对每一场活动开发独立的业务代码, 如果我们将营销活动的规则抽象出来, 并封装业务常用的抽奖组件, 并提供一定的配置灵活性, 这样我们就能满足大部分的营销活动场景, 如下, 我们可以配置抽奖信息, 中奖比例, 中奖后的一系列交互配置:

图片

对于企业的品宣场景, 我们也可以从可视化搭建平台中找到解决方案, 我们只需要对接企业资源库, 业务统配数据接口, 安全规范和数据上报模式, 我们就可以用可视化平台从技术侧转化为业务侧直接搭建, 近一步缩短沟通周期.

有关拖拽搭建方案, 这里笔者也分享几个成熟方案:

  • moveable
  • react-draggable
  • Vue Easy DnD
  • Vue smooth dnd
  • V-drag
  • react-dnd

等等, 有关数据源设计相关方案, 也可以参考我之前写的文章《Dooring可视化搭建平台数据源设计剖析》.

总结 & 展望

后续我也会继续分享低代码和可视化相关的技术方案和设计模式, 如果大家感兴趣也可以随时和我交流. 比如:

  • 如何实现跨多端的出码方案
  • 业务层零代码如何快速落地企业最佳实践
  • 桌面端可视化平台的价值最大化
  • AI和可视化的一些价值主张
  • 通过可视化生态建设, 如果让每一家企业都拥有一套可视化搭建平台

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=28502
赞同 0
评论 0 条

相关文章

  • Adobe 宣布以 200 亿美元收购在线设计平台 Figma 2022-09-16 50345 浏览

    站长之家(ChinaZ.com)9月16日消息:Adobe周四宣布，它将收购设计软件公司Figma，交易价值约为200亿美元的现金和股票。Figma成立于2012年，创建了基于云端的设计软件，允许团队

  • 喷问界M7不好看的人品位比较Low！余承东：华为做伟大的设计 2022-09-16 51511 浏览

    对于华为的设计，余承东直言，大家是可以的相信的，都是经得起时间的检验。9月15日，世界设计之都大会，华为常务董事、终端业务CEO、智能汽车解决方案事业群CEO余承东在主题演讲中表示，上海是中国乃至世界

  • “钞能力”！Adobe宣布1398亿元收购初创设计公司Figma 2022-09-16 49688 浏览

    Adobe又发起钞能力”了！日前，Adobe宣布以约200亿美元（约合1398亿元人民币）收购Figma，Figma是一家开发在线设计协作工具的初创公司。Adobe表示，将和Figma共同重塑创造力和

  • 小米推出磁吸无线充电宝，专为iPhone 13/12系列设计 2022-09-16 50388 浏览

    小米磁吸无线充电宝开启预约，价格199元。商品详情显示，磁吸无线充电宝是磁吸充电宝，还是立式无线充，专为iPhone13/12系列设计。小米磁吸无线充电宝的额定容量为2800mAh(5V/2.4A)，

  • 1688新增人才服务功能：为企业提供高效的人才推荐服务 2022-09-16 52421 浏览

    9月15日消息，为解决1688商家的人才招聘需求，1688与一号直聘达成合作，共建“人才招育计划”，帮助众多求职人才对接1688平台百万中小企业的用人需求，专为平台内B类中小企业提供更为高效、透明、信

  • AMD游戏营销主管放言“更大不一定更好”暗示RNDA 3 GPU更紧凑高效 2022-09-16 53181 浏览

    在今天早些时候的一条神秘推文中，AMD游戏营销高级总监SasaMarinkovic道出了一句暗号——“更大，并不一定意味着更好！”虽然没有披露更多细节，但网友们普遍推测——他应该是在预告即将到来的Ra

  • 9.15见!荣耀 X40采用满月星环设计 2022-09-16 52377 浏览

    据消息显示，荣耀秋季新品发布会将于9月15日19:30召开。届时，荣耀X40、荣耀笔记本V和X系列新品、荣耀平板X8等将亮相，目前荣耀X40已开启预约。据荣耀官方称，荣耀X40采用十亿色OLED曲屏，

  • 有望本月底见!消息称小米 Civi 2现身:延续上代轻薄设计 2022-09-16 49673 浏览

    有数码博主透露，小米Civi2也已经开始现身了。据数码博主最新发布的信息显示，近日一款代号为“Ziyi”的小米机型现身网络，结合此前相关爆料，该机不出意外的话就是此前陆续得到曝光的小米Civi2。根据

  • 英国女王生前曾参与设计了自己的灵车 2022-09-16 50524 浏览

    收藏汽车是英国女王伊丽莎白二世生前的一大喜好，从定制的宾利到装甲的路虎，这位已故英国女王的收藏品一直是一个令人着迷的话题。然而许多人可能会惊讶地发现，女王还参与了设计其去世后运送遗体的车辆。根据英国《

  • Gigabyte RTX 4090 Gaming OC显卡包装盒曝光 三槽三风扇设计 2022-09-16 51353 浏览

    在ZotacGeForceRTX4090AmpExtreme曝光之后，@wnxod又分享了来自百度@显卡吧的GigabyteGeForceRTX4090GamingOC包装盒谍照。从正面与索泰一致的印

狗飘逸
狗飘逸L0
粉丝 0 发表 7 + 关注 私信
上周热门
如何使用 StarRocks 管理和优化数据湖中的数据？  2950
【软件正版化】软件正版化工作要点  2872
统信UOS试玩黑神话：悟空  2833
信刻光盘安全隔离与信息交换系统  2728
镜舟科技与中启乘数科技达成战略合作，共筑数据服务新生态  1261
grub引导程序无法找到指定设备和分区  1226
华为全联接大会2024丨软通动力分论坛精彩议程抢先看！  165
2024海洋能源产业融合发展论坛暨博览会同期活动-海洋能源与数字化智能化论坛成功举办  163
点击报名 | 京东2025校招进校行程预告  163
华为纯血鸿蒙正式版9月底见！但Mate 70的内情还得接着挖...  158
本周热议
我的信创开放社区兼职赚钱历程 40
今天你签到了吗？ 27
如何玩转信创开放社区—从小白进阶到专家 15
信创开放社区邀请他人注册的具体步骤如下 15
方德桌面操作系统 14
用抖音玩法闯信创开放社区——用平台宣传企业产品服务 13
我有15积分有什么用? 13
如何让你先人一步获得悬赏问题信息？（创作者必看） 12
2024中国信创产业发展大会暨中国信息科技创新与应用博览会 9
中央国家机关政府采购中心：应当将CPU、操作系统符合安全可靠测评要求纳入采购需求 8
热门标签更多

加入交流群

请使用微信扫一扫!