@ -17,7 +17,8 @@
< span > 案例背景 ： < / span >
< span > 案例背景 ： < / span >
< / div >
< / div >
< span style = "line-height: 25px; font-size: 14px" >
< span style = "line-height: 25px; font-size: 14px" >
漏斗分析模型已经广泛应用于流量监控 、 产品目标转化等日常数据运营与数据分析的工作中 。 比如一个电商APP ， 用户登录APP后 ， 会看到广告页 。 点击广告页后会看到产品详情 ， 如果用户想购买 ， 就点击进去购物车页面 ， 再进入支付页面 ， 完成支付 。 每一步 ， 用户都有流失的可能 ， 因此两个步骤之间有一定的转化率 。 < br / >
漏斗分析模型已经广泛应用于流量监控 、 产品目标转化等日常数据运营与数据分析的工作中 。 比如一个电商APP ， 用户登录APP后 ， 会看到广告页 。 点击广告页后会看到产品详情 ， 如果用户想购买 ， 就点击进去购物车页面 ， 再进入支付页面 ， 完成支付 。 每一步 ， 用户都有流失的可能 ， 因此两个步骤之间有一定的转化率 。
< br / >
现有以下某购物APP各个流程节点的用户数据 ， 需要用漏斗模型进行分析 ：
现有以下某购物APP各个流程节点的用户数据 ， 需要用漏斗模型进行分析 ：
< / span >
< / span >
< div style = "margin-top: 10px; display: flex" >
< div style = "margin-top: 10px; display: flex" >
@ -31,18 +32,12 @@
backgroundColor : '#6A7DE9!important' ,
backgroundColor : '#6A7DE9!important' ,
} "
} "
>
>
< el -table -column label = "" align = "center" prop = "data1" >
< el -table -column label = "" align = "center" prop = "data1" > < / e l - t a b l e - c o l u m n >
< / e l - t a b l e - c o l u m n >
< el -table -column label = "浏览" align = "center" prop = "data2" > < / e l - t a b l e - c o l u m n >
< el -table -column label = "浏览" align = "center" prop = "data2" >
< el -table -column label = "购物车" align = "center" prop = "data3" > < / e l - t a b l e - c o l u m n >
< / e l - t a b l e - c o l u m n >
< el -table -column label = "订单" align = "center" prop = "data4" > < / e l - t a b l e - c o l u m n >
< el -table -column label = "购物车" align = "center" prop = "data3" >
< el -table -column label = "支付" align = "center" prop = "data5" > < / e l - t a b l e - c o l u m n >
< / e l - t a b l e - c o l u m n >
< el -table -column label = "完成交易" align = "center" prop = "data6" > < / e l - t a b l e - c o l u m n >
< el -table -column label = "订单" align = "center" prop = "data4" >
< / e l - t a b l e - c o l u m n >
< el -table -column label = "支付" align = "center" prop = "data5" >
< / e l - t a b l e - c o l u m n >
< el -table -column label = "完成交易" align = "center" prop = "data6" >
< / e l - t a b l e - c o l u m n >
< / e l - t a b l e >
< / e l - t a b l e >
< div class = "download" @click ="downloadData" > 下 载 数 据 < / div >
< div class = "download" @click ="downloadData" > 下 载 数 据 < / div >
< / div >
< / div >
@ -54,10 +49,14 @@
< span > 第一步 ， 转化率计算 < / span >
< span > 第一步 ， 转化率计算 < / span >
< / div >
< / div >
< span style = "line-height: 25px; font-size: 14px" >
< span style = "line-height: 25px; font-size: 14px" >
转化率 = 下一步人数 / 上一步人数 * 100 % < br / >
转化率 = 下一步人数 / 上一步人数 * 100 %
流失率 = 1 — 转化率 < br / >
< br / >
总体转化率 / 最终转化率 = 该步人数 / 总访问量 （ 浏览量 ） * 100 % < br / >
流失率 = 1 — 转化率
计算结果保留小数点后一位 < br / >
< br / >
总体转化率 / 最终转化率 = 该步人数 / 总访问量 （ 浏览量 ） * 100 %
< br / >
计算结果保留小数点后一位
< br / >
< / span >
< / span >
< div style = "margin-top: 10px; display: flex" >
< div style = "margin-top: 10px; display: flex" >
< el -table
< el -table
@ -70,66 +69,55 @@
backgroundColor : '#6A7DE9!important' ,
backgroundColor : '#6A7DE9!important' ,
} "
} "
>
>
< el -table -column label = "" align = "center" prop = "data1" >
< el -table -column label = "" align = "center" prop = "data1" > < / e l - t a b l e - c o l u m n >
< / e l - t a b l e - c o l u m n >
< el -table -column label = "浏览" align = "center" prop = "data2" >
< el -table -column label = "浏览" align = "center" prop = "data2" >
< template # default = "scope" >
< template # default = "scope" >
< el -input
< el -input v-if ="scope.$index != 0" v-model="scope.row.params1" placeholder="请输入" style="width: 100px" > < / el -input >
v - if = "scope.$index != 0"
< span v-if ="scope.$index != 0" > % < / span >
v - model = "scope.row.params1"
< div v-if ="showAnswerFlag & (scope.$index != 0)" style="margin-left: 3px; display: inline-block" >
placeholder = "请输入"
< span v-if ="scope.row.isError1" style="color: red" > X < / span >
style = "width: 100px"
< span v-if ="!scope.row.isError1" style="color: #00bb00" > √ < / span >
>
< / div >
< / e l - i n p u t
> < span v-if ="scope.$index != 0" > % < / span >
< / template >
< / template >
< / e l - t a b l e - c o l u m n >
< / e l - t a b l e - c o l u m n >
< el -table -column label = "购物车" align = "center" prop = "data3" >
< el -table -column label = "购物车" align = "center" prop = "data3" >
< template # default = "scope" >
< template # default = "scope" >
< el -input
< el -input v-if ="scope.$index != 0" v-model="scope.row.params2" placeholder="请输入" style="width: 100px" > < / el -input >
v - if = "scope.$index != 0"
< span v-if ="scope.$index != 0" > % < / span >
v - model = "scope.row.params2"
< div v-if ="showAnswerFlag & (scope.$index != 0)" style="margin-left: 3px; display: inline-block" >
placeholder = "请输入"
< span v-if ="scope.row.isError2" style="color: red" > X < / span >
style = "width: 100px"
< span v-if ="!scope.row.isError2" style="color: #00bb00" > √ < / span >
>
< / div >
< / e l - i n p u t
> < span v-if ="scope.$index != 0" > % < / span >
< / template >
< / template >
< / e l - t a b l e - c o l u m n >
< / e l - t a b l e - c o l u m n >
< el -table -column label = "订单" align = "center" prop = "data4" >
< el -table -column label = "订单" align = "center" prop = "data4" >
< template # default = "scope" >
< template # default = "scope" >
< el -input
< el -input v-if ="scope.$index != 0" v-model="scope.row.params3" placeholder="请输入" style="width: 100px" > < / el -input >
v - if = "scope.$index != 0"
< span v-if ="scope.$index != 0" > % < / span >
v - model = "scope.row.params3"
< div v-if ="showAnswerFlag & (scope.$index != 0)" style="margin-left: 3px; display: inline-block" >
placeholder = "请输入"
< span v-if ="scope.row.isError3" style="color: red" > X < / span >
style = "width: 100px"
< span v-if ="!scope.row.isError3" style="color: #00bb00" > √ < / span >
>
< / div >
< / e l - i n p u t
> < span v-if ="scope.$index != 0" > % < / span >
< / template >
< / template >
< / e l - t a b l e - c o l u m n >
< / e l - t a b l e - c o l u m n >
< el -table -column label = "支付" align = "center" prop = "data5" >
< el -table -column label = "支付" align = "center" prop = "data5" >
< template # default = "scope" >
< template # default = "scope" >
< el -input
< el -input v-if ="scope.$index != 0" v-model="scope.row.params4" placeholder="请输入" style="width: 100px" > < / el -input >
v - if = "scope.$index != 0"
< span v-if ="scope.$index != 0" > % < / span >
v - model = "scope.row.params4"
< div v-if ="showAnswerFlag & (scope.$index != 0)" style="margin-left: 3px; display: inline-block" >
placeholder = "请输入"
< span v-if ="scope.row.isError4" style="color: red" > X < / span >
style = "width: 100px"
< span v-if ="!scope.row.isError4" style="color: #00bb00" > √ < / span >
>
< / div >
< / e l - i n p u t
> < span v-if ="scope.$index != 0" > % < / span >
< / template >
< / template >
< / e l - t a b l e - c o l u m n >
< / e l - t a b l e - c o l u m n >
< el -table -column label = "完成交易" align = "center" prop = "data6" >
< el -table -column label = "完成交易" align = "center" prop = "data6" >
< template # default = "scope" >
< template # default = "scope" >
< el -input
< el -input v-if ="scope.$index != 0" v-model="scope.row.params5" placeholder="请输入" style="width: 100px" > < / el -input >
v - if = "scope.$index != 0"
< span v-if ="scope.$index != 0" > % < / span >
v - model = "scope.row.params5"
< div v-if ="showAnswerFlag & (scope.$index != 0)" style="margin-left: 3px; display: inline-block" >
placeholder = "请输入"
< span v-if ="scope.row.isError5" style="color: red" > X < / span >
style = "width: 100px"
< span v-if ="!scope.row.isError5" style="color: #00bb00" > √ < / span >
>
< / div >
< / e l - i n p u t
> < span v-if ="scope.$index != 0" > % < / span >
< / template >
< / template >
< / e l - t a b l e - c o l u m n >
< / e l - t a b l e - c o l u m n >
< / e l - t a b l e >
< / e l - t a b l e >
@ -142,85 +130,87 @@
< img src = "@/assets/images/步骤.png" alt = "" / >
< img src = "@/assets/images/步骤.png" alt = "" / >
< span > 第二步 ， 绘制漏斗图 < / span >
< span > 第二步 ， 绘制漏斗图 < / span >
< / div >
< / div >
< span style = "line-height: 25px; font-size: 14px" >
< span style = "line-height: 25px; font-size: 14px" > 以各个页面节点的人数为统计指标 ， 绘制漏斗图 ： < / span >
以各个页面节点的人数为统计指标 ， 绘制漏斗图 ：
< / span >
< div style = "margin-top: 10px; display: flex" >
< div style = "margin-top: 10px; display: flex" >
< div id = "funnel" style = "width: 520px; height: 400px" > < / div >
< div id = "funnel" style = "width: 520px; height: 400px" > < / div >
< div style = "margin-top: 75px" >
< div style = "margin-top: 75px" >
< div >
< div >
< el -select
< div style = "display: flex; align-items: center; justify-content: center; margin-bottom: 28px" >
v - model = "step2Select1"
< el -select v-model ="step2Select1" placeholder="请选择" style="width: 130px" @change="selectData($event, 4)" >
placeholder = "请选择"
style = "width: 130px; margin-bottom: 28px"
>
< el -option :label ="'浏览2071'" :value ="'浏览2071'" / >
< el -option :label ="'浏览2071'" :value ="'浏览2071'" / >
< el -option :label ="'购物车622'" :value ="'购物车622'" / >
< el -option :label ="'购物车622'" :value ="'购物车622'" / >
< el -option :label ="'订单284'" :value ="'订单284'" / >
< el -option :label ="'订单284'" :value ="'订单284'" / >
< el -option :label ="'支付235'" :value ="'支付235'" / >
< el -option :label ="'支付235'" :value ="'支付235'" / >
< el -option :label ="'完成交易223'" :value ="'完成交易223'" / >
< el -option :label ="'完成交易223'" :value ="'完成交易223'" / >
< / e l - s e l e c t >
< / e l - s e l e c t >
< div v-if ="showAnswerFlag" style="margin-left: 3px" >
< span v-if ="step2Select1 != '浏览2071'" style="color: red" > X < / span >
< span v-if ="step2Select1 == '浏览2071'" style="color: #00bb00" > √ < / span >
< / div >
< / div >
< / div >
< / div >
< div >
< div >
< el -select
< div style = "display: flex; align-items: center; justify-content: center; margin-bottom: 32px" >
v - model = "step2Select2"
< el -select v-model ="step2Select2" placeholder="请选择" style="width: 130px" @change="selectData($event, 3)" >
placeholder = "请选择"
style = "width: 130px; margin-bottom: 32px"
>
< el -option :label ="'浏览2071'" :value ="'浏览2071'" / >
< el -option :label ="'浏览2071'" :value ="'浏览2071'" / >
< el -option :label ="'购物车622'" :value ="'购物车622'" / >
< el -option :label ="'购物车622'" :value ="'购物车622'" / >
< el -option :label ="'订单284'" :value ="'订单284'" / >
< el -option :label ="'订单284'" :value ="'订单284'" / >
< el -option :label ="'支付235'" :value ="'支付235'" / >
< el -option :label ="'支付235'" :value ="'支付235'" / >
< el -option :label ="'完成交易223'" :value ="'完成交易223'" / >
< el -option :label ="'完成交易223'" :value ="'完成交易223'" / >
< / e l - s e l e c t >
< / e l - s e l e c t >
< div v-if ="showAnswerFlag" style="margin-left: 3px" >
< span v-if ="step2Select2 != '购物车622'" style="color: red" > X < / span >
< span v-if ="step2Select2 == '购物车622'" style="color: #00bb00" > √ < / span >
< / div >
< / div >
< / div >
< / div >
< div >
< div >
< el -select
< div style = "display: flex; align-items: center; justify-content: center; margin-bottom: 30px" >
v - model = "step2Select3"
< el -select v-model ="step2Select3" placeholder="请选择" style="width: 130px" @change="selectData($event, 2)" >
placeholder = "请选择"
style = "width: 130px; margin-bottom: 30px"
>
< el -option :label ="'浏览2071'" :value ="'浏览2071'" / >
< el -option :label ="'浏览2071'" :value ="'浏览2071'" / >
< el -option :label ="'购物车622'" :value ="'购物车622'" / >
< el -option :label ="'购物车622'" :value ="'购物车622'" / >
< el -option :label ="'订单284'" :value ="'订单284'" / >
< el -option :label ="'订单284'" :value ="'订单284'" / >
< el -option :label ="'支付235'" :value ="'支付235'" / >
< el -option :label ="'支付235'" :value ="'支付235'" / >
< el -option :label ="'完成交易223'" :value ="'完成交易223'" / >
< el -option :label ="'完成交易223'" :value ="'完成交易223'" / >
< / e l - s e l e c t >
< / e l - s e l e c t >
< div v-if ="showAnswerFlag" style="margin-left: 3px" >
< span v-if ="step2Select3 != '订单284'" style="color: red" > X < / span >
< span v-if ="step2Select3 == '订单284'" style="color: #00bb00" > √ < / span >
< / div >
< / div >
< / div >
< / div >
< div >
< div >
< el -select
< div style = "display: flex; align-items: center; justify-content: center; margin-bottom: 30px" >
v - model = "step2Select4"
< el -select v-model ="step2Select4" placeholder="请选择" style="width: 130px" @change="selectData($event, 1)" >
placeholder = "请选择"
style = "width: 130px; margin-bottom: 30px"
>
< el -option :label ="'浏览2071'" :value ="'浏览2071'" / >
< el -option :label ="'浏览2071'" :value ="'浏览2071'" / >
< el -option :label ="'购物车622'" :value ="'购物车622'" / >
< el -option :label ="'购物车622'" :value ="'购物车622'" / >
< el -option :label ="'订单284'" :value ="'订单284'" / >
< el -option :label ="'订单284'" :value ="'订单284'" / >
< el -option :label ="'支付235'" :value ="'支付235'" / >
< el -option :label ="'支付235'" :value ="'支付235'" / >
< el -option :label ="'完成交易223'" :value ="'完成交易223'" / >
< el -option :label ="'完成交易223'" :value ="'完成交易223'" / >
< / e l - s e l e c t >
< / e l - s e l e c t >
< div v-if ="showAnswerFlag" style="margin-left: 3px" >
< span v-if ="step2Select4 != '支付235'" style="color: red" > X < / span >
< span v-if ="step2Select4 == '支付235'" style="color: #00bb00" > √ < / span >
< / div >
< / div >
< / div >
< / div >
< div >
< div >
< el -select
< div style = "display: flex; align-items: center; justify-content: center; margin-bottom: 30px" >
v - model = "step2Select5"
< el -select v-model ="step2Select5" placeholder="请选择" style="width: 130px" @change="selectData($event, 0)" >
placeholder = "请选择"
style = "width: 130px; margin-bottom: 30px"
>
< el -option :label ="'浏览2071'" :value ="'浏览2071'" / >
< el -option :label ="'浏览2071'" :value ="'浏览2071'" / >
< el -option :label ="'购物车622'" :value ="'购物车622'" / >
< el -option :label ="'购物车622'" :value ="'购物车622'" / >
< el -option :label ="'订单284'" :value ="'订单284'" / >
< el -option :label ="'订单284'" :value ="'订单284'" / >
< el -option :label ="'支付235'" :value ="'支付235'" / >
< el -option :label ="'支付235'" :value ="'支付235'" / >
< el -option :label ="'完成交易223'" :value ="'完成交易223'" / >
< el -option :label ="'完成交易223'" :value ="'完成交易223'" / >
< / e l - s e l e c t >
< / e l - s e l e c t >
< div v-if ="showAnswerFlag" style="margin-left: 3px" >
< span v-if ="step2Select5 != '完成交易223'" style="color: red" > X < / span >
< span v-if ="step2Select5 == '完成交易223'" style="color: #00bb00" > √ < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< div
class = "submit"
style = "margin-top: 70px; margin-left: 100px"
@ click = "step2Submit"
>
提交
< / div >
< / div >
< div class = "submit" style = "margin-top: 70px; margin-left: 100px" @click ="step2Submit" > 提 交 < / div >
< / div >
< / div >
< / div >
< / div >
< div class = "line" > < / div >
< div class = "line" > < / div >
@ -229,42 +219,37 @@
< img src = "@/assets/images/步骤.png" alt = "" / >
< img src = "@/assets/images/步骤.png" alt = "" / >
< span > 第三步 ， 结果分析 < / span >
< span > 第三步 ， 结果分析 < / span >
< / div >
< / div >
< span style = "line-height: 25px; font-size: 14px" >
< span style = "line-height: 25px; font-size: 14px" > 基于转化率结果计算和图标分析 ， 得出结论 ： < / span >
基于转化率结果计算和图标分析 ， 得出结论 ：
< / span >
< div style = "margin-top: 10px; display: flex" >
< div style = "margin-top: 10px; display: flex" >
< div >
< div >
< div >
< div >
< span > 流失率排第一位的 ： < / span >
< span > 流失率排第一位的 ： < / span >
< el -select
< el -select v-model ="step3Select1" placeholder="请选择" style="width: 160px" >
v - model = "step3Select1"
placeholder = "请选择"
style = "width: 160px"
>
< el -option :label ="'浏览--购物车'" :value ="'浏览--购物车'" / >
< el -option :label ="'浏览--购物车'" :value ="'浏览--购物车'" / >
< el -option :label ="'购物车--订单'" :value ="'购物车--订单'" / >
< el -option :label ="'购物车--订单'" :value ="'购物车--订单'" / >
< el -option :label ="'订单--支付'" :value ="'订单--支付'" / >
< el -option :label ="'订单--支付'" :value ="'订单--支付'" / >
< el -option :label ="'支付--完成交易'" :value ="'付--完成交易'" / >
< el -option :label ="'支付--完成交易'" :value ="'付--完成交易'" / >
< / e l - s e l e c t >
< / e l - s e l e c t >
< div v-if ="showAnswerFlag" style="margin-left: 3px;display:inline-block" >
< span v-if ="step3Select1 != '浏览--购物车'" style="color: red" > X < / span >
< span v-if ="step3Select1 == '浏览--购物车'" style="color: #00bb00" > √ < / span >
< / div >
< / div >
< / div >
< br / >
< br / >
< div >
< div >
< span > 流失率排第二位的 ： < / span >
< span > 流失率排第二位的 ： < / span >
< el -select
< el -select v-model ="step3Select2" placeholder="请选择" style="width: 160px" >
v - model = "step3Select2"
placeholder = "请选择"
style = "width: 160px"
>
< el -option :label ="'浏览--购物车'" :value ="'浏览--购物车'" / >
< el -option :label ="'浏览--购物车'" :value ="'浏览--购物车'" / >
< el -option :label ="'购物车--订单'" :value ="'购物车--订单'" / >
< el -option :label ="'购物车--订单'" :value ="'购物车--订单'" / >
< el -option :label ="'订单--支付'" :value ="'订单--支付'" / >
< el -option :label ="'订单--支付'" :value ="'订单--支付'" / >
< el -option :label ="'支付--完成交易'" :value ="'付--完成交易'" / >
< el -option :label ="'支付--完成交易'" :value ="'付--完成交易'" / >
< / e l - s e l e c t >
< / e l - s e l e c t >
< div v-if ="showAnswerFlag" style="margin-left: 3px;display:inline-block" >
< span v-if ="step3Select2 != '购物车--订单'" style="color: red" > X < / span >
< span v-if ="step3Select2 == '购物车--订单'" style="color: #00bb00" > √ < / span >
< / div >
< / div >
< / div >
< p >
< p > 注 ： 实际运用时 ， 转化率需要与不同时期比较 、 与竞争对手 、 行业平均水平比较 ， 分析的结果相对准确些 。 < / p >
注 ： 实际运用时
， 转化率需要与不同时期比较 、 与竞争对手 、 行业平均水平比较 ， 分析的结果相对准确些 。
< / p >
< / div >
< / div >
< div class = "submit" @click ="step3Submit" > 提 交 < / div >
< div class = "submit" @click ="step3Submit" > 提 交 < / div >
@ -276,30 +261,34 @@
< img src = "@/assets/images/步骤.png" alt = "" / >
< img src = "@/assets/images/步骤.png" alt = "" / >
< span > 第四步 ， 营销运营改进 < / span >
< span > 第四步 ， 营销运营改进 < / span >
< / div >
< / div >
< span style = "line-height: 25px; font-size: 14px" > 针对转换率较低的环节步骤 ， 制定改善措施 ： < / span >
< br / >
< span style = "line-height: 25px; font-size: 14px" >
< span style = "line-height: 25px; font-size: 14px" >
针对转换率较低的环节步骤 ， 制定改善措施 ： < / s p a n
一 、 简化购物流程
> < br / >
< br / >
< span style = "line-height: 25px; font-size: 14px" >
购物车转化率受到购物流程的影响 。 如果购物流程复杂或繁琐 ， 消费者可能会因为不方便而放弃购买 。 因此 ， 简化购物流程是提高购物车转化率的关键 。
一 、 简化购物流程 < br / >
< br / >
购物车转化率受到购物流程的影响 。 如果购物流程复杂或繁琐 ， 消费者可能会因为不方便而放弃购买 。 因此 ， 简化购物流程是提高购物车转化率的关键 。 < br / >
1. 减少步骤 ： 尽量减少购买过程中的步骤和页面数量 。 消费者希望能够快速完成购买 ， 如果购买过程过于复杂 ， 他们可能会选择放弃 。
1.
< br / >
减少步骤 ： 尽量减少购买过程中的步骤和页面数量 。 消费者希望能够快速完成购买 ， 如果购买过程过于复杂 ， 他们可能会选择放弃 。 < br / >
2. 简化表单 ： 简化购买表单 ， 只收集必要的信息 。 过多的信息收集可能会让消费者感到烦扰 ， 从而影响购买意愿 。
2.
< / span >
简化表单 ： 简化购买表单 ， 只收集必要的信息 。 过多的信息收集可能会让消费者感到烦扰 ， 从而影响购买意愿 。 < / s p a n
< br / >
> < br / >
< span style = "line-height: 25px; font-size: 14px" >
< span style = "line-height: 25px; font-size: 14px" >
二 、 优化产品页面 < br / >
二 、 优化产品页面
产品页面是消费者了解和选择产品的关键环节 。 优化产品页面可以提高购物车转化率 。 < br / >
< br / >
1.
产品页面是消费者了解和选择产品的关键环节 。 优化产品页面可以提高购物车转化率 。
清晰的产品信息 ： 确保产品页面上提供清晰 、 详细的产品信息 ， 包括产品描述 、 规格 、 图片等 。 消费者需要充分了解产品才能做出购买决策 。 < br / >
< br / >
2.
1. 清晰的产品信息 ： 确保产品页面上提供清晰 、 详细的产品信息 ， 包括产品描述 、 规格 、 图片等 。 消费者需要充分了解产品才能做出购买决策 。
强调产品优势和价值 ： 突出产品的独特卖点和优势 ， 让消费者明白购买该产品的价值和好处 。 < br / >
< br / >
3.
2. 强调产品优势和价值 ： 突出产品的独特卖点和优势 ， 让消费者明白购买该产品的价值和好处 。
用户评价和评级 ： 展示其他消费者的评价和评级可以增加消费者对产品的信任度和购买意愿 。 < br / >
< br / >
4.
3. 用户评价和评级 ： 展示其他消费者的评价和评级可以增加消费者对产品的信任度和购买意愿 。
清晰的购买按钮 ： 在产品页面上放置清晰 、 醒目的购买按钮 ， 方便消费者快速添加产品到购物车 。 < br / >
< br / >
比如下决心改进广告页 ， 更换了素材 ， 更换了页面布局 ， 最后有了ABC版本 ， 这时候可以观察每个版本效果 。 如下图 ， 持续改进广告页以后 ， 能看到广告页点击有了提升 ， 最终转化率也提升了 。 < / s p a n
4. 清晰的购买按钮 ： 在产品页面上放置清晰 、 醒目的购买按钮 ， 方便消费者快速添加产品到购物车 。
> < br / >
< br / >
比如下决心改进广告页 ， 更换了素材 ， 更换了页面布局 ， 最后有了ABC版本 ， 这时候可以观察每个版本效果 。 如下图 ， 持续改进广告页以后 ， 能看到广告页点击有了提升 ， 最终转化率也提升了 。
< / span >
< br / >
< img src = "@/assets/images/u3812.png" alt = "" / >
< img src = "@/assets/images/u3812.png" alt = "" / >
< / div >
< / div >
@ -325,6 +314,7 @@ import * as echarts from "echarts";
import { downBlobFile } from "@/utils/index.js" ; import { downBlobFile } from "@/utils/index.js" ;
import { onMounted } from "vue" ; import { onMounted } from "vue" ;
const { proxy } = getCurrentInstance ( ) ; const { proxy } = getCurrentInstance ( ) ;
const funnelData = ref ( [ 223 , 235 , 284 , 622 , 2071 ] ) ;
const dialogVisible = ref ( false ) ; const dialogVisible = ref ( false ) ;
const step2Select1 = ref ( "" ) ; const step2Select1 = ref ( "" ) ;
const step2Select2 = ref ( "" ) ; const step2Select2 = ref ( "" ) ;
@ -596,9 +586,9 @@ const typeData = ref([
/ / } , / / } ,
/ / ] , / / ] ,
/ / } ; / / } ;
const option = { const option = ref ( {
title : {
title : {
text : '漏斗图' ,
text : "漏斗图" ,
textStyle : {
textStyle : {
color : "#fff" ,
color : "#fff" ,
} ,
} ,
@ -616,80 +606,68 @@ const option = {
} ,
} ,
} ,
} ,
grid : {
grid : {
left : '3%' ,
left : "3%" ,
right : '4%' ,
right : "4%" ,
bottom : '3%' ,
bottom : "3%" ,
containLabel : true
containLabel : true ,
} ,
} ,
xAxis : {
xAxis : {
show : false
show : false ,
/ / t y p e : ' v a l u e ' ,
/ / t y p e : ' v a l u e ' ,
/ / b o u n d a r y G a p : [ 0 , 0 . 0 1 ]
/ / b o u n d a r y G a p : [ 0 , 0 . 0 1 ]
} ,
} ,
yAxis : {
yAxis : {
type : 'category' ,
type : "category" ,
data : [ '' , '' , '' , '' , '' ] ,
data : [ "" , "" , "" , "" , "" ] ,
position : 'center'
position : "center" ,
} ,
} ,
series : [
series : [
{
{
name : '' ,
name : "" ,
stack : 'one' ,
stack : "one" ,
type : 'bar' ,
type : "bar" ,
barWidth : '60%' ,
barWidth : "60%" ,
data : [ 1120 , 1113 , 1090 , 920 , 220 ] ,
data : [ 1120 , 1113 , 1090 , 920 , 220 ] ,
itemStyle : {
itemStyle : {
normal : {
normal : {
/ / 这 里 是 重 点
/ / 这 里 是 重 点
color : function ( params ) {
color : function ( params ) {
/ / 颜 色 设 置 透 明
/ / 颜 色 设 置 透 明
var colorList = [
var colorList = [ "rgba(0,0,0,0)" , "rgba(0,0,0,0)" , "rgba(0,0,0,0)" , "rgba(0,0,0,0)" , "rgba(0,0,0,0)" , "rgba(0,0,0,0)" ] ;
'rgba(0,0,0,0)' ,
'rgba(0,0,0,0)' ,
'rgba(0,0,0,0)' ,
'rgba(0,0,0,0)' ,
'rgba(0,0,0,0)' ,
'rgba(0,0,0,0)'
] ;
return colorList [ params . dataIndex ] ;
return colorList [ params . dataIndex ] ;
}
} ,
}
} ,
}
} ,
} ,
} ,
{
{
stack : 'one' ,
stack : "one" ,
name : '' ,
name : "" ,
type : 'bar' ,
type : "bar" ,
barWidth : '60%' ,
barWidth : "60%" ,
data : funnelData . value ,
data : [ 223 , 235 , 284 , 622 , 2071 ]
/ / d a t a : [ 2 2 3 , 2 3 5 , 2 8 4 , 6 2 2 , 2 0 7 1 ]
itemStyle : {
itemStyle : {
normal : {
normal : {
/ / 这 里 是 重 点
/ / 这 里 是 重 点
color : function ( params ) {
color : function ( params ) {
/ / 颜 色 设 置 透 明
/ / 颜 色 设 置 透 明
var colorList = [
var colorList = [ "#009FF1" , "#003DA3" , "#00B869" , "#FE8D2A" , "#FB54A1" ] ;
'#009FF1' ,
'#003DA3' ,
'#00B869' ,
'#FE8D2A' ,
'#FB54A1' ,
] ;
return colorList [ params . dataIndex ] ;
return colorList [ params . dataIndex ] ;
}
} ,
} ,
} ,
borderColor : "#fff" ,
borderColor : "#fff" ,
borderWidth : 1 ,
borderWidth : 1 ,
}
} ,
}
} ,
]
] ,
} } ) ;
const step1Error = ref ( 0 ) ; const step1Error = ref ( 0 ) ;
const step2Error = ref ( 0 ) ; const step2Error = ref ( 0 ) ;
const step3Error = ref ( 0 ) ; const step3Error = ref ( 0 ) ;
const step1AnswerFlag = ref ( false ) ; const step1AnswerFlag = ref ( false ) ;
const step2AnswerFlag = ref ( false ) ; const step2AnswerFlag = ref ( false ) ;
const step3AnswerFlag = ref ( false ) ; const step3AnswerFlag = ref ( false ) ;
const showAnswerFlag = ref ( false ) ;
const errorNum = ref ( 0 ) ; const errorNum = ref ( 0 ) ;
const baseUrl = import . meta . env . VITE _APP _BASE _API ; const baseUrl = import . meta . env . VITE _APP _BASE _API ;
onBeforeUnmount ( ( ) => { onBeforeUnmount ( ( ) => {
@ -698,9 +676,30 @@ onBeforeUnmount(() => {
onMounted ( ( ) => { onMounted ( ( ) => {
getData ( ) ;
getData ( ) ;
var chartDom = document . getElementById ( "funnel" ) ;
var chartDom = document . getElementById ( "funnel" ) ;
var myChart = echarts . init ( chartDom , );
var myChart = echarts . init ( chartDom ;
option && myChart . setOption ( option ) ;
option . value && myChart . setOption ( option . value ) ;
} ) ; } ) ;
const selectData = ( item , index ) => {
console . log ( item , index ) ;
if ( item == "浏览2071" ) {
funnelData . value [ index ] = 2071 ;
}
if ( item == "购物车622" ) {
funnelData . value [ index ] = 622 ;
}
if ( item == "订单284" ) {
funnelData . value [ index ] = 284 ;
}
if ( item == "支付235" ) {
funnelData . value [ index ] = 235 ;
}
if ( item == "完成交易223" ) {
funnelData . value [ index ] = 223 ;
}
var chartDom = document . getElementById ( "funnel" ) ;
var myChart = echarts . init ( chartDom ) ;
option . value && myChart . setOption ( option . value ) ;
} ;
const moveUp = ( index , row ) => { const moveUp = ( index , row ) => {
console . log ( "上移" , index , row ) ;
console . log ( "上移" , index , row ) ;
if ( index > 0 ) {
if ( index > 0 ) {
@ -726,13 +725,7 @@ const step1Submit = () => {
step1Error . value = 0 ;
step1Error . value = 0 ;
const step1DataSlice = step1Data . value . slice ( 1 ) ;
const step1DataSlice = step1Data . value . slice ( 1 ) ;
for ( let i in step1DataSlice ) {
for ( let i in step1DataSlice ) {
if (
if ( ! step1DataSlice [ i ] . params1 || ! step1DataSlice [ i ] . params2 || ! step1DataSlice [ i ] . params3 || ! step1DataSlice [ i ] . params4 || ! step1DataSlice [ i ] . params5 ) {
! step1DataSlice [ i ] . params1 ||
! step1DataSlice [ i ] . params2 ||
! step1DataSlice [ i ] . params3 ||
! step1DataSlice [ i ] . params4 ||
! step1DataSlice [ i ] . params5
) {
proxy . $modal . msgError ( "请先完成所有填空" ) ;
proxy . $modal . msgError ( "请先完成所有填空" ) ;
return ;
return ;
}
}
@ -740,56 +733,93 @@ const step1Submit = () => {
/ / 判 断 对 错
/ / 判 断 对 错
if ( step1DataSlice [ 0 ] . params1 && step1DataSlice [ 0 ] . params1 !== "100" ) {
if ( step1DataSlice [ 0 ] . params1 && step1DataSlice [ 0 ] . params1 !== "100" ) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 0 ] . isError1 = true ;
} else {
step1DataSlice [ 0 ] . isError1 = false ;
}
}
if (
if ( step1DataSlice [ 0 ] . params2 && step1DataSlice [ 0 ] . params2 !== "30.0" && step1DataSlice [ 0 ] . params2 !== "30" ) {
step1DataSlice [ 0 ] . params2 &&
step1DataSlice [ 0 ] . params2 !== "30.0" &&
step1DataSlice [ 0 ] . params2 !== "30"
) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 0 ] . isError2 = true ;
} else {
step1DataSlice [ 0 ] . isError2 = false ;
}
}
if ( step1DataSlice [ 0 ] . params3 && step1DataSlice [ 0 ] . params3 !== "45.7" ) {
if ( step1DataSlice [ 0 ] . params3 && step1DataSlice [ 0 ] . params3 !== "45.7" ) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 0 ] . isError3 = true ;
} else {
step1DataSlice [ 0 ] . isError3 = false ;
}
}
if ( step1DataSlice [ 0 ] . params4 && step1DataSlice [ 0 ] . params4 !== "82.7" ) {
if ( step1DataSlice [ 0 ] . params4 && step1DataSlice [ 0 ] . params4 !== "82.7" ) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 0 ] . isError4 = true ;
} else {
step1DataSlice [ 0 ] . isError4 = false ;
}
}
if ( step1DataSlice [ 0 ] . params5 && step1DataSlice [ 0 ] . params5 !== "94.9" ) {
if ( step1DataSlice [ 0 ] . params5 && step1DataSlice [ 0 ] . params5 !== "94.9" ) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 0 ] . isError5 = true ;
} else {
step1DataSlice [ 0 ] . isError5 = false ;
}
}
if ( step1DataSlice [ 1 ] . params1 && step1DataSlice [ 1 ] . params1 !== "0" ) {
if ( step1DataSlice [ 1 ] . params1 && step1DataSlice [ 1 ] . params1 !== "0" ) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 1 ] . isError1 = true ;
} else {
step1DataSlice [ 1 ] . isError1 = false ;
}
}
if ( step1DataSlice [ 1 ] . params2 && step1DataSlice [ 1 ] . params2 !== "70" ) {
if ( step1DataSlice [ 1 ] . params2 && step1DataSlice [ 1 ] . params2 !== "70" ) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 1 ] . isError2 = true ;
} else {
step1DataSlice [ 1 ] . isError2 = false ;
}
}
if ( step1DataSlice [ 1 ] . params3 && step1DataSlice [ 1 ] . params3 !== "54.3" ) {
if ( step1DataSlice [ 1 ] . params3 && step1DataSlice [ 1 ] . params3 !== "54.3" ) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 1 ] . isError3 = true ;
} else {
step1DataSlice [ 1 ] . isError3 = false ;
}
}
if ( step1DataSlice [ 1 ] . params4 && step1DataSlice [ 1 ] . params4 !== "17.3" ) {
if ( step1DataSlice [ 1 ] . params4 && step1DataSlice [ 1 ] . params4 !== "17.3" ) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 1 ] . isError4 = true ;
} else {
step1DataSlice [ 1 ] . isError4 = false ;
}
}
if ( step1DataSlice [ 1 ] . params5 && step1DataSlice [ 1 ] . params5 !== "5.1" ) {
if ( step1DataSlice [ 1 ] . params5 && step1DataSlice [ 1 ] . params5 !== "5.1" ) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 1 ] . isError5 = true ;
} else {
step1DataSlice [ 1 ] . isError5 = false ;
}
}
if ( step1DataSlice [ 2 ] . params1 && step1DataSlice [ 2 ] . params1 !== "100" ) {
if ( step1DataSlice [ 2 ] . params1 && step1DataSlice [ 2 ] . params1 !== "100" ) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 2 ] . isError1 = true ;
} else {
step1DataSlice [ 2 ] . isError1 = false ;
}
}
if (
if ( step1DataSlice [ 2 ] . params2 && step1DataSlice [ 2 ] . params2 !== "30.0" && step1DataSlice [ 2 ] . params2 !== "30" ) {
step1DataSlice [ 2 ] . params2 &&
step1DataSlice [ 2 ] . params2 !== "30.0" &&
step1DataSlice [ 2 ] . params2 !== "30"
) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 2 ] . isError2 = true ;
} else {
step1DataSlice [ 2 ] . isError2 = false ;
}
}
if ( step1DataSlice [ 2 ] . params3 && step1DataSlice [ 2 ] . params3 !== "13.7" ) {
if ( step1DataSlice [ 2 ] . params3 && step1DataSlice [ 2 ] . params3 !== "13.7" ) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 2 ] . isError3 = true ;
} else {
step1DataSlice [ 2 ] . isError3 = false ;
}
}
if ( step1DataSlice [ 2 ] . params4 && step1DataSlice [ 2 ] . params4 !== "11.3" ) {
if ( step1DataSlice [ 2 ] . params4 && step1DataSlice [ 2 ] . params4 !== "11.3" ) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 2 ] . isError4 = true ;
} else {
step1DataSlice [ 2 ] . isError4 = false ;
}
}
if ( step1DataSlice [ 2 ] . params5 && step1DataSlice [ 2 ] . params5 !== "10.8" ) {
if ( step1DataSlice [ 2 ] . params5 && step1DataSlice [ 2 ] . params5 !== "10.8" ) {
step1Error . value ++ ;
step1Error . value ++ ;
step1DataSlice [ 2 ] . isError5 = true ;
} else {
step1DataSlice [ 2 ] . isError5 = false ;
}
}
console . log ( step1Error . value , "错误数" ) ;
console . log ( step1Error . value , "错误数" ) ;
proxy . $modal . msgSuccess ( "提交成功" ) ;
proxy . $modal . msgSuccess ( "提交成功" ) ;
@ -798,13 +828,7 @@ const step1Submit = () => {
} ; } ;
const step2Submit = ( ) => { const step2Submit = ( ) => {
step2Error . value = 0 ;
step2Error . value = 0 ;
if (
if ( step2Select1 . value == "" || step2Select2 . value == "" || step2Select3 . value == "" || step2Select4 . value == "" || step2Select5 . value == "" ) {
step2Select1 . value == "" ||
step2Select2 . value == "" ||
step2Select3 . value == "" ||
step2Select4 . value == "" ||
step2Select5 . value == ""
) {
proxy . $modal . msgError ( "请先完成选择" ) ;
proxy . $modal . msgError ( "请先完成选择" ) ;
return ;
return ;
}
}
@ -957,11 +981,7 @@ const getData = () => {
. catch ( ( error ) => { } ) ;
. catch ( ( error ) => { } ) ;
} ; } ;
const submitData = ( ) => { const submitData = ( ) => {
if (
if ( ! step1AnswerFlag . value || ! step2AnswerFlag . value || ! step3AnswerFlag . value ) {
! step1AnswerFlag . value ||
! step2AnswerFlag . value ||
! step3AnswerFlag . value
) {
proxy . $modal . msgError ( "请先完成所有步骤！" ) ;
proxy . $modal . msgError ( "请先完成所有步骤！" ) ;
return ;
return ;
}
}
@ -972,9 +992,11 @@ const submitData = () => {
userId : JSON . parse ( getUserInfo ( ) ) . userId ,
userId : JSON . parse ( getUserInfo ( ) ) . userId ,
taskName : "转化分析-漏斗模型" ,
taskName : "转化分析-漏斗模型" ,
numberOfErrors : errorNum . value ,
numberOfErrors : errorNum . value ,
subState : 1 ,
} )
} )
. then ( ( res ) => {
. then ( ( res ) => {
proxy . $modal . msgSuccess ( "提交成功" ) ;
proxy . $modal . msgSuccess ( "提交成功" ) ;
showAnswerFlag . value = true ;
} )
} )
. catch ( ( error ) => { } ) ;
. catch ( ( error ) => { } ) ;
/ / c o n s o l e . l o g ( 6 6 6 ) ;
/ / c o n s o l e . l o g ( 6 6 6 ) ;
@ -1014,7 +1036,8 @@ defineExpose({
< style scoped lang = "scss" > < style scoped lang = "scss" >
. content { . content {
width : 100 % ;
width : 100 % ;
background : rgba ( 0 , 29 , 64 , 0.5 ) ;
/ / b a c k g r o u n d : r g b a ( 0 , 2 9 , 6 4 , 0 . 5 ) ;
background : # fff ;
border : 1 px solid # 0452 c6 ;
border : 1 px solid # 0452 c6 ;
padding : 10 px ;
padding : 10 px ;
/ / o p a c i t y : 0 . 5 ;
/ / o p a c i t y : 0 . 5 ;
@ -1037,6 +1060,7 @@ defineExpose({
}
}
}
}
. caseBack {
. caseBack {
color : # 000 ;
. title {
. title {
font - weight : bold ;
font - weight : bold ;
margin - top : 10 px ;
margin - top : 10 px ;
@ -1095,9 +1119,17 @@ defineExpose({
margin - bottom : 20 px ;
margin - bottom : 20 px ;
}
}
} }
/ / : : v - d e e p . e l - t a b l e t r {
/ / b a c k g r o u n d - c o l o r : # 0 0 2 6 5 2 ! i m p o r t a n t ;
/ / c o l o r : # f f f ;
/ / }
: : v - deep . el - table tr { : : v - deep . el - table tr {
background - color : # 002652 ! important ;
background - color : # fff ! important ;
color : # fff ;
color : # 000 ;
}
/* 将悬停背景色改为红色 */
: : v - deep . el - table -- enable - row - hover . el - table _ _body tr : hover > td {
background - color : # f5f7fa ! important ;
} }
: : v - deep . el - table td { : : v - deep . el - table td {
padding - top : 4 px ;
padding - top : 4 px ;
