NVIDIA 初创加速计划,免费加速您的创业启动 了解详情
写点什么

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

  • 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:38954

评论

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

2024北京国际自动驾驶技术展览会

AIOTE智博会

自动驾驶展 智能驾驶展

基于 K8s 容器集群的容灾架构与方案

阿里巴巴云原生

阿里云 Kubernetes 云原生

Java获取堆栈信息的3种方法

华为云开发者联盟

Java 开发 华为云 华为云开发者联盟

编译GreatSQL with RocksDB引擎

GreatSQL

得物布局构建耗时优化方案实践

得物技术

xml 前端

代币开发:2024年代币开发主要因素

区块链软件开发推广运营

dapp开发 区块链开发 链游开发 NFT开发 公链开发

即时通讯技术文集(第35期):IM群聊技术合集(Part2) [共12篇]

JackJiang

即时通讯;IM;网络编程

【一文读懂】基于Havenask向量检索+大模型,构建可靠的智能问答服务

阿里技术

向量检索 LLM 智能问答 Havenask 召回搜索引擎

Tapjoy from Unity 推出“每日奖励”积分墙广告,以增强用户粘性并提升投放 ROAS

Geek_2d6073

一个数据库死锁竟然被测试发现了,这你敢信

京东科技开发者

一键开启 GPU 闲置模式,基于函数计算低成本部署 Google Gemma 模型服务

阿里巴巴云原生

阿里云 云原生 函数计算

[自研开源] MyData v0.7.2 更新日志

LIEN

开源 数据集成 业务融合 API对接 mydata

【教程】APP加固的那些小事情

小程序全生命周期管理如何操作

Geek_2305a8

2024-03-13:用go语言,给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。 输入: root = [6,2,8,0,4,7,9,null,null,3,5], p = 2, q =

福大大架构师每日一题

福大大架构师每日一题

构建生成式 AI 不用事事躬亲,完全托管服务提升构建效率!

科技热闻

提升地理空间分析效率,火山引擎ByteHouse上线GIS能力

字节跳动数据平台

数据库 大数据

npm是如何处理多版本依赖的?

伤感汤姆布利柏

软件测试学习笔记丨服务端问题定位常用linux指令集合

测试人

Linux 软件测试

【体验有奖】用 AI 画春天,函数计算搭建 Stable Diffusion WebUI

阿里巴巴云原生

阿里云 云原生 AIGC

数据“隐领”未来!【隐私计算实训营】限时免费招募!

隐语SecretFlow

数据分析 数据安全 隐私计算

超越基础设施:深度探讨平台工程的关键支柱

SEAL安全

架构 基础设施 平台工程

【论文速读】| DeepGo:预测式定向灰盒模糊测试

云起无垠

十分钟掌握分布式数据库开发:OpenMLDB 开发者镜像详解

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

ByteSRC奖励再升级,单个重大漏洞提升至10万元

Geek_2d6073

虚拟数字人行业进入AI时代,数字人厂商已抢先布局?

青否数字人

数字人

KeyShot 2024.1 for mac(3D渲染和动画制作软件)v13.0.0.92破解版

影影绰绰一往直前

万字带你了解ChatGLM

华为云开发者联盟

人工智能 华为云 大模型 华为云开发者联盟

代码精简执行过程

京东科技开发者

带你走进 HarmonyOS:前端如何迎接新技术的到来

京东科技开发者

ppt美化ai软件有哪些?这5款AI工具一键生成PPT!

彭宏豪95

人工智能 PPT AIGC 效率软件 AI生成PPT

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