.

抽奖插件使用教程

老赵发表于:2021年12月03日 10:32:13更新于:2022年05月17日 10:24:45

 

案例演示

image.png 


抽奖插件简介

抽奖活动是运营人员常用的活动工具之一,几乎每款APP都有过抽奖活动,比如大转盘抽奖,是目前效果最出众的运营玩法之一。它可以帮助运营人活动促活,实现高效转化。意派抽奖插件正式开始公测啦,我们可以依据自己的场景需求,选择不同的抽奖类型进行H5作品的趣味设计,包括大转盘、砸金蛋、抽奖箱、扭蛋机、九宫格等等。

 

插件使用须知

目前,抽奖插件属于公测阶段,仅供用户试用体验,严禁将其用于商业目的。

如果在公测期间商用出现任何问题、带来任何商业损失,意派科技不承担其带来的任何责任。

注:抽奖插件配置投入使用后,不建议再更改抽奖配置,具体说明如下:

【场景1】:改变已设置的奖品数量,可能会引发数据不一致问题:如果在修改的时候,有很多用户抽中了当前奖项,可能引发数据不一致问题。

【场景2】:新增同等级奖项,新增一个同等级的应用是没有影响的,会直接更新,不存在并发导致的数据问题。

【场景3】:先删除原有奖项再追加新奖项,会直接更新,不存在并发导致的数据问题。

  

抽奖插件添加及配置

注:以下教程主要以大转盘为设置演示案例,其他抽奖类型也是相同的设置哦。

一、添加抽奖插件

在顶部工具栏中的互动组件——抽奖来添加组件。注意一个H5作品中只可以添加1个抽奖插件。    

image.png  

二、设置元素插件属性

点击画布中的抽奖插件,右侧会出现插件属性面板。

image.png

image.png

属性面板由抽奖类型、配置抽奖信息、管理抽奖数据和清空抽奖数据组成,我们可以设置抽奖规则、奖品等级、活动时间等抽奖信息,并可查看抽奖用户的信息等。另外,触发器还可设置用户抽中奖品时、抽奖失败时、抽中非奖品时的触发行为。

 

1.右侧属性面板——类型

点击类型下拉框,可切换到不同的抽奖类型。目前支持的抽奖类型包括:大转盘、砸金蛋、抽奖箱、扭蛋机、九宫格共五种类型,后续会开放更多趣味功能,敬请期待哦!

抽奖类型展示如下:

  • 大转盘

image.png

  

  • 砸金蛋

image.png

 

  • 抽奖

image.png

 

  • 扭蛋机

image.png

 

  • 九宫格

image.png

 

2.配置抽奖信息

点击配置抽奖信息弹出配置面板,可设置抽奖插件的相关信息。

image.png

  

2.1基本设置:

可设置抽奖的活动标题、活动起止时间、举办方名称、活动规则说明及活动图片。

其中,活动图片支持下载、上传图片替换或复原初始图片,并附有图片制作尺寸供参考哦。

image.png

 

手机端演示效果图:

image.png

 

2.2规则设置:

设置抽奖规则包括:抽奖的规则、抽奖次数、抽中次数、及设置抽奖插件的的显示项。

注:大转盘支持在活动规则中配置:只显示文字、只显示图片、显示文字和图片等类型。

建议用户上传的奖品图片为正方形,确保在转盘中不会变形。

image.png

 

可以依据想要在抽奖界面中显示的内容进行选择设置。

比如:当选择显示中奖用户滚动列表时,页面下方会循环展示用户中奖情况(前提是有人抽奖后才会显示)。

注:为了应对高并发,服务器会每隔十分钟刷新一次,这样处理后,并发可以满足几百人同时抽奖的要求。

因此,“中奖者滚动列表”不会实时刷新所有用户的中奖信息,“中奖者滚动列表”会在当前用户抽中奖后显示当前用户的中奖信息,当前用户退出h5重进后,不会在中奖滚动列表中看到自己之前的中奖滚动信息。但用户可以在“我的奖品”按钮处看到自己的中奖信息。

image.png

 

2.3表单设置:

此处可设置是否要收集抽奖用户信息,以及收集哪些信息,比如常用的姓名、电话、地址等,此外若还想收集其他信息,可支持添加两个自定义字段;

image.png

 

另外还可以设置用户填写信息的时段,分为抽奖前填写和中奖后再填写。

抽奖前填写:用户点击抽奖按钮时会先出现填写信息的弹窗,正确填写提交后,才可参与抽奖活动。

中奖后再填写:用户可以先点击开始抽奖,若抽中奖品后,会出现信息填写的弹窗。

image.png

 

2.4提示文案:

用户在参与抽奖后,无论其中奖或未中奖,页面中都会出现一个弹窗提示,此处支持我们对弹窗内的提示文案及按钮文字进行个性化修改。

image.png

 

