写点什么

玩转社交裂变,携程小程序营销实现方案

  • 2020-02-15
  • 本文字数:2797 字

    阅读完需:约 9 分钟

玩转社交裂变,携程小程序营销实现方案

随着近两年小程序应用的普及,越来越多的商家通过小程序展开营销,相比 APP,小程序有更大机动性,能够支持搜索、会话、微信群、朋友圈等场景。


在跟随微信小程序的发展,一点一滴搭建起携程主小程序的过程中,携程市场部门也尝试了各式各样的营销裂变方案。通过活动、社群等方式引导用户进行分享传播,产生社交裂变,持续迭代新玩法,增加用户的活跃度和留存度,拉动活动 UV 日均几万至十多万不等,参与人数达数十万甚至百万。


这里跟大家聊聊我们尝试过的几个通用营销实现方案,实现方式不一而足,有更优的方案期待大家一起探讨。

一、海报绘制

目前小程序仅支持以卡片方式分享给好友或群,不能一键分享到朋友圈,基于二维码能够长按识别的特性,我们将二维码与分享内容相结合,以海报图的方进行分享与推广,通过关键信息的展示,使用户快速捕捉到商家传递的重点信息,进而扫一扫或长按识别进入小程序页面了解详情。



以微信小程序为例,官方已经提供了各类 cavas 绘图接口,包括文本、图片等,出于后续复用考虑,我们将其做了次简单封装,涵盖图片绘制剪裁、文字绘制、图片保存等。



在实际绘制时,首先定义一个 canvas 容器,然后根据海报图各元素宽高和定位,叠加背景底图、文字、二维码等信息,无需关注内部绘制方法。


let pic =new Picture('mycanvas', 375, 635)pic.getImgInfo(that.data.pic,function (data) {      //背景图      pic.drawImg(data.path, { left: 0, top: 0}, { width: 375, height: 635 })      //文字      pic.drawText(that.data.username, { size:13, color: '#fff', align: 'left' }, { left: 286, top: 505 })      pic.drawText(that.data.text, {size: 18,color: '#fff', align: 'left' }, { left: 80, top: 190 })       //绘制       pic.draw(function () {         pic.canvasToImgPath(function (path) {           that.setData({             img: path           })           that.uploadImg(path)         })       })})
复制代码


这里需要注意的是,绘制过程会涉及图片下载,在使用微信下载 API 时,需要在小程序后台将图片域名配置到 downloadFile 合法域名中,避免发布生产后,出现下载失败的情况,这个问题在开发工具或真机开启调试模式时不太会出现。


如果需要多行显示文字,并动态调整字体大小,则需要将文字进行拆行,切分为数组,


let that =thislettextLen = text.lengthlettopHeight = textLen < 6 ? 190 : 180letfontBigger = true //是否有一行字数大于14个for (let i= 0; i < textLen; i++) {  if (text[i].length > 13) {    fontBigger = false    break  }}for (let i= 0; i < textLen; i++) {  if (textLen < 6 && fontBigger) {    pic.drawText(text[i], { size: 18, color:'#' + that.data.fontcolor, align: 'left' }, { left: 80, top: topHeight })    topHeight = topHeight + 35  } else {    pic.drawText(text[i], { size: 15, color:'#' + that.data.fontcolor, align: 'left' }, { left: 80, top: topHeight })    topHeight = topHeight + 27  }}
复制代码

二、搜索直达

微信搜一搜入口的开放拉近了商家与用户的距离,用户在搜一搜输入关键词,页面会呈现相关服务的小程序推荐卡片,点击搜索结果即可直达小程序内业务页面。



搜一搜大致流程是:


1)微信将搜索请求包通过 http post 方式发送至开发者在 mp 平台上配置的消息推送 URL


2)开发者收到请求之后进行签名验证和解密,并解析意图场景


3)根据意图场景将消息分发给各业务方查询服务,并将返回的 widgetData 加密返回微信


4)客户端将卡片数据 push 到小程序 widget 中进行展示



时序图引用自微信官方文档


其中,客户端初始渲染 widgetData 方式可以参考下面这段示例,微信传入的 query 包含三个字段widgetDatawxOpenIdwxParamData,而我们需要的数据是从widgetData获取,意图场景type值则可以通过wxParamData获取。


const ctx= this.getContext()      const {            width,            height      } = options
//获取 [用户搜索意图数据] 和 [卡片数据] let wxQuery = options.query
gWidgetData=this.getWidgetParam('widgetData', wxQuery) || {}gQueryData= this.getWidgetParam('wxParamData', wxQuery)
//获取业务类型if(gQueryData) {bizType =gQueryData.type || ''}
//绘制widgetWidgetDom.init({windowWidth:width,windowHeight:height,classObj,ctx});
//设置widget模板this.setWidgetRender()
//渲染widget数据this.setWidgetData()
//设置卡片自适应高度 WidgetDom.useDynamicHeight()
复制代码


继首次渲染后,客户端会以一定的时间间隔,不断轮循请求微信后台,拿到最新数据以 push 到小程序 widget 中进行更新。


