|
|
|
@ -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"></el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="浏览" align="center" prop="data2"></el-table-column>
|
|
|
|
<el-table-column label="浏览" align="center" prop="data2">
|
|
|
|
<el-table-column label="购物车" align="center" prop="data3"></el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="订单" align="center" prop="data4"></el-table-column>
|
|
|
|
<el-table-column label="购物车" align="center" prop="data3">
|
|
|
|
<el-table-column label="支付" align="center" prop="data5"></el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="完成交易" align="center" prop="data6"></el-table-column>
|
|
|
|
<el-table-column label="订单" align="center" prop="data4">
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<el-table-column label="支付" align="center" prop="data5">
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<el-table-column label="完成交易" align="center" prop="data6">
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
</el-table>
|
|
|
|
</el-table>
|
|
|
|
<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,35 @@
|
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
|
}"
|
|
|
|
}"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<el-table-column label="" align="center" prop="data1">
|
|
|
|
<el-table-column label="" align="center" prop="data1"></el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<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"
|
|
|
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
|
|
|
style="width: 100px"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</el-input
|
|
|
|
|
|
|
|
><span v-if="scope.$index != 0"> %</span>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<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"
|
|
|
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
|
|
|
style="width: 100px"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</el-input
|
|
|
|
|
|
|
|
><span v-if="scope.$index != 0"> %</span>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<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"
|
|
|
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
|
|
|
style="width: 100px"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</el-input
|
|
|
|
|
|
|
|
><span v-if="scope.$index != 0"> %</span>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<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"
|
|
|
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
|
|
|
style="width: 100px"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</el-input
|
|
|
|
|
|
|
|
><span v-if="scope.$index != 0"> %</span>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<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"
|
|
|
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
|
|
|
style="width: 100px"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
</el-input
|
|
|
|
|
|
|
|
><span v-if="scope.$index != 0"> %</span>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
</el-table>
|
|
|
|
@ -142,18 +110,12 @@
|
|
|
|
<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
|
|
|
|
<el-select v-model="step2Select1" placeholder="请选择" style="width: 130px; margin-bottom: 28px" @change="selectData($event, 4)">
|
|
|
|
v-model="step2Select1"
|
|
|
|
|
|
|
|
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'" />
|
|
|
|
@ -162,11 +124,7 @@
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<el-select
|
|
|
|
<el-select v-model="step2Select2" placeholder="请选择" style="width: 130px; margin-bottom: 32px" @change="selectData($event, 3)">
|
|
|
|
v-model="step2Select2"
|
|
|
|
|
|
|
|
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'" />
|
|
|
|
@ -175,11 +133,7 @@
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<el-select
|
|
|
|
<el-select v-model="step2Select3" placeholder="请选择" style="width: 130px; margin-bottom: 30px" @change="selectData($event, 2)">
|
|
|
|
v-model="step2Select3"
|
|
|
|
|
|
|
|
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'" />
|
|
|
|
@ -188,11 +142,7 @@
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<el-select
|
|
|
|
<el-select v-model="step2Select4" placeholder="请选择" style="width: 130px; margin-bottom: 30px" @change="selectData($event, 1)">
|
|
|
|
v-model="step2Select4"
|
|
|
|
|
|
|
|
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'" />
|
|
|
|
@ -201,11 +151,7 @@
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<el-select
|
|
|
|
<el-select v-model="step2Select5" placeholder="请选择" style="width: 130px; margin-bottom: 30px" @change="selectData($event, 0)">
|
|
|
|
v-model="step2Select5"
|
|
|
|
|
|
|
|
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'" />
|
|
|
|
@ -214,13 +160,7 @@
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
<div class="submit" style="margin-top: 70px; margin-left: 100px" @click="step2Submit">提交</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,18 +169,12 @@
|
|
|
|
<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="'订单--支付'" />
|
|
|
|
@ -250,21 +184,14 @@
|
|
|
|
<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="'付--完成交易'" />
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p>
|
|
|
|
<p>注：实际运用时 ，转化率需要与不同时期比较、与竞争对手、行业平均水平比较，分析的结果相对准确些。</p>
|
|
|
|
注：实际运用时
|
|
|
|
|
|
|
|
，转化率需要与不同时期比较、与竞争对手、行业平均水平比较，分析的结果相对准确些。
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="submit" @click="step3Submit">提交</div>
|
|
|
|
<div class="submit" @click="step3Submit">提交</div>
|
|
|
|
@ -276,30 +203,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">
|
|
|
|
针对转换率较低的环节步骤，制定改善措施： </span
|
|
|
|
一、简化购物流程
|
|
|
|
><br />
|
|
|
|
<br />
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
购物车转化率受到购物流程的影响。如果购物流程复杂或繁琐，消费者可能会因为不方便而放弃购买。因此，简化购物流程是提高购物车转化率的关键。
|
|
|
|
一、简化购物流程<br />
|
|
|
|
<br />
|
|
|
|
购物车转化率受到购物流程的影响。如果购物流程复杂或繁琐，消费者可能会因为不方便而放弃购买。因此，简化购物流程是提高购物车转化率的关键。<br />
|
|
|
|
1. 减少步骤：尽量减少购买过程中的步骤和页面数量。消费者希望能够快速完成购买，如果购买过程过于复杂，他们可能会选择放弃。
|
|
|
|
1.
|
|
|
|
<br />
|
|
|
|
减少步骤：尽量减少购买过程中的步骤和页面数量。消费者希望能够快速完成购买，如果购买过程过于复杂，他们可能会选择放弃。<br />
|
|
|
|
2. 简化表单：简化购买表单，只收集必要的信息。过多的信息收集可能会让消费者感到烦扰，从而影响购买意愿。
|
|
|
|
2.
|
|
|
|
</span>
|
|
|
|
简化表单：简化购买表单，只收集必要的信息。过多的信息收集可能会让消费者感到烦扰，从而影响购买意愿。 </span
|
|
|
|
<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版本，这时候可以观察每个版本效果。如下图，持续改进广告页以后，能看到广告页点击有了提升，最终转化率也提升了。 </span
|
|
|
|
4. 清晰的购买按钮：在产品页面上放置清晰、醒目的购买按钮，方便消费者快速添加产品到购物车。
|
|
|
|
><br />
|
|
|
|
<br />
|
|
|
|
|
|
|
|
比如下决心改进广告页，更换了素材，更换了页面布局，最后有了ABC版本，这时候可以观察每个版本效果。如下图，持续改进广告页以后，能看到广告页点击有了提升，最终转化率也提升了。
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<br />
|
|
|
|
|
|
|
|
|
|
|
|
<img src="@/assets/images/u3812.png" alt="" />
|
|
|
|
<img src="@/assets/images/u3812.png" alt="" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -325,6 +256,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 +528,9 @@ const typeData = ref([
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
// ],
|
|
|
|
// ],
|
|
|
|
// };
|
|
|
|
// };
|
|
|
|
const option = {
|
|
|
|
const option = ref({
|
|
|
|
title: {
|
|
|
|
title: {
|
|
|
|
text: '漏斗图',
|
|
|
|
text: "漏斗图",
|
|
|
|
textStyle: {
|
|
|
|
textStyle: {
|
|
|
|
color: "#fff",
|
|
|
|
color: "#fff",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -616,74 +548,61 @@ 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,
|
|
|
|
// type: 'value',
|
|
|
|
// type: 'value',
|
|
|
|
// boundaryGap: [0, 0.01]
|
|
|
|
// boundaryGap: [0, 0.01]
|
|
|
|
},
|
|
|
|
},
|
|
|
|
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],
|
|
|
|
// data: [223, 235, 284, 622, 2071],
|
|
|
|
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);
|
|
|
|
@ -698,9 +617,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 +666,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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -741,11 +675,7 @@ const step1Submit = () => {
|
|
|
|
if (step1DataSlice[0].params1 && step1DataSlice[0].params1 !== "100") {
|
|
|
|
if (step1DataSlice[0].params1 && step1DataSlice[0].params1 !== "100") {
|
|
|
|
step1Error.value++;
|
|
|
|
step1Error.value++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
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++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (step1DataSlice[0].params3 && step1DataSlice[0].params3 !== "45.7") {
|
|
|
|
if (step1DataSlice[0].params3 && step1DataSlice[0].params3 !== "45.7") {
|
|
|
|
@ -775,11 +705,7 @@ const step1Submit = () => {
|
|
|
|
if (step1DataSlice[2].params1 && step1DataSlice[2].params1 !== "100") {
|
|
|
|
if (step1DataSlice[2].params1 && step1DataSlice[2].params1 !== "100") {
|
|
|
|
step1Error.value++;
|
|
|
|
step1Error.value++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
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++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (step1DataSlice[2].params3 && step1DataSlice[2].params3 !== "13.7") {
|
|
|
|
if (step1DataSlice[2].params3 && step1DataSlice[2].params3 !== "13.7") {
|
|
|
|
@ -798,13 +724,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 +877,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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
HeHaonan
2 years ago