2.5样式设置

 有时我们会需要对插件本身部分样式进行个性化调整,样式设置中支持我们自行编辑CSS 文档,支持嵌套,便于我们根据自己的想法需求去调整抽奖组件的布局和外观。

后续,我们将在【样式设置】面板中增加一些默认的css代码,方便不会代码的用户自定义文字颜色、字号、阴影等设置。

大家也可以自行学习css样式:https://www.w3school.com.cn/cssref/index.asp

image.png

 

2.6奖项设置:

可在该页面自定义配置抽奖奖项,最多可添加8个奖项。点击奖项右边的编辑可进入单个奖项具体内容(表格配置)设置,从上往下依次设置奖项、奖品名称、奖品图片、奖品类型、奖品数量,其中奖品图片支持下载、替换或复原。

image.png image.png

配置面板—奖项设置—奖品剩余数量:

配置面板—奖项列表中的奖品剩余数量,和工作台的实际奖品数量为异步,因此并非实时跟随抽奖数据刷新。

所以如果在编辑器内看到剩余奖品数量与实际奖品数量不符的情况,可以刷新下作品看看。

 

九宫格奖项规则须知:

1.九宫格必须设置8个奖项,不可删除奖项;

2.当使用其他类型抽奖插件进行配置,且奖项数不为8项时,此时切换到九宫格时,奖项会自动补充为8项。如:设置扭蛋机的奖项为7项,此时切换九宫格,此时奖项会自动补充为8项,此时若再切换回扭蛋机,奖项数量仍为8项。

 

2.7补充说明:

  • 目前列表支持实物及非奖品两种类型设定、后续后扩展电子券等多类型的奖项配置。

  • 可设置该奖项的数量。设置完成后,当前奖项的中奖概率自动计算。公式为:概率=当前奖项奖品数量/奖项列表所有奖项奖品数量之和X100%。

  • 【非奖品】:类似谢谢惠顾这样的虚拟空奖。

  • 奖品池抽光后,可配置两种模式:

  • 1.   结束抽奖。用户再次点击抽奖时,提示“奖品池已抽空”,这种模式下,可设置8个奖项全部为实物奖项;

  • 2.   继续抽非奖品。当奖品池内的全部奖品抽完后,用户再次点击抽奖时,只会抽到奖项列表中第一个非奖品(如谢谢惠顾),直到抽奖次数用光。这种模式下,最少需设置1个非奖品。

image.png

配置完成后,编辑器预览效果。

image.png

 

3.后台数据管理

点击属性面板中的管理抽奖数据,可进入插件数据页面查看用户信息表和中奖表。

image.png

 

 

image.png

 

表格中记录用户的姓名、电话、地址、奖项、中奖码等信息,可通过中奖码检索中奖用户信息。

image.png

核销:点击中奖信息右侧的编辑会出现一个编辑数据的弹窗,除了可以后台修改用户信息外,还可进行奖品的核销操作。若想要核销输入数字1(即用户已领奖),若不核销输入0(默认的是0,即未核销),点击确定即可更改核销状态。

image.png

 

4.清空抽奖数据(慎重操作!)

若想一键清空后台用户抽奖数据,可点击此处,此操作需慎重。

image.png

注意:若手动删除了图层中的抽奖插件或者选中插件时按Delete键进行删除后,页面中的插件以及后台所有用户信息及抽奖数据都会随之清空,请在确定需要移除插件时再进行此操作,否则一旦误删插件,数据被清空后是无法找回的。

image.png

 image.png

 

5.触发器

抽奖插件的触发器可在用户抽中奖品或者抽中空奖时,分别设置相应的触发行为。

image.png

image.png

 

触发器新增了tooltip功能,鼠标悬浮在上面,可以看到抽奖的几个触发器的用途。

image.png

 

6.预览

以上抽奖内容设置完成后,我们可以点击编辑左上角预览当前页;

或者开启微信授权后,使用微信扫描二维码进行手机端的体验,建议使用此方式哦。

image.png

image.png

  

兑奖及导出数据表


一、兑奖

用户在抽中奖品后,可以在“我的奖品”按钮中复制出一段中奖码,在线下活动中,用户可将这段中奖码发送给商家,商家复制这一段中奖码,并在抽奖后台输入中奖码,过滤出该字段后将其核销。其中【0】代表未核销,【1】代表已核销。

image.png


二、导出数据表

如果需要将用户信息表或中奖表中的全部数据下载到本地,可以在进入打开数据表后点击下载表格按钮进行数据导出。image.png

注:在微软office的excel上,直接查看csv格式的表格,会由于csv文件没有bom头编码,导致乱码,此时可以通过链接中的办法解决:https://www.zhihu.com/question/21869078





以上就是我们抽奖插件的基本使用方法啦,快打开编辑器设置自己的抽奖玩法吧!

--------- 不了解设计的程序员不是好客服 ---------------