onDataPush(options){//获取widget数据    gWidgetData = this.getWidgetParam('data',options);
//卡片数据为空,不做渲染 if (!gWidgetData) { return }
//重新设置widget模板 this.setWidgetRender()
//重新渲染widget数据 this.setWidgetData() }
复制代码

三、一码多用

二维码作为小程序的重要流量入口之一,能够快速吸引流量和转化,是打通线上线下场景的重要方式。而随着小程序平台的多样化,微信、支付宝、百度等都有自家一套二维码生成接口,仅微信而言,就区分 A/B/C 三种码以应用于不同场景,对于同一个活动页面多端推广和二维码管理来说都相当不方便。


幸运的是,部分小程序已经支持了对普通链接二维码的小程序跳转兼容,这种兼容的初衷是支持原有已投放的 H5 链接二维码能够继续使用下去,不用单独切换成小程序码。因此我们尝试使用一个通用 H5 链接二维码,根据扫码工具的区分,完成不同小程序的跳转。


首先,按照微信要求在小程序管理后台配置跳转小程序的二维码规则,将 h5 页面规则映射至小程序统一的扫码处理中间页;然后分别准备好 H5 和小程序两侧的中间页,H5 中间(即普通二维码的路径)负责标记页面 ID,小程序中间页负责提取路径中传递过来的 q 参数。


假设用户使用微信扫码,那么微信将匹配出规则并拉起自身小程序,进入中间页,在此页面向服务端换取线下配置的目标页地址,最终完成扫码跳转流程,同理,使用百度或支付宝小程序扫码,将会拉起各自平台小程序,若无法识别,将进入 H5 保底页面。


四、总结

通过小程序来裂变有两大特点,拉新成本低和高转化率。而得益于小程序“无需安装、触手可及、用完即走、无须卸载”的优势,用户参与起来门槛较低,不需要下载或关注,只要点开小程序,就可以使用,这在很大程度上减少了因为需要下载或关注而所流失的用户。在此基础上,配合二维码、海报图等便捷推广方式,只需要点击转发给好友/群或朋友圈即可达到快速裂变效果。


作者介绍


王红,携程市场部前端工程师,目前主要负责市场公众平台相关工作。


本文转载自公众号携程技术(ID:ctriptech)。


原文链接


https://mp.weixin.qq.com/s/TvNDuSryt9SmjYVOvGx0LA


2020-02-15 17:381785

评论

发布
暂无评论
发现更多内容

评判优秀程序员标准:“高并发”,竟被一份Github万星笔记讲清楚了

Geek_0c76c3

Java 数据库 架构 开发 面经

邓荣伟:稳定支撑每秒百万笔支付请求,支付宝数据库架构的过去、现在与未来

OceanBase 数据库

Shell编程学习(一)

Studying_swz

Shell 初阶 9月月更

大厂“毕业”半月,面试数十家公司,凭借这份面试总结涨获7家Offer,成功入职

程序员小毕

spring 程序员 程序人生 JVM Java 面试

详解CAN总线:CAN总线报文格式—数据帧

不脱发的程序猿

汽车电子 CAN总线 CAN协议 CAN总线报文格式 CAN数据帧

架构实战营模块1作业

陌生流云

架构实战营

【编程实践】提高工作效率,避免重复且枯燥的操作,利用Python自动发送邮件

迷彩

SMTP 邮件协议 9月月更 Python邮件发送

吃透阿里大佬分享的这份Java面试神技,3个月斩获8家offer

Geek_0c76c3

Java 数据库 开源 架构 开发

架构师的十八般武艺:安全架构

agnostic

安全架构

模块二

早安

极客时间架构师训练营

MyBatisPlus学习

Geek_6689b6

入门 MyBatisPlus 9月月更

阿里最新秋招面经,腾讯/美团/字节1万道Java中高级面试题

程序知音

Java 大厂面试 后端技术 Java面试八股文 阿里面试

Canvas+Javascript实现点击小球的爆炸效果

Sam9029

JavaScript canvas 9月月更 小球爆炸

[架构实战] 课后作业

爱学习的麦子

Shell编程学习(二)

Studying_swz

Shell 脚本 9月月更

详解CAN总线:CAN协议分层结构及功能

不脱发的程序猿

CAN总线 CAN协议 CAN协议分层结构及功能

直冲云霄,阿里大牛耗时49天整理12W字面试手册,押题准确率直冲95%

Geek_0c76c3

Java 数据库 开源 程序员 架构

互联网架构师联合总结的Java面试攻略,GitHub标星30K!

程序知音

java面试 大厂面试 java架构师 后端技术 Java面试八股文

信息论与编码(一)| 信源分类与数学模型

timerring

9月日更 信息熵

架构实战营模块八作业

zhihai.tu

【编程实践】出行无忧,利用Python爬取天气预报

迷彩

爬虫 爬虫教程 9月月更 Scarpy

遭不住了!Alibaba开源内网“M9”级别高并发编程全彩版进阶手册

程序知音

Java 架构 并发编程 多线程与高并发 后端技术

全网首次公开:Java面试参考指南V3.0版(完美契合当下所有互联网公司面试需求)

Java全栈架构师

数据库 程序人生 后端 高并发 Java 面试

竟拿到阿里45K高薪offer!只因他刷了这份阿里微服务天花板手册

Geek_0c76c3

Java 数据库 开源 架构 面经

架构师的十八般武艺:可观测性

agnostic

可观测性

阿里内网流传的9w字图解网络(全彩版)GitHub现已下载量过百万

程序知音

Java 程序员 计算机网络 后端技术 计算机底层

详解CAN总线:CAN节点硬件构成方案

不脱发的程序猿

嵌入式 汽车电子 CAN总线 CAN节点硬件构成方案 CAN节点

详解CAN总线:标准数据帧和扩展数据帧

不脱发的程序猿

汽车电子 通信协议 CAN总线 CAN协议 标准数据帧和扩展数据帧

Github爆火!阿里最新发布的《高并发核心编程笔记》PDF文档

Geek_0c76c3

Java 数据库 开源 架构 开发

OceanBase存储层代码解读(四):宏块的垃圾回收和坏块检查

OceanBase 数据库

阿里五位MySQL封神大佬耗17个月总结出53章性能优化法则

Geek_0c76c3

Java 数据库 开源 程序员 开发

玩转社交裂变,携程小程序营销实现方案_技术管理_王红_InfoQ精选文章